Loading video...

Video Failed to Load

There was a problem loading this video. This could be due to a temporary network issue or the video might be unavailable.

Building Fullstack LangGraph AI agents can be a challenge. So I wrote a tutorial on how to build a Frontend for your LangGraph AI agent in minutes using: - @LangChainAI - CopilotKit🪁 - Tavily Here is the demo + checkout tutorial link below 👇

Bonnie

22,962 subscribers

23,999 views • 1 year ago •via X (Twitter)

Education Science & Technology Autos & Vehicles

Anya Rossi• Live Now

Private livecam show

1 Comments

Agent Mo1 year ago

@LangChainAI @CopilotKit @tavilyai This so sick Honestly. Good job on this. Love the part where it shows what it’s doing on the backend. Also on the right you can use it for something like browserUse, same as manus UI.

Related Videos

Introducing CoAgents v0.2🪁🦜🚀 Build full-stack Agent-Native Apps with LangGraph 🤝 CopilotKit (Like Cursor for __) Including: ✨Agentic UI/UX + Frontend 🪢 Shared state (agent app) 👨‍🦰Human-in-the-Loop 🦜Full LangGraph Platform support (Python, JS, Cloud) Get Started: Check out the demo:

Introducing CoAgents v0.2🪁🦜🚀 Build full-stack Agent-Native Apps with LangGraph 🤝 CopilotKit (Like Cursor for __) Including: ✨Agentic UI/UX + Frontend 🪢 Shared state (agent app) 👨‍🦰Human-in-the-Loop 🦜Full LangGraph Platform support (Python, JS, Cloud) Get Started: Check out the demo:

CopilotKit🪁

32,118 views • 1 year ago

🚀Launching CoAgents Public Beta 🪁: Everything you need to build Agent-Native applications, powered by LangGraph & CopilotKit. CoAgents enables in-app agents with: - Agenetic generative UI ✨ - Shared state (between agent application) - Streaming intermediate agent state - Human-in-the-Loop (Human approval & planning) 👨‍🦰 - Frontend Actions 💪 --- We’ve recently seen the emergence of Agent-Native applications that actually work: powered by vertical AI agents + agentic UX + deep in-app integration. (Apps like the Replit AI Agent, OpenAI Canvas, etc, but for any domain) With CoAgents + LangGraph, you can build this next generation of agent apps, for any vertical, with a clean and easy to use infrastructure (in hours). 💻Get started: 🗞️Blog: 🕹️Demo: 🗓️Webinar (Build an Agent-Native Apps with CoAgents & LangGraph): CC: Atai Barkai, , Harrison Chase

🚀Launching CoAgents Public Beta 🪁: Everything you need to build Agent-Native applications, powered by LangGraph & CopilotKit. CoAgents enables in-app agents with: - Agenetic generative UI ✨ - Shared state (between agent application) - Streaming intermediate agent state - Human-in-the-Loop (Human approval & planning) 👨‍🦰 - Frontend Actions 💪 --- We’ve recently seen the emergence of Agent-Native applications that actually work: powered by vertical AI agents + agentic UX + deep in-app integration. (Apps like the Replit AI Agent, OpenAI Canvas, etc, but for any domain) With CoAgents + LangGraph, you can build this next generation of agent apps, for any vertical, with a clean and easy to use infrastructure (in hours). 💻Get started: 🗞️Blog: 🕹️Demo: 🗓️Webinar (Build an Agent-Native Apps with CoAgents & LangGraph): CC: Atai Barkai, , Harrison Chase

CopilotKit🪁

51,637 views • 1 year ago

📋 Open Multi-Agent Canvas Plug-in any LangGraph agents, then chat with them. Including Generative UI, state streaming, and automatic agent routing. New template for learning how to add frontend features to LangGraph agents. Try it out: LangChain

📋 Open Multi-Agent Canvas Plug-in any LangGraph agents, then chat with them. Including Generative UI, state streaming, and automatic agent routing. New template for learning how to add frontend features to LangGraph agents. Try it out: LangChain

