21st-dev/agent-elements

Готовые к производству компоненты React для чата, инструментов и рабочих процессов ИИ.

Реестр примитивов пользовательского интерфейса в стиле shadcn — списки сообщений, потоковая разметка, карты инструментов (Bash, Edit, Search, Todo, Plan…), уточняющие вопросы и композитная панель ввода — построена на React 19, Tailwind v4 и Vercel AI SDK.

Live site · Docs · Discord · 21st.dev

Что в коробке

** AgentChat** — оболочка чата, которая подключает MessageList + InputBar, отправляет вызовы инструмента на визуализаторы и обрабатывает пустое состояние. BashTool, EditTool (с диффами + одобрением), [[T5], TodoTool, PlanTool, ToolGroup, SubagentTool, McpTool, ThinkingTool, GenericTool. ** Инструмент вопросов** — уточнение вопросов с однократными/мультитекстовыми ответами. [13], [T14], [T15], [T16], [T17], [T18], [T19]. — Потоковые биты — Markdown (безопасная потоковая передача), TextShimmer, SpiralLoader.

Всего 26 компонентов — см. полный каталог по агентам-элементам. 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