ContextQMD
Back to Copilotkit

AG-UI

showcase/shell-docs/src/content/docs/agentic-protocols/ag-ui.mdx

1.57.02.1 KB
Original Source

What is the AG-UI Protocol?

AG-UI is a lightweight, event-based protocol that standardizes how AI agents connect to user-facing applications. Built for simplicity and flexibility, it enables seamless integration between AI agents, real time user context, and user interfaces. AG-UI is an open standard, developed by the CopilotKit team and several agent framework partners.

<Image src="/images/agui-ecosystem-light.png" alt="AG-UI Ecosystem Diagram" width={4096} height={2304} className="block dark:hidden" /> <Image src="/images/agui-ecosystem-dark.png" alt="AG-UI Ecosystem Diagram" width={4096} height={2304} className="hidden dark:block" />

How CopilotKit uses AG-UI

CopilotKit uses AG-UI to abstract the connection between your applications and the AI Agents that power your copilots. Your agents can be built using any AG-UI supporting Agent Framework (a growing list, including LangGraph, Mastra, Pydantic AI and others). This abstraction has several advantages over bespoke framework integrations.

  • Flexibility and Interoperability: By adhering to the AG-UI standard, CopilotKit components become interchangeable, allowing developers to use them with any AG-UI-compatible agent or to switch between different backend models without changing the UI.
  • Unified Communication: CopilotKit uses the AG-UI protocol to manage all the back-and-forth communication between the frontend and the AI agent, replacing custom WebSocket formats and text parsing.
  • Frontend Tool Calls: When an agent needs to use a tool that's integrated into the frontend application, AG-UI events facilitate this interaction.
  • UI Components: CopilotKit provides React components that are built for the AG-UI protocol. These components use AG-UI events to receive and display streaming AI responses and other data from the agent, creating a rich user experience.
  • State Management: The AG-UI protocol includes events for managing shared state between the frontend and the agent. CopilotKit can then use these events to keep the application's UI and the agent's state synchronized in real-time.

To learn more, check out the AG-UI website.