[RFC] useAgUIChat 智能体对话

[Div627]

Summary

将 AG-UI 协议功能与 Ant Design X 的 useXChat 集成在一起，提供一种标准化的方法，以最少的代码构建 Agent 驱动的聊天界面。

Motivation

1. 解决 Agent 生态碎片化问题

• 协议不一致​：不同 AI 框架(LangChain、CrewAI、OpenAI SDK 等)使用自定义通信协议
• ​前端集成复杂​：每个框架需要独特的前端适配层，导致开发效率低下

2. 提升用户体验

• 实时代理聊天，支持流式传输
• 双向状态同步
• 生成式 UI 和结构化消息

https://github.com/ag-ui-protocol/ag-ui/tree/main

Detailed Design

API 设计

type UseAgUIChatOptions = {
  agentUrl: string;
  transport?: 'sse' | 'ws' | 'http';
  sessionId?: string;
  tools?: Record<string, ToolFunction>;
  eventMap?: Partial<EventMap>;
  onError?: (error: AGUIError) => void;
};

type UseAgUIChatResult = {
  messages: Message[];
  inputProps: InputProps;
  agentState: 'idle' | 'typing' | 'tool-calling';
  connection: 'connecting' | 'connected' | 'disconnected';
  sendMessage: (text: string) => void;
  injectEvent: (event: AGUIEvent) => void;
  eventHistory: AGUIEvent[];
};

Example Usage

基础使用

const Chat = () => {
  const { messages, inputProps, sendMessage } = useAgUIChat({
    agentUrl: '/api/agent',
    tools: {
      get_weather: async (location) => {
        return fetch(`/weather?loc=${location}`);
      }
    }
  });

  return (
    <div className="chat-container">
      <MessageList messages={messages} />
      <Input {...inputProps} onSend={sendMessage} />
    </div>
  );
};