CopilotKit🪁

15,492 views • 1 year ago

Big release here! AG-UI 🤝 Google A2A Embed A2A multi-agent meshes in your frontend, and build fullstack multi-agent apps with A2A and AG-UI. 🔍How it works: Simply drop-in A2A agent endpoints, and an A2A AG-UI orchestrator agent will bi-directionally stream events between your Agents & application. Includes: - UI for A2A Interactions - Generative UI for Agent Tool Calls - Human-in-the Loop Approvals - State Synchronization (agent mesh application state) - Frontend Tool Calls for A2A Agents Watch the demo below > LangChain LangGraph & Google ADK agents working together simultaneously inside an app Demo GitHub, docs, and more 👇

Big release here! AG-UI 🤝 Google A2A Embed A2A multi-agent meshes in your frontend, and build fullstack multi-agent apps with A2A and AG-UI. 🔍How it works: Simply drop-in A2A agent endpoints, and an A2A AG-UI orchestrator agent will bi-directionally stream events between your Agents & application. Includes: - UI for A2A Interactions - Generative UI for Agent Tool Calls - Human-in-the Loop Approvals - State Synchronization (agent mesh application state) - Frontend Tool Calls for A2A Agents Watch the demo below > LangChain LangGraph & Google ADK agents working together simultaneously inside an app Demo GitHub, docs, and more 👇

CopilotKit🪁

30,557 views • 8 months ago

Our latest LangChain Academy course – Building Ambient Agents with LangGraph – is now available! Most agents today handle one request at a time through chat interfaces. But as models have improved, agents can now run in the background – and take on long-running, complex tasks. LangGraph is built for these “ambient agents,” with support for human-in-the-loop workflows and memory. LangGraph Platform provides the infrastructure to run these agents at scale, and LangSmith helps you observe, evaluate, and improve your agents. Together, they make it easier to build reliable, production-ready agents. In this course, you’ll: 📩 Learn the fundamentals of LangGraph and how to build your own email agent 📊 Evaluate your agent using LangSmith ✅ Add human-in-the-loop for reviews, and memory so your agent adapts over time 🚀 Deploy your agent with LangGraph Platform and connect it to Gmail

Our latest LangChain Academy course – Building Ambient Agents with LangGraph – is now available! Most agents today handle one request at a time through chat interfaces. But as models have improved, agents can now run in the background – and take on long-running, complex tasks. LangGraph is built for these “ambient agents,” with support for human-in-the-loop workflows and memory. LangGraph Platform provides the infrastructure to run these agents at scale, and LangSmith helps you observe, evaluate, and improve your agents. Together, they make it easier to build reliable, production-ready agents. In this course, you’ll: 📩 Learn the fundamentals of LangGraph and how to build your own email agent 📊 Evaluate your agent using LangSmith ✅ Add human-in-the-loop for reviews, and memory so your agent adapts over time 🚀 Deploy your agent with LangGraph Platform and connect it to Gmail

LangChain

33,192 views • 11 months ago

New AI Agentic course! Learn to use LangGraph to build single and multi-agent LLM applications in AI Agents in LangGraph. This short course, taught by LangChain LangChain founder Harrison Chase Harrison Chase and Tavily founder @weiss_rotem, shows how to integrate agentic search to enhance an agent's knowledge with query-focused answers in predictable formats. Also learn to implement agentic memory to save state for reasoning and debugging, and see how human-in-the-loop input can guide agents at key junctures. You'll build an agent from scratch, then reconstruct it with LangGraph to thoroughly understand the framework. Finally, you'll build a sophisticated essay-writing agent that incorporates all the learnings from the course. Sign up here!

New AI Agentic course! Learn to use LangGraph to build single and multi-agent LLM applications in AI Agents in LangGraph. This short course, taught by LangChain LangChain founder Harrison Chase Harrison Chase and Tavily founder @weiss_rotem, shows how to integrate agentic search to enhance an agent's knowledge with query-focused answers in predictable formats. Also learn to implement agentic memory to save state for reasoning and debugging, and see how human-in-the-loop input can guide agents at key junctures. You'll build an agent from scratch, then reconstruct it with LangGraph to thoroughly understand the framework. Finally, you'll build a sophisticated essay-writing agent that incorporates all the learnings from the course. Sign up here!

