Loading video...

Video Failed to Load

Go Home

AG-UI makes building agentic applications dramatically easier. Here's how it works. This is a model for a simple chatbot: User → LLM → Response But interactive agents that render UI, pause for approvals, and ask users for input need a much more complex model. When building these agents, a...

svpino's profile picture

Santiago

452,586 subscribers

17,438 views • 2 days ago •via X (Twitter)

LIVE

Anya Rossi• Live Now

Private livecam show

0 Comments

No comments available

Comments from the original post will appear here

Related Videos

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 👇
0:25

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

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.
1:32

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

Introducing the Generative UI Research Canvas ✨ Every agent needs a powerful UI Combine LangChain, Tavily, Tako and CopilotKit🪁 and you get a LangChain-based research agent with a Generative UI-driven frontend. When agents can explore the underlying data, research becomes more trustworthy and useful. How does this work? - LangChain manages the agent workflow and tool orchestration. - Tako converts retrieved data into structured, visual components - Tavily provides agentic search - CopilotKit renders those components in the UI and keeps the user in the loop while the agent is working So instead of a boring and static report, the output is an interactive research canvas that evolves as the agent runs. 2026 is the year where users want to see the output, not read it... Generative UI makes this possible for agentic applications. Tutorial: Open-Source Repo: Docs:
0:36

Introducing the Generative UI Research Canvas ✨ Every agent needs a powerful UI Combine LangChain, Tavily, Tako and CopilotKit🪁 and you get a LangChain-based research agent with a Generative UI-driven frontend. When agents can explore the underlying data, research becomes more trustworthy and useful. How does this work? - LangChain manages the agent workflow and tool orchestration. - Tako converts retrieved data into structured, visual components - Tavily provides agentic search - CopilotKit renders those components in the UI and keeps the user in the loop while the agent is working So instead of a boring and static report, the output is an interactive research canvas that evolves as the agent runs. 2026 is the year where users want to see the output, not read it... Generative UI makes this possible for agentic applications. Tutorial: Open-Source Repo: Docs:

Atai Barkai

11,997 views • 5 months ago

Microsoft Teams just got Generative UI But this is just the tip of the iceberg. AG-UI is the protocol connecting any agent to any user on any app, topped with Generative UI. That means your agent can render: - forms - buttons - charts - approval flows Right inside the chat, on the fly. But it's not limited to in-app copilots. What's special is that you can work with any agent using the same system and bring them into any surface, including Slack, WhatsApp, Discord and more. This is exactly why Hermes and OpenClaw took off. As users of these agents, we don't like walls of text, and it's a pain to get when you can have way better UX. CopilotKit🪁 + AG-UI handle that interaction layer. If you want to try out Agentic UI in Microsoft Teams, you can get early access here:
0:55

Microsoft Teams just got Generative UI But this is just the tip of the iceberg. AG-UI is the protocol connecting any agent to any user on any app, topped with Generative UI. That means your agent can render: - forms - buttons - charts - approval flows Right inside the chat, on the fly. But it's not limited to in-app copilots. What's special is that you can work with any agent using the same system and bring them into any surface, including Slack, WhatsApp, Discord and more. This is exactly why Hermes and OpenClaw took off. As users of these agents, we don't like walls of text, and it's a pain to get when you can have way better UX. CopilotKit🪁 + AG-UI handle that interaction layer. If you want to try out Agentic UI in Microsoft Teams, you can get early access here:

Atai Barkai

23,776 views • 16 days ago

