Getting Started

Install the package and import the styles.

Install
npm install 21st-sdk-react
Import styles

Import order matters. Load the Agent UI styles before @import "tailwindcss" so tokens are registered first.

/* app.css or main.css */
@source "../node_modules/21st-sdk-react/dist/**/*.{js,jsx,ts,tsx}";
@import "21st-sdk-react/styles/tailwind";
@import "tailwindcss";

The @source path is relative to your CSS file. Adjust it if your styles live in a nested directory.

Usage examples
Basic chat view
import { AgentChat } from "21st-sdk-react";
import type { UIMessage } from "ai";
import "./app.css";

const messages: UIMessage[] = [
  {
    id: "msg-1",
    role: "assistant",
    parts: [{ type: "text", text: "Welcome to Agent UI." }],
  },
];

export default function App() {
  return (
    <div className="h-[600px] border border-border rounded-lg overflow-hidden bg-background">
      <AgentChat
        messages={messages}
        status="ready"
        onSend={() => {}}
        onStop={() => {}}
      />
    </div>
  );
}
Input bar only
import { InputBar } from "21st-sdk-react";
import "./app.css";

export default function Composer() {
  return (
    <div className="max-w-xl mx-auto">
      <InputBar
        status="ready"
        onSend={({ content }) => console.log(content)}
        onStop={() => {}}
      />
    </div>
  );
}