React SDK

@kapaai/agent-react provides a complete chat UI with streaming, tool execution, and theming. It includes @kapaai/agent-core as a dependency, so you only need to install one package.

Installation

npm

npm install @kapaai/agent-react

yarn

yarn add @kapaai/agent-react

pnpm

pnpm add @kapaai/agent-react

Components

Component	Description
AgentProvider	Wraps your app with chat state and theming. Required.
AgentChat	Full chat UI: header, messages, input, footer. Fills its parent container.
AgentPanel	Slide-in drawer wrapping AgentChat.
AgentFooter	Attribution footer with optional custom content via branding.footerExtra.

Hooks

Hook	Description
useAgentChat()	Access chat state and actions (messages, sendMessage, approveToolCall, etc.). Required for headless mode.
useAgentColorScheme()	Toggle or set the color scheme. See Theming.

Utilities

Export	Description
createToolHelper<TContext>()	Type-safe tool definition factory with Zod inference for execute and render args. See Custom tools.

Headless mode

You can use AgentProvider + useAgentChat() without any SDK UI components to build a fully custom chat interface. See Headless mode for the pattern and the full useAgentChat() reference.

Lower-level components

These components are also exported for advanced customization. They require AgentProvider for theming context:

Component	Description
AgentInput	Textarea with send/stop button.
AgentMessageBubble	Renders a single message (user bubble, assistant markdown, or error alert).
ToolCallCard	Expandable tool call card with args/response/sources tabs.
ToolCallGroup	Container for grouping tool cards.
SourceTiles	Source attribution tiles with favicons.
ExamplePrompts	Starter prompt buttons for empty conversations.
ShimmerText	Animated shimmer text for loading states.
AgentThreadHistory	Conversation history list. Used automatically by AgentChat. Render directly only for custom layouts.