Microsoft 🤝 AG-UI Protocol Microsoft Agent Framework is now AG-UI compatible! 🎉 Connect your MS Agent Framework .NET agents into fullstack applications with Python coming soon 👀 MS Agent Framework takes care of the agentic backend, AG-UI connects your agents to the frontend. Features include: - Chat UI - Generative UI - State synchronization - Human-in-the-loop - Frontend Tool Calls All the building blocks you need to take your agents from the backend and into a fullstack agentic application. Available in React & Angular via CopilotKit, and Rust, Kotlin, Rust, Java and .NET via community SDKs Big shoutout to the Microsoft & CopilotKit teams, who shipped this highly requested integration at breakneck speeds. More coming soon 👀 🙏 Javier Nelson, Joonseok Oh, Daniel Roth, Evan Mattson, Tyler Slaton, Brandon McConnell, Markus Ecker Read more about our collaboration: Get started: Check out the Dojo:
1:13

Microsoft 🤝 AG-UI Protocol Microsoft Agent Framework is now AG-UI compatible! 🎉 Connect your MS Agent Framework .NET agents into fullstack applications with Python coming soon 👀 MS Agent Framework takes care of the agentic backend, AG-UI connects your agents to the frontend. Features include: - Chat UI - Generative UI - State synchronization - Human-in-the-loop - Frontend Tool Calls All the building blocks you need to take your agents from the backend and into a fullstack agentic application. Available in React & Angular via CopilotKit, and Rust, Kotlin, Rust, Java and .NET via community SDKs Big shoutout to the Microsoft & CopilotKit teams, who shipped this highly requested integration at breakneck speeds. More coming soon 👀 🙏 Javier Nelson, Joonseok Oh, Daniel Roth, Evan Mattson, Tyler Slaton, Brandon McConnell, Markus Ecker Read more about our collaboration: Get started: Check out the Dojo:

CopilotKit🪁

40,520 views • 7 months ago

AI agents can finally talk to your frontend! The new AG-UI protocol lets your agents stream messages, sync state, call tools, and receive user input, live in the UI. It fills a critical gap in the agent ecosystem: ▸ MCP – agents to tools ▸ A2A – agents to agents ▸ AG-UI – agents to users, via frontends Connects to LangChain, CrewAI, and LlamaIndex (and more). 100% open-source.
0:25

AI agents can finally talk to your frontend! The new AG-UI protocol lets your agents stream messages, sync state, call tools, and receive user input, live in the UI. It fills a critical gap in the agent ecosystem: ▸ MCP – agents to tools ▸ A2A – agents to agents ▸ AG-UI – agents to users, via frontends Connects to LangChain, CrewAI, and LlamaIndex (and more). 100% open-source.

Lior⚡

15,514 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
1:46

🚀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,646 views • 1 year ago

We are witnessing a fundamental shift in how software is built. Over the decades, UI was static and predictable. But AI is changing the fundamental nature of the interface. We are moving away from fixed UI and toward a new standard: Generative UI. Generative UI lets agents participate in the UI, not just the conversation. It’s a dynamic participant in the user experience. Depending on the complexity of your app, Generative UI generally falls into three categories: 1. Static (AG-UI): UI is chosen from a fixed set of hand-built components 2. Open-Ended (MCP Apps): agent sends arbitrary content like raw HTML or iframes for total flexibility. 3. Declarative (A2UI): agent and frontend communicate via a structured UI spec for dynamic widgets and forms. The AG-UI Protocol by CopilotKit is the real breakthrough. AG-UI acts as the universal transport layer. It provides the integrations and middleware for every Gen-UI spec, making it trivial to bring dynamic components into your existing app. CopilotKit provides the go-to ecosystem for building agentic applications and is the React client of AG-UI. It is designed to be deeply integrated, allowing developers to bring their own frameworks or protocols to the table. Play around with different types of Generative UI here → Check out the video attached to see Generative UI in action. Appreciate the CopilotKit team for collaborating with me on this deep dive.
0:33

