Agent Elements — скилл
Скилл учит агента собирать чат ИИ-агента на 26 компонентах Agent Elements: карточки инструментов, ввод, стриминг
- 110 ★ репозитория
- Последний коммит
- MIT
Минимальный доступ
Почему такой уровень
- Скилл состоит из инструкций и справочника по компонентам, сам ничего не запускает
- Команда `npx shadcn@latest add` по ссылке копирует исходники компонентов в ваш проект
Установка
- Работает в
В терминале, через SkillFoxx CLI
npx skillfoxx add skills/agent-elementsОпределит агенты на машине, покажет уровень доступа и зафиксирует версию.
Другие способы установки
Доступ и проверки
Как мы проверяемМинимальный доступИнструмент ничего не запускает и не ходит в сеть.
- Скилл состоит из инструкций и справочника по компонентам, сам ничего не запускает
- Команда `npx shadcn@latest add` по ссылке копирует исходники компонентов в ваш проект
Это чужой код. Посмотрите файлы в репозитории перед установкой.
Что делает
Agent Elements — реестр React-компонентов для чата ИИ-агента в стиле shadcn. Он рассчитан на React 19, Tailwind v4 и Vercel AI SDK. В реестре 26 компонентов: оболочка `AgentChat`, список сообщений, поле ввода с выбором модели и режима, потоковый Markdown и карточки инструментов для Bash, правок с диффом и подтверждением, поиска, списка задач, плана, подагента, MCP и размышлений. Есть и вопрос агента с ответом на выбор или свободным текстом. Вместе с компонентами в репозитории лежит скилл `skills/agent-elements/SKILL.md`. Он дает агенту каталог компонентов, формы свойств, правила композиции и токены Tailwind, от которых зависит тема. Скилл включается, когда в проекте есть папка `components/agent-elements/` или когда пользователь просит собрать чат с вызовами инструментов, подтверждением плана или потоковым выводом. Агент меньше выдумывает импорты и свойства. Компоненты ставятся командой `npx shadcn@latest add https://agent-elements.21st.dev/r/agent-chat.json`: файлы попадают в `components/agent-elements/`, а зависимости подтягиваются сами. Отдельные части ставятся так же, например `bash-tool.json` или `input-bar.json`.
Для кого. Фронтенд-разработчикам на React 19 и Tailwind v4, которые делают интерфейс для собственного ИИ-агента и просят Claude Code или Cursor собрать чат из готовых блоков.
Подходит, если
- Вы делаете интерфейс агента и хотите показывать вызовы Bash и правок файлов карточками с диффом
- Агенту нужно задавать пользователю уточняющие вопросы с вариантами ответа
- Чат уже работает на `useChat` из Vercel AI SDK, и нужны готовые отрисовщики инструментов
- Проект на shadcn, и новые компоненты должны встать в `components/agent-elements/` без ручной подгонки
- Требуется утвердить план агента кнопкой до выполнения
Не подходит, если
- Нужен обычный чат без карточек инструментов, планов и подтверждений: сам скилл так и пишет
- В проекте уже выбран другой набор компонентов для агентов
- Проект не на React 19 и Tailwind v4
- Нужна готовая среда с рантаймом агента: этим занимается отдельный 21st.dev Agent SDK
Пример запроса к агенту
Собери страницу чата на AgentChat с карточками Bash и Edit и подключи ее к useChatОграничения
- Нужны React 19, Tailwind v4 и проект, инициализированный через `npx shadcn@latest init`. Для других стеков компоненты не подойдут.
- Скилл рассчитан на проект с Agent Elements. В проекте с другим набором компонентов агент должен остаться при нем.
- Последний коммит в репозитории сделан в апреле 2026 года.
- Полноценный агент с рантаймом, потоками и подтверждениями дает отдельный 21st.dev Agent SDK. Здесь только интерфейсный слой, подключать его к бэкенду нужно самому.
Как отключить. Удалите папку скилла из каталога скиллов агента. Установленные компоненты лежат в `components/agent-elements/` вашего проекта: удалите папку и уберите зависимости из `package.json`.
Частые вопросы
Как поставить скилл Agent Elements в Claude Code?
Выполните `npx skills add 21st-dev/agent-elements`. Скилл лежит в `skills/agent-elements/SKILL.md` и подключается, когда в проекте есть `components/agent-elements/` или просят собрать чат агента.
Как добавить компоненты в проект?
Командой `npx shadcn@latest add https://agent-elements.21st.dev/r/agent-chat.json`. Она ставит `agent-chat` и все, что ему нужно, а файлы попадают в `components/agent-elements/`.
Какие карточки инструментов есть?
`BashTool`, `EditTool` с диффом и подтверждением, `SearchTool`, `TodoTool`, `PlanTool`, `SubagentTool`, `McpTool`, `ThinkingTool`, `ToolGroup` и `GenericTool`.
Чем Agent Elements отличается от 21st.dev Agent SDK?
Agent Elements — только интерфейс, его можно подключить к любому бэкенду. SDK добавляет рантайм: Claude Code или Codex в песочнице, потоки и подтверждения инструментов.
Нужен ли Vercel AI SDK?
Компоненты типизированы под него: сообщения имеют тип `UIMessage[]`, статус — `ChatStatus`, а хук `useChat()` подключается напрямую.
Обсуждение
Вопросов и отзывов пока нет.
Похожие
СкиллыСкилл Vercel для чатов на компонентах AI Elements: диалог, сообщения, ввод запроса, вывод вызовов инструментов
Официальный скилл и MCP-сервер shadcn/ui: агент ищет компоненты в реестрах, ставит их через CLI и держится правил библиотеки
Скилл Magic UI: агент добавляет анимированные компоненты в React и Next.js через реестр shadcn и проверяет доступность
Панель разметки для React-страниц: клик по элементу дает агенту селектор и контекст, скиллы настраивают подключение и сами ведут критику интерфейса
shadcn-vue — скилл для агентов
shadcn-vue skill
Скилл shadcn-vue читает настройки вашего проекта и учит агента добавлять компоненты, формы и темы Vue-порта shadcn/ui по правилам библиотеки
Скилл подбирает и ставит анимированные React-компоненты beUI через публичный MCP или реестр shadcn вместо самодельных виджетов
Сравнение с похожими
Карточки с тем же главным запросом: чем они отличаются.
| Инструмент | Официальный | Звезды репозитория | Главное отличие |
|---|---|---|---|
| Agent Elements (эта карточка) | нет | 110 | |
| AI Elements | да | 2 509 | набор компонентов от Vercel для чата на AI SDK, без карточек Bash, правок и планов агента |
| CopilotKit — скиллы и плагин для агентов | да | 38 532 | скиллы для CopilotKit с его рантаймом, без реестра компонентов shadcn |
Коротко о README
README перечисляет состав набора, команды установки компонентов и скилла, пример страницы на `useChat` и структуру репозитория, где лежат и реестр, и сайт документации. В конце сказано, как набор связан с 21st.dev Agent SDK, и перечислен стек.
Бейдж для README
Исходный SKILL.md
--- name: agent-elements description: | Use whenever the user wants to build or modify a chat, agent, or tool-calling UI in a React 19 + Tailwind v4 project — especially if the code imports from `@/components/agent-elements/*` or the project has that folder on disk. Triggers: "agent chat", "tool call UI", "streaming chat", "plan approval", "AgentChat", "InputBar", "tool renderer", mentions of Agent Elements, or requests to add a new agent surface with shadcn. Do NOT use for plain chat UIs that don't need tool/plan/approval cards, or for projects already committed to a different agent UI kit. --- # Agent Elements skill Project-aware context for building chat and agent UIs with **Agent Elements** — an open-source shadcn registry at `https://agent-elements.21st.dev`. ## What this skill gives you When this skill loads, you know: 1. **The registry is shadcn-compatible.** Every component is installed with `npx shadcn@latest add https://agent-elements.21st.dev/r/<component>.json`. Files land under `components/agent-elements/` (the library's internal `components/` prefix is stripped — see Paths below). 2. **The API is typed around the Vercel AI SDK.** Messages are `UIMessage[]` from `ai`, status is `ChatStatus`. `useChat()` plugs in directly. 3. **The full component catalog with API shapes and composition rules** (see sections below). 4. **Theming guardrails** — the Tailwind tokens Agent Elements depends on. ## Detection Consider this project "Agent Elements-ready" if any of these are true: - `components/agent-elements/` exists on disk - `components.json` includes an alias or registry reference to Agent Elements - `package.json` dependencies include `ai` + `@tabler/icons-react` and the user mentions Agent Elements If the folder does not exist yet, install on demand with: