跳转到主要内容

​
React集成

AG-Kit提供了一个React钩子来构建无头UI。您可以渲染自己的组件并将其连接到Agent服务。

​
基础用法

useChat钩子提供了将React应用连接到AG-Kit Agent服务所需的一切功能。
typescript
import React, { useState } from "react";
import { useChat } from "@ag-kit/ui-react";

export default function App() {
  const { uiMessages, sendMessage, streaming } = useChat({
    url: "/send-message", // your agent server endpoint (SSE)
  });

  const [input, setInput] = useState("");

  return (
    <div>
      <div>
        {uiMessages
          .filter((m) => ["user", "assistant"].includes(m.role))
          .map((m, mi) => (
            <div key={mi}>
              {m.parts.map((p, pi) =>
                p.type === "text" ? (
                  <p key={pi}>
                    {m.role}: {p.text}
                  </p>
                ) : null
              )}
            </div>
          ))}
      </div>

      <input value={input} onChange={(e) => setInput(e.target.value)} />
      <button onClick={() => sendMessage(input)} disabled={streaming}>
        发送
      </button>
    </div>
  );
}

​
安装

npm install @ag-kit/ui-react

​
功能特性

  • 流式支持: 来自Agent的实时消息流
  • 消息管理: 自动消息历史记录和状态管理
  • 类型安全: 完整的TypeScript支持
  • 无头设计: 构建您自己的UI组件
有关聊天UI组件、生成式UI和Human-in-the-loop工作流等更高级功能，请参阅构建Agent应用。