We are witnessing a fundamental shift in how software is built. Over the decades, UI was static and predictable. But AI is changing the fundamental nature of the interface. We are moving away from fixed UI and toward a new standard: Generative UI. Generative UI lets agents participate in the UI, not just the conversation. It’s a dynamic participant in the user experience. Depending on the complexity of your app, Generative UI generally falls into three categories: 1. Static (AG-UI): UI is chosen from a fixed set of hand-built components 2. Open-Ended (MCP Apps): agent sends arbitrary content like raw HTML or iframes for total flexibility. 3. Declarative (A2UI): agent and frontend communicate via a structured UI spec for dynamic widgets and forms. The AG-UI Protocol by CopilotKit is the real breakthrough. AG-UI acts as the universal transport layer. It provides the integrations and middleware for every Gen-UI spec, making it trivial to bring dynamic components into your existing app. CopilotKit provides the go-to ecosystem for building agentic applications and is the React client of AG-UI. It is designed to be deeply integrated, allowing developers to bring their own frameworks or protocols to the table. Play around with different types of Generative UI here → Check out the video attached to see Generative UI in action. Appreciate the CopilotKit team for collaborating with me on this deep dive.

Pratham

33,920 views • 5 months ago

Create dynamic and interactive Agent UI experiences in the Gemini Enterprise app. With support for the Agent-to-UI protocol (A2UI), custom agents can dynamically generate rich, native UI components directly within the Gemini Enterprise app.
0:37

Create dynamic and interactive Agent UI experiences in the Gemini Enterprise app. With support for the Agent-to-UI protocol (A2UI), custom agents can dynamically generate rich, native UI components directly within the Gemini Enterprise app.

Google Cloud

16,662,462 views • 1 month ago

Anthropic's most viral feature is now open-source! Until now, Anthropic's Generative UI capabilities only existed inside its own products. CopilotKit🪁 just shipped Open Generative UI, an open-source implementation of Claude Artifacts that works in any app. The agent generates HTML/SVG at runtime, and CopilotKit streams it token-by-token into a sandboxed iframe inside the app's chat. So the user can watch the UI assemble itself in real time, not after the full response is ready. The sandbox is fully isolated with no access to the parent app, the DOM, or user data. So if the agent hallucinates broken markup or unexpected JavaScript, nothing leaks outside the iframe. Under the hood, the agent does not select from pre-built components. Instead, it generates arbitrary visuals from scratch every time. The output is unconstrained by default, but you can shape it by defining prompt-based skills that teach the agent specific visual formats or guidelines. For instance, a skill prompt can guide the agent toward producing a Chart.js dashboard with proper axis labels and responsive sizing, or an interactive 3D model with rotation controls. The video below shows this in action, and the output quality you see actually comes from the skills layer. Open Generative UI runs on AG-UI, so it works out of the box with LangGraph, CrewAI, Mastra, Google ADK, AWS Strands, and more. It also ships with a standalone MCP server that plugs into Claude Code, Cursor, or any MCP-compatible client. And the entire stack is built on top of CopilotKit, the open-source frontend framework for agents and generative UI. 30k+ GitHub stars, with SDKs for React, Next.js, Angular, and Vue. I have shared the GitHub repo and a live playground in the replies!
0:53

Anthropic's most viral feature is now open-source! Until now, Anthropic's Generative UI capabilities only existed inside its own products. CopilotKit🪁 just shipped Open Generative UI, an open-source implementation of Claude Artifacts that works in any app. The agent generates HTML/SVG at runtime, and CopilotKit streams it token-by-token into a sandboxed iframe inside the app's chat. So the user can watch the UI assemble itself in real time, not after the full response is ready. The sandbox is fully isolated with no access to the parent app, the DOM, or user data. So if the agent hallucinates broken markup or unexpected JavaScript, nothing leaks outside the iframe. Under the hood, the agent does not select from pre-built components. Instead, it generates arbitrary visuals from scratch every time. The output is unconstrained by default, but you can shape it by defining prompt-based skills that teach the agent specific visual formats or guidelines. For instance, a skill prompt can guide the agent toward producing a Chart.js dashboard with proper axis labels and responsive sizing, or an interactive 3D model with rotation controls. The video below shows this in action, and the output quality you see actually comes from the skills layer. Open Generative UI runs on AG-UI, so it works out of the box with LangGraph, CrewAI, Mastra, Google ADK, AWS Strands, and more. It also ships with a standalone MCP server that plugs into Claude Code, Cursor, or any MCP-compatible client. And the entire stack is built on top of CopilotKit, the open-source frontend framework for agents and generative UI. 30k+ GitHub stars, with SDKs for React, Next.js, Angular, and Vue. I have shared the GitHub repo and a live playground in the replies!

