AG-UI React UI 接入

@cloudbase/agent-react-ui 提供可直接接入 React 项目的聊天界面组件，可用于快速对接符合 AG-UI 协议的 AI Agent。当前组件仅作参考，推荐使用 @cloudbase/agent-react-core 自定义 UI。

安装

npm install @cloudbase/agent-react-core @cloudbase/agent-react-ui @cloudbase/js-sdk

快速开始

导入样式：

import "@cloudbase/agent-react-ui/styles.css";

引用：

import cloudbase from "@cloudbase/js-sdk";
import { AgKit, CloudBaseTransport } from "@ag-kit/react-core";
import { AgKitUI } from "@cloudbase/agent-react-ui";

const app = cloudbase.init({ env: "your-env-id" });

app.auth.signInAnonymously();

const transport = new CloudBaseTransport({
  app,
  agentId: "your-agent-id",
});

export function App() {
  return (
    <AgKit transport={transport}>
      {/* AgKitUI 默认继承父元素宽高 */}
      <div style={{ height: "600px", width: "800px" }}>
        <AgKitUI />
      </div>
    </AgKit>
  );
}

---

API 参考

AgKitUI

核心聊天界面组件，内置了完整的消息渲染、工具调用展示、输入框和国际化支持。

AgKitUIProps

选项	必填	类型	说明
className	否	string	聊天主体布局类名
containerClassName	否	string	最外层根容器类名
messagesClassName	否	string	消息列表区域类名
inputClassName	否	string	输入框包裹层类名
emptyTitleClassName	否	string	空状态标题类名
inputPlaceholder	否	string	输入框占位文本，未提供时使用 locale 默认值
suggestions	否	string[]	聊天为空时显示的建议问题列表
locale	否	zh-CN/en	内置 UI 文案语言，默认 "zh-CN"
onSuggestionClick	否	(suggestion: string) => void	点击建议问题时触发的回调

示例：基础用法

<AgKitUI />

示例：自定义建议与语言

<AgKitUI
  locale="zh-CN"
  inputPlaceholder="输入你的问题"
  suggestions={[
    "帮我总结今天的工作",
    "生成一份周报模板",
    "解释这个接口的用途",
  ]}
  onSuggestionClick={(value) => {
    console.log("clicked suggestion:", value);
  }}
/>

示例：自定义样式

<AgKitUI
  containerClassName="my-chat-container"
  messagesClassName="my-messages"
  inputClassName="my-input"
  emptyTitleClassName="my-empty-title"
/>