@cloudbase/agent-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 "@cloudbase/agent-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"
/>