Akshay 🚀

85,740 views • 1 month ago

AGENT ID FOR CLAUDE AGENT issue an agent ID to your claude code agent in 2 min - so it can commit to github as a verified, human-authorized agent not just a random bot this is the first step towards building trust in the agentic internet, powered by Alien
3:40

AGENT ID FOR CLAUDE AGENT issue an agent ID to your claude code agent in 2 min - so it can commit to github as a verified, human-authorized agent not just a random bot this is the first step towards building trust in the agentic internet, powered by Alien

kirill avery

16,329 views • 2 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 👇
0:37

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,492 views • 1 month ago

Today, we're launching a new Laracasts series that will show you the essentials building an AI agent from scratch. We start with a basic chat response and gradually introduce new concepts, such as the agent loop, custom tools, and more. 😀 "So You Want To Build An Agent"
9:08

Today, we're launching a new Laracasts series that will show you the essentials building an AI agent from scratch. We start with a basic chat response and gradually introduce new concepts, such as the agent loop, custom tools, and more. 😀 "So You Want To Build An Agent"

Laracasts

16,303 views • 2 months ago

Stop leaving your Agent stateless. Give it Threads in one hook. Resumable conversations that capture everything: messages, generative UI, shared state, human-in-the-loop workflows. Built on AG-UI, so it works with any compatible agent framework. docs:
0:23

Stop leaving your Agent stateless. Give it Threads in one hook. Resumable conversations that capture everything: messages, generative UI, shared state, human-in-the-loop workflows. Built on AG-UI, so it works with any compatible agent framework. docs:

Atai Barkai

40,879 views • 1 month ago

Introducing Shadify: Generative UI built on ShadCN Simply describe a UI and watch your LangChain agent compose from shadcn on the fly, using AG-UI and CopilotKit🪁. Then export it as React code. Repo below. Try it out here:
0:36

Introducing Shadify: Generative UI built on ShadCN Simply describe a UI and watch your LangChain agent compose from shadcn on the fly, using AG-UI and CopilotKit🪁. Then export it as React code. Repo below. Try it out here:

Atai Barkai

137,922 views • 3 months ago

Build Agentic Workflows from Scratch 🤖🔁 It’s tempting for an AI engineer to use an off-the-shelf agent, but building your own agents shouldn’t be scary (and limited to AI research papers)! In our brand-new video tutorial we show you how to build an agent in two intuitive steps: 1️⃣ Define a single step of an agent execution: This is just a DAG that modifies state along the way. Chain together a prompt, LLM, tool calling, output parsing/processing. Conditionally decide whether to call a tool or return. 2️⃣ Plug this DAG into an agent worker: An agent worker will repeatedly call this DAG until completion! All agentic flows can be decomposed this way, making it simple to reason about. In our tutorial we show you how to build a ReAct agent from scratch. Check it out: Colab:
1:39

Build Agentic Workflows from Scratch 🤖🔁 It’s tempting for an AI engineer to use an off-the-shelf agent, but building your own agents shouldn’t be scary (and limited to AI research papers)! In our brand-new video tutorial we show you how to build an agent in two intuitive steps: 1️⃣ Define a single step of an agent execution: This is just a DAG that modifies state along the way. Chain together a prompt, LLM, tool calling, output parsing/processing. Conditionally decide whether to call a tool or return. 2️⃣ Plug this DAG into an agent worker: An agent worker will repeatedly call this DAG until completion! All agentic flows can be decomposed this way, making it simple to reason about. In our tutorial we show you how to build a ReAct agent from scratch. Check it out: Colab:

