AG-UI React UI Integration

@cloudbase/agent-react-ui provides chat interface components that can be directly integrated into React projects, enabling quick integration with AI Agents that conform to the AG-UI protocol. The current component is for reference only; it is recommended to use @cloudbase/agent-react-core for custom UI.

Installation

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

Quick Start

Import styles:

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

Usage:

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 inherits parent element width and height by default */}
      <div style={{ height: "600px", width: "800px" }}>
        <AgKitUI />
      </div>
    </AgKit>
  );
}

---

API Reference

AgKitUI

Core chat interface component with built-in support for message rendering, tool call display, input box, and internationalization.

AgKitUIProps

Option	Required	Type	Description
className	No	string	Class name for the chat main layout
containerClassName	No	string	Class name for the outermost root container
messagesClassName	No	string	Class name for the message list area
inputClassName	No	string	Class name for the input box wrapper
emptyTitleClassName	No	string	Class name for the empty state title
inputPlaceholder	No	string	Input box placeholder text; uses locale default when not provided
suggestions	No	string[]	List of suggested questions displayed when chat is empty
locale	No	zh-CN/en	Language for built-in UI text, defaults to "zh-CN"
onSuggestionClick	No	(suggestion: string) => void	Callback triggered when a suggested question is clicked

Example: Basic Usage

<AgKitUI />

Example: Custom Suggestions and Language

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

Example: Custom Styles

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