AG-UI 协议

AG-Kit 对 Agent-用户交互协议的支持

AG-Kit 原生支持 AG-UI（Agent-User Interaction）协议，可实现 Agent 与面向用户的应用程序在多种前端框架间的无缝集成。

​

AG-Kit 对 AG-UI 的支持

​

服务端实现

AG-Kit 服务端提供内置的 AG-UI 协议支持：

TypeScript

import { run } from '@ag-kit/server';
import { Agent } from '@ag-kit/agents';
import { OpenAIProvider } from '@ag-kit/providers/openai';

const provider = new OpenAIProvider({
  apiKey: process.env.OPENAI_API_KEY,
  defaultModel: 'gpt-4'
});

const agent = new Agent({
  name: 'chat-agent',
  model: provider,
  instructions: 'You are a helpful assistant.'
});

run({
  createAgent: () => ({ agent }),
  port: 3000
});

​

客户端集成

使用 AG-UI 协议连接前端应用程序：

TypeScript

import { useChat } from '@ag-kit/ui-react';

function ChatComponent() {
  const { messages, sendMessage } = useChat({
    url: 'http://localhost:3000/send-message'
  });

  return (
    <div>
      {messages.map((message, index) => (
        <div key={index}>{message.content}</div>
      ))}
      <button onClick={() => sendMessage('Hello, Agent!')}>
        发送消息
      </button>
    </div>
  );
}

​

框架集成

​

React 集成

import { useChat } from '@ag-kit/ui-react';

function ChatComponent() {
  const { messages, sendMessage } = useChat({
    url: 'http://localhost:3000/send-message'
  });

  return (
    <div>
      {messages.map((message, index) => (
        <div key={index}>{message.content}</div>
      ))}
      <input onKeyPress={(e) => e.key === 'Enter' && sendMessage(e.target.value)} />
    </div>
  );
}

​

小程序集成

// 微信小程序集成（规划中）
// 注意：@ag-kit/ui-miniprogram 目前正在开发中

// 在您的小程序页面中
Page({
  data: {
    messages: []
  },
  
  onLoad() {
    // 直接通过 HTTP 与 AG-Kit 服务端集成
    this.setData({
      apiEndpoint: 'https://your-agent-server.com/send-message'
    });
  }
});

​

协议特性

• 基于事件的消息传递：实时双向通信
• 状态同步：Agent 与 UI 间的自动状态管理
• 操作调用：从 Agent 直接执行 UI 操作
• 框架无关：兼容 React、小程序等框架

​

核心能力

• 实时通信：双向流式传输
• 自定义消息类型：为特定用例定义自定义消息类型
• 中间件支持：添加请求/响应处理中间件
• 错误处理：全面的错误处理与恢复机制

​

后续步骤

AG-UI 示例

查看 AG-UI 实现示例

AG-UI 规范

阅读官方 AG-UI 协议规范