agent-elements
An out-of-the-box React component library for AI chat and workflows.
Install & Use
Copy this prompt and send it to your AI assistant (Claude / Cursor / TRAE / Codex / WorkBuddy etc.) to auto-install:
Help me install this AI Skill: agent-elements. It is used for: An out-of-the-box React component library for AI chat and workflows. Full Skill content: https://321skill.com/skills/agent-elements/raw/index.md Read that page and install it.
The prompt includes a link to the full Skill content. You can also view the full content.
This skill addresses the challenge where developers building AI conversational applications have to code complex UI components like chat interfaces, message lists, tool cards, and streaming Markdown from scratch. In practice, teams often spend significant time re-implementing these common components, struggling to ensure consistent interaction and performance.
Usage is straightforward. In a project already initialized with shadcn, simply run one install command: npx shadcn@latest add https://agent-elements.21st.dev/r/agent-chat.json. The components will be automatically downloaded to the components/agent-elements/ directory. You can then use natural language instructions to combine and use 26 components like AgentChat, InputBar, and BashTool to quickly build a complete AI chat interface.
It is ideal for frontend development teams, agent application developers, and AI startups needing to rapidly build AI chat products. Projects already using React 19, Tailwind v4, and the Vercel AI SDK can integrate seamlessly, significantly shortening UI development cycles.
We recommend introducing this component library during project initialization to avoid reinventing the wheel later. Note that it primarily depends on React 19 and Tailwind v4. If your project uses older versions like React 18 or below or Tailwind v3, you need to upgrade first. Also, the library itself does not include AI model invocation logic; it must be used in conjunction with the Vercel AI SDK or other AI SDKs.
Key Features
Unlike the general-purpose shadcn/ui component library, agent-elements is specifically designed for AI chat and workflow scenarios. It comes with AI-specific UI components such as tool cards (BashTool, EditTool, SearchTool), streaming Markdown rendering, and clarification question components, whereas shadcn/ui only provides basic UI primitives.
Limitations
Requires a project environment with React 19, Tailwind v4, and an initialized shadcn setup. It does not support React 18 or below, or Tailwind v3.
FAQ
How do I install agent-elements?
Run `npx shadcn@latest add https://agent-elements.21st.dev/r/agent-chat.json` to automatically install all dependent components.
What are the prerequisites?
You need React 19, Tailwind v4, and a project that has been initialized by running `npx shadcn@latest init`.
Installation guide for AI assistants
If your AI coding assistant (Claude Code, Cursor, TRAE etc.) can see this page, send it this message to auto-install:
Visit https://321skill.com/skills/agent-elements/raw/index.md to read the original Skill definition (Markdown format) for agent-elements, and install it according to the instructions.
Raw Markdown URL for AI: /skills/agent-elements/raw/index.md