@21st-sdk/react weekly downloads statistics

@21st-sdk/react

React components for building AI agent chat UIs powered by 21st Agents. Drop-in chat interface with tool renderers, theming, and full customization.

Built on Vercel AI SDK v5 — no custom hooks or state management. Just components.

Install

Quick Start

That's it. You get a full chat UI with message rendering, tool visualization, auto-scroll, and streaming — all wired to your deployed agent.

Customization

Four levels of customization, from simple to full control:

1. Theme tokens

Apply a theme JSON from the Playground:

1. Class overrides

Override styles per element:

1. Slot components

Swap sub-components entirely:

1. Individual components

Build from scratch with individual imports:

CSS

Import the stylesheet once in your app:

No Tailwind peer dependency required — CSS is pre-compiled. All elements have stable an-* class names for custom styling:

API Reference

createAgentChat(options)

Creates an AI SDK Chat instance pointed at the relay API.

Returns a standard Chat — pass it to useChat({ chat }).

Drop-in chat component.

| Prop | Type | Description |

| messages | UIMessage[] | From useChat() | | onSend | (msg) => void | Send handler | | status | ChatStatus | "ready" | "submitted" | "streaming" | "error" | | onStop | () => void | Stop generation | | error | Error | Error to display | | theme | ChatTheme | Theme from playground | | colorMode | "light" | "dark" | "auto" | Color mode | | classNames | Partial | Per-element CSS overrides | | slots | Partial | Component swapping | | className | string | Root element class | | style | CSSProperties | Root element style | | modelSelector | { models, activeModelId?, onModelChange? } | Model picker (for custom backends) | | attachments | { onAttach?, images?, files? } | File attachment support |

applyTheme(element, theme, colorMode?)

Manually inject CSS variables from a playground theme JSON.

Components

| Component | Description |

| MessageList | Auto-scrolling message container with grouping | | UserMessage | User message bubble | | AssistantMessage | Assistant response with parts routing | | StreamingMarkdown | Markdown renderer with syntax highlighting | | InputBar | Text input with send/stop buttons | | MessageActions | Copy button | | ToolRenderer | Routes tool parts to the correct component |

Tool Components

| Component | Renders |

| BashTool | Terminal commands with output | | EditTool | File edits with diff display | | WriteTool | File creation | | SearchTool | Web search results | | TodoTool | Task checklists | | PlanTool | Step-by-step plans | | TaskTool | Sub-agent tasks | | McpTool | MCP protocol calls | | ThinkingTool | Reasoning/thinking indicator | | GenericTool | Fallback for unknown tools |

Theme Type

Model Selection

The SDK exports pre-defined model constants for convenience:

Note: When using createAgentChat() with the relay, the model is set server-side in the agent config. The modelSelector prop is for building UIs with custom backends.

License

MIT