Andrew Ng

151,484 views • 2 years ago

Here is how simple it is to build a UI front-end for an AI agent (assuming you are using . The video here is 90 seconds and will show you everything you need to connect an agent to a web app: 1. Set up CopilotKit🪁 in your app 1. Copy the agent's localhost URL from LangGraph Studio 2. Paste that URL into a CopilotKit🪁 remote endpoint That's all you need to get a front-end to interact with the agent! The secret sauce here is CoAgents, an open-source library. You can use CoAgents to integrate any agent with your web application. Here is what you get: • Human-in-the-loop to steer and correct the agent • Stream intermediate agent state • Real-time state sharing between the agent and the application • Agentic generative UI to build trust that the agent is on the right path Watch the attached demo so you see it in action.

Here is how simple it is to build a UI front-end for an AI agent (assuming you are using . The video here is 90 seconds and will show you everything you need to connect an agent to a web app: 1. Set up CopilotKit🪁 in your app 1. Copy the agent's localhost URL from LangGraph Studio 2. Paste that URL into a CopilotKit🪁 remote endpoint That's all you need to get a front-end to interact with the agent! The secret sauce here is CoAgents, an open-source library. You can use CoAgents to integrate any agent with your web application. Here is what you get: • Human-in-the-loop to steer and correct the agent • Stream intermediate agent state • Real-time state sharing between the agent and the application • Agentic generative UI to build trust that the agent is on the right path Watch the attached demo so you see it in action.

Santiago

46,109 views • 1 year ago

🚀Excited to Introduce Coagents🚀: An innovative framework for building human-in-the-loop agents into applications - powered by LangGraph & CopilotKit. Coagents enable: - End-users to correct agent steps (in-app)🛤️ - Stream intermediate agent state 🪢 - Expose LangGraph agents as specialized skills for an app's copilot 🧠 --- Human-in-the-loop is key to taking agents from cool demos to actually useful tools. Coagents, in combination with LangGraph are a big step towards making in-app, human-in-the-loop agents trivially easy to develop. Check out the first ever demo of Coagents, an AI Children's book generator 👇 Coagents will be entirely open-sourced. Interested in contributing/early access? CC: , shadcn, Harrison Chase, Lance Martin, Ariel Weinberger

🚀Excited to Introduce Coagents🚀: An innovative framework for building human-in-the-loop agents into applications - powered by LangGraph & CopilotKit. Coagents enable: - End-users to correct agent steps (in-app)🛤️ - Stream intermediate agent state 🪢 - Expose LangGraph agents as specialized skills for an app's copilot 🧠 --- Human-in-the-loop is key to taking agents from cool demos to actually useful tools. Coagents, in combination with LangGraph are a big step towards making in-app, human-in-the-loop agents trivially easy to develop. Check out the first ever demo of Coagents, an AI Children's book generator 👇 Coagents will be entirely open-sourced. Interested in contributing/early access? CC: , shadcn, Harrison Chase, Lance Martin, Ariel Weinberger

CopilotKit🪁

69,301 views • 1 year ago

⭐️ New LangChain Academy Course: LangGraph Essentials (Python & TypeScript)⭐️ Learn the basics of LangGraph – our low-level orchestration framework purpose-built for building AI agents. Last week, we launched LangGraph 1.0, marking its first major stable release. LangGraph allows you to control every step of your agent’s workflow. It supports memory, human-in-the-loop interactions, and durable execution for managing long-running tasks. In this quickstart course, you'll learn how to: - Create simple workflows and build an agent - Use LangGraph’s core building blocks: State, Nodes, and Edges - Add memory to your agent - Incorporate human-in-the-loop interactions Enroll for free ➡️

⭐️ New LangChain Academy Course: LangGraph Essentials (Python & TypeScript)⭐️ Learn the basics of LangGraph – our low-level orchestration framework purpose-built for building AI agents. Last week, we launched LangGraph 1.0, marking its first major stable release. LangGraph allows you to control every step of your agent’s workflow. It supports memory, human-in-the-loop interactions, and durable execution for managing long-running tasks. In this quickstart course, you'll learn how to: - Create simple workflows and build an agent - Use LangGraph’s core building blocks: State, Nodes, and Edges - Add memory to your agent - Incorporate human-in-the-loop interactions Enroll for free ➡️

LangChain

53,969 views • 7 months ago

One hook connects any Agent to your frontend Then layer on chat UI, threads, generative UI, voice transcription, tool calls, state sync, HITL, and any AI feature. We make it easy for devs to build fullstack agentic apps. Everything here is built with CopilotKit 👇

One hook connects any Agent to your frontend Then layer on chat UI, threads, generative UI, voice transcription, tool calls, state sync, HITL, and any AI feature. We make it easy for devs to build fullstack agentic apps. Everything here is built with CopilotKit 👇

CopilotKit🪁

20,309 views • 19 days ago

Here is a tutorial on how to build a Concept + Ad in only a few minutes only using 100% AI Build with Compass by Common Thread Collective , CreativeOS and ChatGPT

Here is a tutorial on how to build a Concept + Ad in only a few minutes only using 100% AI Build with Compass by Common Thread Collective , CreativeOS and ChatGPT

Jacob Posel

49,141 views • 1 year ago

What if you could be the AI tutorial girl? 🤯 Now you can using Nano-banana + Wan Animate! This free tutorial is less than 3 minutes! Link below 👇

What if you could be the AI tutorial girl? 🤯 Now you can using Nano-banana + Wan Animate! This free tutorial is less than 3 minutes! Link below 👇

GLIF

39,538 views • 8 months ago

🦜🤖Introducing Open Agent Platform An open-source, no-code agent building platform. OAP enables non-developers to build highly customizable agents, which connect to: - 🛠️MCP Tools - 📄LangConnect for RAG - 🤖Other LangGraph Agents! Try the public demo, or fork & customize it yourself! 🧵

🦜🤖Introducing Open Agent Platform An open-source, no-code agent building platform. OAP enables non-developers to build highly customizable agents, which connect to: - 🛠️MCP Tools - 📄LangConnect for RAG - 🤖Other LangGraph Agents! Try the public demo, or fork & customize it yourself! 🧵

LangChain

136,945 views • 1 year ago

🤯 Just build Fortnite in React ... With the new releases of r3/timeline and r3/viverse, building a character controller with Three.js is now easier then ever. Checkout the link below for a full tutorial on to build the demo in the video.

🤯 Just build Fortnite in React ... With the new releases of r3/timeline and r3/viverse, building a character controller with Three.js is now easier then ever. Checkout the link below for a full tutorial on to build the demo in the video.

Bela Bohlender

103,527 views • 6 months ago

Build smarter AI research. This fullstack quickstart guide shows how to combine Gemini, LangGraph, and React to create an agent that researches topics, identifies knowledge gaps, and gives cited answers

Build smarter AI research. This fullstack quickstart guide shows how to combine Gemini, LangGraph, and React to create an agent that researches topics, identifies knowledge gaps, and gives cited answers

Google AI Developers

47,343 views • 1 year ago

Sanu demonstrates using Rive's AI agent to build a cloner tool. Full tutorial in quote below. Rive's AI doesn't replace artists. It gives them the power to build their own tools.

Sanu demonstrates using Rive's AI agent to build a cloner tool. Full tutorial in quote below. Rive's AI doesn't replace artists. It gives them the power to build their own tools.

Guido Rosso

14,615 views • 2 months ago

LangChain Academy is live! Our first course — Introduction to LangGraph — teaches you the in-and-outs of building a reliable AI agent. In this course, you’ll learn how to: 🛠️ Build agents with LangGraph's graph-based workflows 🔄 Use memory + human-in-the-loop for smarter, self-corrective agents 📚 Create your own AI assistant that can perform knowledge tasks Enroll now for free ➡️ Bring LangChain Academy to your company ➡️

LangChain Academy is live! Our first course — Introduction to LangGraph — teaches you the in-and-outs of building a reliable AI agent. In this course, you’ll learn how to: 🛠️ Build agents with LangGraph's graph-based workflows 🔄 Use memory + human-in-the-loop for smarter, self-corrective agents 📚 Create your own AI assistant that can perform knowledge tasks Enroll now for free ➡️ Bring LangChain Academy to your company ➡️

LangChain

105,415 views • 1 year ago

🚀 Introducing LangGraph Cloud 🚀 LangGraph helps you build reliable agents that actually work. Today, we've launched LangGraph Cloud, our new infrastructure to run fault-tolerant LangGraph agents at scale. With LangGraph Cloud, you can: • Handle large workloads with horizontally-scaling servers, task queues, and built-in persistence • Debug agent failure modes and iterate quickly in a visual playground-like studio • Deploy in one-click and get integrated tracing & monitoring in LangSmith This builds on LangGraph v0.1, our latest stable release supporting diverse control flows - whether it's single- or multi-agent, hierarchal or sequential. You'll be able to create flexible agents with human-in-the-loop collaboration and first-class streaming support. We can't wait to see the agentic workflows you'll ship. LangGraph Cloud is available in closed beta today. 👉 Join the waitlist for LangGraph Cloud: ✍️ Read our blog post announcement: 📽️ Watch the video walkthrough: 🌀 Haven't tried LangGraph yet? Give it a spin here: 🙌 Check out the new LangGraph landing page:

🚀 Introducing LangGraph Cloud 🚀 LangGraph helps you build reliable agents that actually work. Today, we've launched LangGraph Cloud, our new infrastructure to run fault-tolerant LangGraph agents at scale. With LangGraph Cloud, you can: • Handle large workloads with horizontally-scaling servers, task queues, and built-in persistence • Debug agent failure modes and iterate quickly in a visual playground-like studio • Deploy in one-click and get integrated tracing & monitoring in LangSmith This builds on LangGraph v0.1, our latest stable release supporting diverse control flows - whether it's single- or multi-agent, hierarchal or sequential. You'll be able to create flexible agents with human-in-the-loop collaboration and first-class streaming support. We can't wait to see the agentic workflows you'll ship. LangGraph Cloud is available in closed beta today. 👉 Join the waitlist for LangGraph Cloud: ✍️ Read our blog post announcement: 📽️ Watch the video walkthrough: 🌀 Haven't tried LangGraph yet? Give it a spin here: 🙌 Check out the new LangGraph landing page:

LangChain

134,051 views • 1 year ago

🔥 Hear how Cisco automated 60% of 1.8 million support cases with LangGraph, LangSmith, and LangGraph Platform 🔥 In his LangChain Interrupt talk, Carlos Pereira, Fellow & Chief Architect at Cisco, shares Cisco’s blueprint for transforming customer experience with AI agents. In this video, you’ll learn about: - How Cisco’s Customer Experience team identifies and prioritizes high-impact AI use cases - Their supervisor architecture that routes complex queries across specialized agents - How LangGraph, LangGraph Platform, and LangSmith power the development and continuous improvement of these agents Watch the video:

🔥 Hear how Cisco automated 60% of 1.8 million support cases with LangGraph, LangSmith, and LangGraph Platform 🔥 In his LangChain Interrupt talk, Carlos Pereira, Fellow & Chief Architect at Cisco, shares Cisco’s blueprint for transforming customer experience with AI agents. In this video, you’ll learn about: - How Cisco’s Customer Experience team identifies and prioritizes high-impact AI use cases - Their supervisor architecture that routes complex queries across specialized agents - How LangGraph, LangGraph Platform, and LangSmith power the development and continuous improvement of these agents Watch the video:

LangChain

44,017 views • 1 year ago