LlamaIndex 🦙

60,531 views • 2 years ago

A conversational agent with no hallucinations! This is huge! Here is the $1M problem: Build a customer-facing AI agent that works consistently, doesn't hallucinate, and is fully aligned with the business rules. Check out Parlant, a FREE, open-source library. I've talked about them before, and here is the TL;DR: 1. Parlant gives you 10x more control over what your agent says 2. It helps you control how agents conduct conversations 3. It helps you control the service protocols and rules agents follow 4. It helps you control what agents can and can't say They do something pretty clever: 1. They have a set of predefined potential responses that the agent can use to reply to the customer. 2. When a customer sends a message, the agent generates a fluid response draft using an LLM and matches and renders the closest pre-approved reply template. 3. The agent returns the rendered pre-approved reply, not the one generated by the LLM. This maintains fluidity while avoiding unpredictability. Parlant also uses your domain terminology, invokes your tools, and implements self-critique to craft/evaluate its response iteratively. This pretty much solves any hallucination issues with your agent.
0:45

A conversational agent with no hallucinations! This is huge! Here is the $1M problem: Build a customer-facing AI agent that works consistently, doesn't hallucinate, and is fully aligned with the business rules. Check out Parlant, a FREE, open-source library. I've talked about them before, and here is the TL;DR: 1. Parlant gives you 10x more control over what your agent says 2. It helps you control how agents conduct conversations 3. It helps you control the service protocols and rules agents follow 4. It helps you control what agents can and can't say They do something pretty clever: 1. They have a set of predefined potential responses that the agent can use to reply to the customer. 2. When a customer sends a message, the agent generates a fluid response draft using an LLM and matches and renders the closest pre-approved reply template. 3. The agent returns the rendered pre-approved reply, not the one generated by the LLM. This maintains fluidity while avoiding unpredictability. Parlant also uses your domain terminology, invokes your tools, and implements self-critique to craft/evaluate its response iteratively. This pretty much solves any hallucination issues with your agent.

Santiago

64,237 views • 1 year ago

"You can't VibeCode Complex Apps" they said. That is until "VAAPs" became a thing. You can vibecode your frontend like mzulali did here, and then plug in an n8n agent as the backend. All you have to do is use a webhook to connect them. Ask the vibecode to send data to your n8n webhook url and then await its response. Make sure that the trigger of your agent workflow is a webhook. His workflow was an agent that has access to fal workflows... Each tool is like a different creative "skill" that the AI agent can call when necessary. This will get much easier to create when VibeCode releases their official n8n integration.
0:48

"You can't VibeCode Complex Apps" they said. That is until "VAAPs" became a thing. You can vibecode your frontend like mzulali did here, and then plug in an n8n agent as the backend. All you have to do is use a webhook to connect them. Ask the vibecode to send data to your n8n webhook url and then await its response. Make sure that the trigger of your agent workflow is a webhook. His workflow was an agent that has access to fal workflows... Each tool is like a different creative "skill" that the AI agent can call when necessary. This will get much easier to create when VibeCode releases their official n8n integration.

Learn to VibeCode

18,981 views • 1 year ago

Introducing the Developer’s Guide to AI Agent Protocols. Stop writing custom integration glue for every tool, API, and frontend. We used Google Agent Development Kit to build a B2B agent that handles the full stack using 6 open standards: MCP, A2A, UCP, AP2, A2UI, and AG-UI The future of agents is interoperable. Read the full technical guide here:
0:35

Introducing the Developer’s Guide to AI Agent Protocols. Stop writing custom integration glue for every tool, API, and frontend. We used Google Agent Development Kit to build a B2B agent that handles the full stack using 6 open standards: MCP, A2A, UCP, AP2, A2UI, and AG-UI The future of agents is interoperable. Read the full technical guide here:

Google for Developers

116,504 views • 3 months ago