Agent Elements skill
The skill teaches an agent to build an AI agent chat from 26 Agent Elements components: tool cards, input bar, streaming
- 110 ★ on the repository
- Last commit
- MIT
Minimal access
Why this level
- The skill is instructions and a component reference and runs nothing itself
- The `npx shadcn@latest add` command copies component sources from a URL into your project
Install
- Works in
In your terminal, with SkillFoxx CLI
npx skillfoxx add skills/agent-elementsDetects the agents on your machine, shows the access level and pins the version.
Other ways to install
Access and checks
How we reviewMinimal accessThe tool runs nothing and makes no network calls.
- The skill is instructions and a component reference and runs nothing itself
- The `npx shadcn@latest add` command copies component sources from a URL into your project
This is third-party code. Review the repository files before installing.
What it does
Agent Elements is a shadcn-style registry of React components for an AI agent chat. It targets React 19, Tailwind v4 and the Vercel AI SDK. The registry has 26 components: the `AgentChat` shell, a message list, an input bar with model and mode pickers, streaming Markdown and tool cards for Bash, edits with a diff and approval, search, todos, plans, subagents, MCP and thinking. There is also an agent question with choice or free-text answers. Alongside the components the repository holds the skill `skills/agent-elements/SKILL.md`. It gives the agent the component catalog, prop shapes, composition rules and the Tailwind tokens the theme depends on. The skill loads when the project has a `components/agent-elements/` folder or when the user asks for a chat with tool calls, plan approval or streaming output. The agent invents fewer imports and props. Components install with `npx shadcn@latest add https://agent-elements.21st.dev/r/agent-chat.json`: files land in `components/agent-elements/` and dependencies come along. Single parts install the same way, for example `bash-tool.json` or `input-bar.json`.
Who it is for. Front-end developers on React 19 and Tailwind v4 who build an interface for their own AI agent and ask Claude Code or Cursor to assemble the chat from ready blocks.
Good fit when
- You build an agent interface and want Bash calls and file edits shown as cards with a diff
- The agent has to ask the user clarifying questions with answer options
- The chat already runs on `useChat` from the Vercel AI SDK and needs ready tool renderers
- The project uses shadcn and new components should land in `components/agent-elements/` without manual fitting
- The agent's plan has to be approved with a button before execution
Not a fit when
- You need a plain chat without tool cards, plans or approvals, as the skill itself says
- The project already committed to a different agent UI kit
- The project is not on React 19 and Tailwind v4
- You want a ready environment with an agent runtime, which the separate 21st.dev Agent SDK handles
Example request
Build a chat page on AgentChat with Bash and Edit tool cards and wire it to useChatLimitations
- Needs React 19, Tailwind v4 and a project initialized with `npx shadcn@latest init`. The components do not fit other stacks.
- The skill is meant for a project that uses Agent Elements. In a project with another kit the agent should stay with that kit.
- The last commit in the repository dates from April 2026.
- A full agent with a runtime, threads and approvals comes from the separate 21st.dev Agent SDK. This repository is the UI layer only, and you wire it to the backend yourself.
How to disable. Delete the skill folder from the agent's skills directory. Installed components live in `components/agent-elements/` in your project: delete that folder and remove the dependencies from `package.json`.
FAQ
How do I install the Agent Elements skill in Claude Code?
Run `npx skills add 21st-dev/agent-elements`. The skill lives in `skills/agent-elements/SKILL.md` and loads when the project has `components/agent-elements/` or you ask for an agent chat.
How do I add the components to a project?
With `npx shadcn@latest add https://agent-elements.21st.dev/r/agent-chat.json`. It installs `agent-chat` and everything it needs, and the files land in `components/agent-elements/`.
Which tool cards are there?
`BashTool`, `EditTool` with diffs and approval, `SearchTool`, `TodoTool`, `PlanTool`, `SubagentTool`, `McpTool`, `ThinkingTool`, `ToolGroup` and `GenericTool`.
How does Agent Elements differ from the 21st.dev Agent SDK?
Agent Elements is the UI only and connects to any backend. The SDK adds a runtime: Claude Code or Codex in a sandbox, threads and tool approvals.
Is the Vercel AI SDK required?
The components are typed around it: messages are `UIMessage[]`, status is `ChatStatus`, and the `useChat()` hook plugs in directly.
Discussion
No questions or reviews yet.
Related
SkillsA Vercel skill for building chat interfaces from AI Elements components: conversations, messages, prompt input, tool output
Official shadcn/ui skill and MCP server: the agent searches registries, adds components via the CLI and follows the library's rules
Magic UI skill: an agent adds animated components to React and Next.js through the shadcn registry and checks accessibility
Annotation toolbar for React pages: click an element to hand the agent its selector and context, plus skills for setup and an autonomous UI critique
shadcn-vue skill for agents
shadcn-vue skill
The shadcn-vue skill reads your project settings and teaches an agent to add components, forms and themes of the Vue port of shadcn/ui by its rules
A skill that picks and installs beUI animated React components through the public MCP or the shadcn registry instead of hand-built widgets
Comparison with similar tools
Cards that share the main search query, and how they differ.
| Tool | Official | Repository stars | Main difference |
|---|---|---|---|
| Agent Elements (this card) | no | 110 | |
| AI Elements | yes | 2,509 | Vercel's component set for AI SDK chats, without agent cards for Bash, edits and plans |
| CopilotKit skills and plugin for agents | yes | 38,532 | skills for CopilotKit and its runtime, with no shadcn component registry |
README in short
The README lists what the set contains, the install commands for components and the skill, an example page on `useChat` and the repository structure, which holds both the registry and the docs site. It ends by relating the set to the 21st.dev Agent SDK and listing the stack.
README badge
Original 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: