21st-dev/agent-elements

用于聊天、工具和AI工作流程的生产准备React组件。

一个类似 shadcn 的代理 UI 原语注册表——消息列表、流式 Markdown、工具卡（Bash、Edit、Search、Todo、Plan…）、澄清问题和可组合输入栏——基于 React 19、Tailwind v4 和 Vercel AI SDK 构建。

直播网站 ·文档 ·Discord ·21st.dev

---

盒子里有什么

• AgentChat — 即插聊天壳，连接 MessageList + InputBar，向渲染器发送工具调用，并处理空状态。
• 工具卡 — BashTool、EditTool（带差异+批准）、SearchTool、TodoTool、PlanTool、ToolGroup、SubagentTool、McpTool、ThinkingTool、GenericTool。
• 问题工具 — 通过单文本/多文本/自由文本回答来澄清问题。
• 作曲家作品 — InputBar、Suggestions、ModelPicker、ModeSelector、SendButton、AttachmentButton、FileAttachment。
• 流媒体片段 — Markdown（安全流媒体），TextShimmer、SpiralLoader。

共有26个组成部分——详见完整目录 agent-elements.21st.dev/docs 或注册索引/r/index.json。

安装组件

注册表支持shadcn。

---

What’s in the box

• AgentChat — drop-in chat shell that wires MessageList + InputBar, dispatches tool invocations to renderers, and handles the empty state.
• Tool cards — BashTool, EditTool (with diffs + approval), SearchTool, TodoTool, PlanTool, ToolGroup, SubagentTool, McpTool, ThinkingTool, GenericTool.
• Question tool — clarifying questions with single / multi / free-text answers.
• Composer pieces — InputBar, Suggestions, ModelPicker, ModeSelector, SendButton, AttachmentButton, FileAttachment.
• Streaming bits — Markdown (safe streaming), TextShimmer, SpiralLoader.

26 components total — see the full catalog at agent-elements.21st.dev/docs or the registry index at /r/index.json.

Install components

The registry is shadcn-compatible. Pull in agent-chat and it transitively installs everything it needs:

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

Files land under components/agent-elements/. Pick individual pieces the same way:

npx shadcn@latest add https://agent-elements.21st.dev/r/bash-tool.json
npx shadcn@latest add https://agent-elements.21st.dev/r/input-bar.json

Requirements: React 19, Tailwind v4, a shadcn-initialised project (npx shadcn@latest init).

Quick example

"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 { SearchTool } from "@/components/agent-elements/tools/search-tool";
import { useChat } from "@ai-sdk/react";

export default function Chat() {
  const { messages, status, sendMessage, stop } = useChat();

  return (
    <AgentChat
      messages={messages}
      status={status}
      onSend={({ content }) => sendMessage({ text: content })}
      onStop={stop}
      toolRenderers={{
        Bash: BashTool,
        Edit: EditTool,
        Write: EditTool,
        Search: SearchTool,
      }}
    />
  );
}

Skill for Claude Code & friends

A bundled skills.sh skill teaches AI assistants the component catalog, prop shapes, and composition rules so they stop hallucinating imports.

npx skills add 21st-dev/agent-elements