AG-UI：智能体与用户交互协议

AG-UI 是一种开放、轻量级、基于事件的协议，用于标准化 AI 智能体如何连接到面向用户的应用程序。它以简单性和灵活性为核心设计，能够实现 AI 智能体、实时用户上下文和用户界面之间的无缝集成。

---

加入我们的 Discord →     阅读文档 →     前往 AG-UI 练习场 →     关注我们 →

🚀 快速入门

几秒钟即可创建一个新的 AG-UI 应用程序：

npx create-ag-ui-app my-agent-app

有用链接：

• AG-UI 练习场
• 构建 AG-UI 驱动的应用程序（快速入门）
• 构建新的 AG-UI 框架集成（快速入门）
• 预约通话，讨论与新框架的 AG-UI 集成
• 加入 Discord 社区

什么是 AG-UI？

AG-UI 是一种开放、轻量级、基于事件的智能体与人类交互协议，旨在提供简单性和灵活性：

• 在智能体执行过程中，智能体后端会发出与 AG-UI 的约 16 种标准事件类型之一兼容的事件。
• 智能体后端可以接受少数几种简单的 AG-UI 兼容输入作为参数。

AG-UI 包含一个灵活的中间件层，可确保在不同环境中保持兼容性：

• 适用于任何事件传输方式（SSE、WebSockets、Webhook 等）。
• 允许进行宽松的事件格式匹配，从而实现广泛的智能体和应用互操作性。

此外，它还附带一个参考 HTTP 实现和默认连接器，帮助团队快速上手。

了解更多规范 →

为什么选择 AG-UI？

AG-UI 是根据实际需求以及在构建应用内智能体交互方面的实践经验开发的。

AG-UI 在智能体协议栈中处于什么位置？

AG-UI 与其他两项顶级智能体协议相辅相成：

• MCP 为智能体提供工具；
• A2A 允许智能体之间相互通信；
• AG-UI 则将智能体引入面向用户的应用程序中。

🚀 核心功能

• 💬 实时智能体聊天，支持流式传输
• 🔄 双向状态同步
• 🧩 生成式 UI 和结构化消息
• 🧠 实时上下文增强
• 🛠️ 前端工具集成
• 🧑‍💻 人机协作

🛠 支持的集成

AG-UI 源自 CopilotKit 与 LangGraph 和 CrewAI 的首次合作，并将这一广受欢迎的智能体与用户交互基础设施带入更广泛的智能体生态系统。

第一方是指已内置 AG‑UI 并提供相关文档指导的平台。

框架

框架	状态	AG-UI 资源
内置智能体	✅ 支持	➡️ 文档

🤝 合作伙伴

框架	状态	AG-UI 资源
LangGraph	✅ 支持	➡️ 文档 🎮 演示
CrewAI	✅ 支持	➡️ 文档 🎮 演示

🧩 第一方

框架	状态	AG-UI 资源
Microsoft Agent Framework	✅ 支持	➡️ 文档 🎮 演示
Google ADK	✅ 支持	➡️ 文档 🎮 演示
AWS Strands Agents	✅ 支持	➡️ 文档 🎮 演示
AWS Bedrock AgentCore	✅ 支持	➡️ 文档
Mastra	✅ 支持	➡️ 文档 🎮 演示
Pydantic AI	✅ 支持	➡️ 文档 🎮 演示
Agno	✅ 支持	➡️ 文档 🎮 演示
LlamaIndex	✅ 支持	➡️ 文档 🎮 演示
AG2	✅ 支持	➡️ 文档 🎮 演示
AWS Bedrock Agents	🛠️ 进行中	–

🌐 社区

框架	状态	AG-UI 资源
Langroid	✅ 已支持	🎮 演示
OpenAI Agent SDK	🛠️ 进行中	–
Cloudflare Agents	🛠️ 进行中	–

代理交互协议

协议	状态	AG-UI 资源	集成
A2A	✅ 已支持	➡️ 文档	合作伙伴

基础设施 / 部署

平台	状态	AG-UI 资源	集成
Amazon Bedrock AgentCore	✅ 已支持	➡️ 文档	第一方

规范（标准）

框架	状态	AG-UI 资源
Oracle Agent Spec	✅ 已支持	➡️ 文档 🎮 演示

生成式 UI

框架	状态	AG-UI 资源
MCP Apps	✅ 已支持	➡️ 文档 🎮 演示

SDKs

SDK	状态	AG-UI 资源	集成
Kotlin	✅ 已支持	➡️ 入门指南	社区
Golang	✅ 已支持	➡️ 入门指南	社区
Dart	✅ 已支持	➡️ 入门指南	社区
Java	✅ 已支持	➡️ 入门指南	社区
Rust	✅ 已支持	➡️ 入门指南	社区
Ruby	✅ 已支持	➡️ 入门指南	社区
.NET	🛠️ 进行中	➡️ PR	社区
Nim	🛠️ 进行中	➡️ PR	社区
Flowise	🛠️ 进行中	➡️ GitHub 源	社区
Langflow	🛠️ 进行中	➡️ GitHub 源	社区
C++	🛠️ 进行中	➡️ GitHub 源	社区

