21st-dev/agent-elements

チャット、ツール、およびAIワークフロー用のプロダクション対応 React コンポーネント。

エージェントUIのプリミティブのShadcnスタイルのレジストリ — メッセージリスト、ストリーミングマークダウン、ツールカード(Bash、Edit、Search、Todo、Plan…)、質問の明確化、および対応するインプットバー(React 19、 Tailwind v4、Vercel AI SDK)。

ライブサイト・Docs・Discord・21st.dev

お問い合わせ

箱にあるもの

-[[AgentChat] — MessageList] + [InputBar]をワイヤーで縛るチャットシェルをドロップインし、レンダラーにツールの呼び出しをディスパッチし、空の状態を処理します。 BashTool, EditTool, [[T9], McpTool, [ThinkingTool], [GenericTool], [[[[T9], [McpTool], [ThinkingTool], [[ThinkingTool]]], [[GenericTool]]], [ToolGroup], [[[SubagentTool], [[[[McpTool]]], [[[[[[ThinkingTool]]]]]]], [[[[[[[[[[[[[[[[[[[[[[[[[ThinkingTool]]]]]]]]]]]]]]、[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[ -Question Tool — 単一/マルチ/フリーテキストの回答で質問を明らかにする。 InputBar, Suggestions, [ModelPicker], [ModeSelector]], [SendButton]], [AttachmentButton], [[FileAttachment]]]. -Streaming bits — [Markdown (安全なストリーミング), [TextShimmer], [SpiralLoader].

26 コンポーネントの合計 — エージェント エレメントのフル カタログを参照してください。 21st.dev/docs または [/r/index.json] のレジストリのインデックス。

コンポーネントのインストール

レジストリはshadcn-compatibleです.

---

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