Installation

• Node 18+
• React 19+
• Tailwind CSS v4 (@import "tailwindcss" in your global stylesheet)
• A shadcn-initialised project (see below)

If your project does not yet have a components.json, run:

npx shadcn@latest init

npx shadcn@latest init

This scaffolds components.json, configures the @/* path alias, and adds a cn helper. Agent Elements uses all of them. See shadcn's installation docs for framework-specific steps.

Every Agent Elements component is its own registry item. Installing one pulls in every piece it needs via registryDependencies. For example, adding agent-chat also installs MessageList, InputBar, tool renderers, and shared utils:

$pnpm dlx shadcn@latest add https://agent-elements.21st.dev/r/agent-chat.json

Prefer a smaller footprint? Install only what you need, for example input-bar, markdown, or a single tool card like bash-tool. The full list lives in the sidebar.

After install, import directly from your components alias:

"use client";

import { AgentChat } from "@/components/agent-elements/agent-chat";
import type { UIMessage } from "ai";

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

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>
  );
}

"use client";

import { AgentChat } from "@/components/agent-elements/agent-chat";
import type { UIMessage } from "ai";

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

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>
  );
}

Wiring it to a real backend? Pair it with the Vercel AI SDK and pass streamed UIMessage[] into AgentChat. Need a full agent (Claude Code or Codex, sandbox, threads, tool approvals) with this UI preconfigured? Use the 21st.dev Agent SDK.