客户端

客户端	状态	AG-UI 资源	集成
CopilotKit	✅ 已支持	➡️ 入门指南	第一方
终端 + 代理	✅ 已支持	➡️ 入门指南	社区
React Native	🛠️ 招募帮助	➡️ GitHub 源	社区

查看所有支持的集成 →

示例

Hello World 应用

视频：

https://github.com/user-attachments/assets/18c03330-1ebc-4863-b2b8-cc6c3a4c7bae

https://agui-demo.vercel.app/

AG-UI Dojo（构建模块查看器）

AG-UI Dojo 通过简单而专注的示例展示了 AG-UI 的核心构建模块——每个示例仅包含 50 到 200 行代码。

在此处查看 Dojo 及所有框架集成的源代码：https://github.com/ag-ui-protocol/ag-ui/tree/main/apps/dojo。

https://github.com/user-attachments/assets/c298eea8-3f39-4a94-b968-7712429b0c49

🙋🏽‍♂️ 贡献 AG-UI

请参阅 贡献指南

• 双周 AG-UI 工作组 📅 请关注 CopilotKit Luma 活动日历

路线图

请查看 AG-UI 路线图 以了解当前正在开发的内容以及您可以参与的地方。

📄 许可证

AG-UI 是开源软件，采用 MIT 许可证。

AG-UI 快速上手指南

AG-UI 是一个开放、轻量级且基于事件的协议，旨在标准化 AI 智能体（Agent）与用户界面（UI）之间的连接。它支持实时流式聊天、双向状态同步、生成式 UI 以及人机协作等功能，并兼容 LangGraph、CrewAI、Microsoft Agent Framework 等多种主流框架。

环境准备

在开始之前，请确保您的开发环境满足以下要求：

• 操作系统：Windows, macOS 或 Linux
• Node.js：建议安装 LTS 版本 (v18 或更高)
• 包管理器：npm, yarn 或 pnpm
• 前置知识：了解基本的 JavaScript/TypeScript 或您所选用的后端框架（如 Python/LangGraph 等）

注意：目前官方未提供特定的中国镜像源配置，建议使用国内通用的 npm 镜像（如淘宝镜像）加速依赖安装：

npm config set registry https://registry.npmmirror.com

安装步骤

AG-UI 提供了命令行工具，可帮助您在一分钟内初始化项目。

1. 创建新项目 在终端中运行以下命令，将 my-agent-app 替换为您想要的项目名称：

   npx create-ag-ui-app my-agent-app
   

2. 进入项目目录

   cd my-agent-app
   

3. 安装依赖并启动 根据提示选择您需要的模板（通常包含前端和后端示例），然后运行：

   npm install
   npm run dev
   

基本使用

AG-UI 的核心在于通过标准事件类型连接后端智能体与前端应用。以下是一个最简化的概念流程示例。

1. 后端：发射事件 (Emit Events)

在后端（例如使用 LangGraph 或原生 Node.js），智能体在执行过程中发射符合 AG-UI 标准的事件。

// 伪代码示例：后端发射一个文本消息事件
context.emitEvent({
  type: "text-message-start",
  payload: {
    messageId: "msg_123",
    role: "assistant",
    content: "正在为您查询..."
  }
});

// 发射流式内容
context.emitEvent({
  type: "text-message-delta",
  payload: {
    messageId: "msg_123",
    delta: "今天天气不错，适合外出。"
  }
});

2. 前端：接收并渲染 (Connect & Render)

在前端应用中，使用 AG-UI 客户端连接到后端服务，自动处理流式更新和状态同步。

// React 组件示例
import { useCopilotChat } from "@copilotkit/react-core"; // 或使用 ag-ui 通用客户端

export function ChatInterface() {
  const { messages, appendMessage } = useCopilotChat();

  return (
    <div className="chat-container">
      {messages.map((msg) => (
        <div key={msg.id} className={`message ${msg.role}`}>
          {msg.content}
        </div>
      ))}
    </div>
  );
}

3. 运行效果

启动应用后，您将看到：

• 实时流式响应：AI 的回答逐字显示，无需等待完整生成。
• 状态同步：前端自动反映后端的思考过程或工具调用状态。
• 扩展性：可根据需要集成生成式 UI 组件或人工介入环节。

更多详细的功能演示和框架集成代码，请访问 AG-UI Dojo 查看针对特定框架（如 LangGraph, CrewAI, Mastra 等）的完整示例。