21st-dev/agent-elements

** 화상 채팅, 도구 및 AI 워크플로우에 대한 제품 읽기 React 구성 요소.**

에이전트 UI primitives의 shadcn 스타일 레지스트리 - 메시지 목록, 스트리밍 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.
• Question 도구 - 단일 / 멀티 / 무료 텍스트 답변으로 질문을 명확화합니다.
• **포스터 조각 ** - InputBar, Suggestions], ModelPicker], ModeSelector, SendButton, AttachmentButton, FileAttachment.
• ** 스트리밍 비트 ** - Markdown (안전 스트리밍), TextShimmer, SpiralLoader].

총 26개 부품 - 에이전트-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