Introduction

Agent Elements is an open-source collection of chat and agent UI components (messages, tool cards, streaming states, and input controls), built on top of shadcn/ui. Copy them into your project with one command and own the source.

The goal is not to be a framework. It gives you the pieces a production agent UI needs (streaming markdown, diffed edits, plan approvals, tool invocations, clarifying questions) so you can focus on the model side. The API is typed around UIMessage and ChatStatus from the Vercel AI SDK, so useChat plugs in directly.

Quick start

Head to Installation for prerequisites, shadcn init, and your first component. In short:

npx shadcn@latest add https://agent-elements.21st.dev/r/agent-chat.json
Composition recipes
Chat with tool renderers

Plug Bash and Edit tool cards into AgentChat to render real tool invocations from your backend.

"use client";

import { AgentChat } from "@/components/agent-elements/agent-chat";
import { BashTool } from "@/components/agent-elements/tools/bash-tool";
import { EditTool } from "@/components/agent-elements/tools/edit-tool";
import type { UIMessage } from "ai";

const messages: UIMessage[] = [/* streamed from your backend */];

export default function Chat() {
  return (
    <AgentChat
      messages={messages}
      status="ready"
      onSend={() => {}}
      onStop={() => {}}
      toolRenderers={{
        Bash: BashTool,
        Edit: EditTool,
      }}
    />
  );
}
Composer with mode + model pickers

InputBar accepts any React node in leftActions / rightActions. Drop in ModeSelector and ModelPicker for a ChatGPT-style composer.

"use client";

import { InputBar } from "@/components/agent-elements/input-bar";
import { ModeSelector } from "@/components/agent-elements/input/mode-selector";
import { ModelPicker } from "@/components/agent-elements/input/model-picker";
import { IconBulb, IconCursor } from "@tabler/icons-react";

const modes = [
  { id: "agent", label: "Agent", icon: IconCursor },
  { id: "plan", label: "Plan", icon: IconBulb },
];

const models = [
  { id: "sonnet", name: "Sonnet", version: "4.6" },
  { id: "opus", name: "Opus", version: "4.7" },
];

export default function Composer() {
  return (
    <InputBar
      status="ready"
      onSend={({ content }) => console.log(content)}
      onStop={() => {}}
      leftActions={
        <>
          <ModeSelector modes={modes} defaultValue="agent" />
          <ModelPicker models={models} defaultValue="sonnet" />
        </>
      }
    />
  );
}
Part of the 21st.dev Agent SDK

Agent Elements is the UI layer of the 21st.dev Agent SDK. If you just want the components, everything on this page works on its own, plug them into any React app and wire them to your backend.

If you need a full agent (Claude Code or Codex running in a sandbox, with threads, streaming, tool approvals, and this UI out of the box), use the SDK directly. You get the same components, preconfigured, plus the runtime.

Explore the Agent SDK