构建 Copilot 聊天界面

创建智能聊天界面

使用 React 的 useChat 钩子，构建一个由您的 Agent 服务驱动的简洁无头聊天界面。

​

前提条件

• 运行中的 Agent 服务，需暴露 send-message 端点（SSE）
• 已安装 @ag-kit/ui-react 的 React 应用

​

快速开始（React）

typescript

import React, { useState } from "react";
import { useChat } from "@ag-kit/ui-react";

export default function Chat() {
  const { uiMessages, sendMessage, streaming } = useChat({
    // Defaults to "/send-message"; update if your endpoint differs
    url: "/send-message",
  });

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

  return (
    <div>
      <div>
        {uiMessages
          .filter((m) => m.role === "user" || m.role === "assistant")
          .map((m, mi) => (
            <div key={mi}>
              {m.parts.map((p, pi) =>
                p.type === "text" ? (
                  <p key={pi}>
                    {m.role}: {p.text}
                  </p>
                ) : null
              )}
            </div>
          ))}
        {streaming && <p>Assistant is typing…</p>}
      </div>

      <form
        onSubmit={(e) => {
          e.preventDefault();
          if (!input.trim()) return;
          sendMessage(input);
          setInput("");
        }}
      >
        <input
          value={input}
          onChange={(e) => setInput(e.target.value)}
          placeholder="Type a message"
          disabled={streaming}
        />
        <button disabled={streaming || !input.trim()}>Send</button>
      </form>
    </div>
  );
}

​

功能说明

• 从 uiMessages 渲染用户和助手的文本消息
• 流式交互体验：通过 streaming 禁用输入并显示简单的”正在输入”提示
• 无头模式：您可完全控制布局和样式

​

后续步骤

• 前端操作（客户端操作）：参见前端操作
• 人工介入流程（审批与输入）：参见人工介入
• 生成式 UI（Agent 渲染的 UI 模块）：参见生成式 UI