Skip to content
Get packs

Guide · Open source

How to use ag-ui: install, connect an agent and build a UI

Updated · written with AI from the project's own documentation and checked against our catalogue data

AG-UI is an open, lightweight, event-based protocol from the ag-ui-protocol project that defines how AI agent backends send events to a user interface and accept simple inputs in return. This guide is for developers who want to bring an agent into a web or in-app frontend. By the end you will know how to create a starter application, what the protocol covers and which agent frameworks it supports.

AG-UIag-ui-protocol/ag-ui · ★ 17k · MIT

Quick start

  1. 1Create the app. Run npx create-ag-ui-app with your project name to generate a new AG-UI application.
  2. 2Pick your agent framework. Check the README tables and choose a supported framework such as LangChain, CrewAI or Google ADK.
  3. 3Read the quickstart. Follow the application quickstart at docs.ag-ui.com to connect your agent backend.
  4. 4Emit standard events. Make your agent backend send events that match AG-UI's standard event types over your chosen transport.
  5. 5Try a feature demo. Open the Dojo demos to see shared state or tool-based generative UI before building your own.

Create a new AG-UI application

The quickest way to start is the command listed in the project README, which creates a new AG-UI application in a folder of your choice. The README gives the example below, where my-agent-app is the folder name you choose.

  • Run the command from a terminal in the directory where you want the project.
  • Replace my-agent-app with your own project name.
npx create-ag-ui-app my-agent-app

Understand how the protocol works

During an agent run, the agent backend emits events that are compatible with one of AG-UI's roughly 16 standard event types. The backend also accepts one of a few simple AG-UI compatible inputs as arguments. The UI listens to these events and updates itself.

The README says AG-UI works over any event transport, such as SSE, WebSockets or webhooks. It includes a flexible middleware layer and allows loose event format matching, so different agents and apps can interoperate. A reference HTTP implementation and a default connector are included to help you get started.

Pick a supported agent framework

The README lists supported integrations, including LangChain, CrewAI, Microsoft Agent Framework, Google ADK, Mastra, Pydantic AI, Agno, LlamaIndex and AG2, among others. Each row links to documentation and demos. AWS Bedrock Agents and the OpenAI Agent SDK are marked as in progress.

  • Check the Frameworks, Partnerships, 1st Party and Community tables in the README for your framework's status.
  • Follow the linked docs for the framework-specific connection.

Use the features the protocol covers

The README lists the main features: real-time agentic chat with streaming, bi-directional state synchronization, generative UI and structured messages, real-time context enrichment, frontend tool integration, and human-in-the-loop collaboration.

The Dojo at dojo.ag-ui.com has feature demos such as shared_state and tool_based_generative_ui for several frameworks, which is a practical place to see these features working.

  • Streaming chat: agent output arrives as events the UI can render as it comes in.
  • Shared state: agent and interface keep state in sync in both directions.
  • Human-in-the-loop: a person can take part in the agent's workflow.

Read the docs before going further

The README links to the AG-UI documentation at docs.ag-ui.com, a quickstart for building applications, a guide for building new framework integrations, and the specification. The Discord community is linked from the README for questions.

  • Quickstart for applications: docs.ag-ui.com/quickstart/applications
  • Specification introduction: go.copilotkit.ai/ag-ui-introduction

What people use it for

  • A chat interface in a web app that streams an agent's replies as they are produced.
  • A frontend where the agent and the user both read and update the same state.
  • A workflow where a person reviews or approves an agent's step before it continues.
  • Adding an agent built with LangChain or CrewAI to an existing frontend with a standard connection.

Frequently asked questions

Is ag-ui free to use?

The project is licensed under the MIT licence, as listed in the README. Check the repository's licence file for the full terms before you use it in a product.

What do I need to install ag-ui?

The source does not list specific prerequisites. The README's install command is npx create-ag-ui-app my-agent-app, which uses the npx tool from Node.js. Check the quickstart docs for the requirements of the setup it generates.

Is ag-ui a ready-made chat product?

No. The README describes a protocol and developer tooling, so you write code to connect an agent backend to a user interface. If you only want a finished chat product without coding, this is not the right tool.

Does ag-ui give agents access to tools?

The README positions MCP for giving agents tools. It describes AG-UI as the layer that brings agents into user-facing applications, alongside MCP and A2A.

How does ag-ui compare to CopilotKit, Vercel AI SDK and assistant-ui?

The README names CopilotKit as the project that created AG-UI and that AG-UI came from its partnership with LangChain and CrewAI. Vercel AI SDK and assistant-ui are listed as comparable projects. This guide does not benchmark them, so compare their docs against your needs.

Which transports does ag-ui support?

The README says it works with any event transport, including SSE, WebSockets and webhooks. It also includes a reference HTTP implementation and a default connector.

New agent skills, repos and AI tools — every week

The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.

Our verdict

Choose ag-ui if you are a developer adding an AI agent to a web or in-app interface and want a standard frontend connection to a supported framework. If you want a finished chat product with no code, or you need tool access for agents, look at other options and at MCP as described in the README.

Install options & downloads