# Agent Elements > | - **Type:** Skill - **Install:** `agentstack add skill-qredence-fleet-pi-agent-elements` - **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior - **Seller:** [Qredence](https://agentstack.voostack.com/s/qredence) - **Installs:** 0 - **Category:** [Agent Skills](https://agentstack.voostack.com/c/agent-skills) - **Latest version:** 0.1.0 - **License:** Apache-2.0 - **Upstream author:** [Qredence](https://github.com/Qredence) - **Source:** https://github.com/Qredence/fleet-pi/tree/main/.agents/skills/agent-elements - **Website:** https://docs.qredence.ai/ ## Install ```sh agentstack add skill-qredence-fleet-pi-agent-elements ``` Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent. ## About # 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/.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: ```bash npx shadcn@latest add https://agent-elements.21st.dev/r/agent-chat.json ``` `agent-chat` transitively pulls every other component it needs via `registryDependencies` (MessageList, InputBar, tool renderers, shared utils). ## Paths (post-install layout) After `shadcn add`, files sit under `@/components/agent-elements/` with this shape: ``` components/agent-elements/ agent-chat.tsx message-list.tsx input-bar.tsx markdown.tsx user-message.tsx error-message.tsx text-shimmer.tsx spiral-loader.tsx input/ attachment-button.tsx send-button.tsx file-attachment.tsx suggestions.tsx model-picker.tsx mode-selector.tsx tools/ bash-tool.tsx edit-tool.tsx search-tool.tsx todo-tool.tsx plan-tool.tsx tool-group.tsx subagent-tool.tsx mcp-tool.tsx thinking-tool.tsx generic-tool.tsx question/ question-tool.tsx hooks/use-tool-complete.ts utils/cn.ts types.ts ``` **Import rule:** always import from the exact file, never from a barrel. ```tsx // ✅ import { AgentChat } from "@/components/agent-elements/agent-chat"; import { BashTool } from "@/components/agent-elements/tools/bash-tool"; // ❌ — no barrel exists import { AgentChat } from "@/components/agent-elements"; ``` ## Component catalog ### Chat surface - **AgentChat** — the full chat shell. Renders `MessageList` + `InputBar`, handles tool invocations via `toolRenderers`, shows an empty state with optional `suggestions`. Props: `messages`, `status`, `onSend`, `onStop`, `toolRenderers?`, `suggestions?`, `attachments?`, `classNames?`, `slots?`. - **MessageList** — transcript only. Use when you need the input bar somewhere else. Accepts `toolRenderers` and `showCopyToolbar`. - **UserMessage / ErrorMessage / Markdown** — low-level message pieces. `Markdown` streams safely (external links get `rel="noreferrer"` by default). ### Input - **InputBar** — composer. Props: `status`, `onSend({ content })`, `onStop`, `value?` + `onChange?` (controlled), `attachedImages`/`attachedFiles` with their remove handlers, `leftActions`/`rightActions` slots, `suggestions?`, `questionBar?`, `infoBar?`. - **Suggestions** — quick-prompt chips for the empty state or inline. - **ModelPicker / ModeSelector** — designed to drop into `leftActions`. Both accept a simple `{ id, name, version? }` / `{ id, label, icon?, description? }` shape. Do not import `CLAUDE_MODELS` — it was removed; supply your own array. - **SendButton / AttachmentButton / FileAttachment** — usable standalone if you're building a custom composer. ### Tool cards All tool cards accept a `part` prop of type `Extract\` }>` from the AI SDK. Register them via `toolRenderers` on `AgentChat`/`MessageList`: ```tsx ``` Cards available: - **BashTool** — command + stdout, collapsible. - **EditTool** — diff card. Supports `input.old_string`/`input.new_string` or `output.structuredPatch`, plus an approval footer via `input.approval`. - **SearchTool** — grouped search results. Pass `results` or use `output.results`. - **TodoTool** — diffed todo list from `input.todos` vs `output.oldTodos`. - **PlanTool** — plan title + summary with approve/reject footer. - **ToolGroup** — collapses consecutive tool calls into one row. - **SubagentTool** — sub-agent task with nested tools. - **McpTool** — generic MCP tool output; use `parseMcpToolType` from `@/components/agent-elements/tools/tool-registry` to get `mcpInfo`. - **ThinkingTool** — collapsible reasoning row. - **GenericTool** — fallback for unknown tools. - **QuestionTool** — clarifying question with single/multi/text answer kinds. ### Streaming states - **TextShimmer** — shimmering status label. - **SpiralLoader** — Lottie spiral; use for multi-second loading states. ## Composition patterns ### Full chat with tool rendering (most common) ```tsx "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 ( sendMessage({ text: content })} onStop={stop} toolRenderers={{ Bash: BashTool, Edit: EditTool, Write: EditTool, Search: SearchTool, }} /> ); } ``` ### Composer with mode + model pickers ```tsx import { InputBar } from "@/components/agent-elements/input-bar"; import { ModeSelector } from "@/components/agent-elements/input/mode-selector"; import { ModelPicker } from "@/components/agent-elements/input/model-picker"; import { IconBulb, IconCursor } from "@tabler/icons-react"; const modes = [ { id: "agent", label: "Agent", icon: IconCursor }, { id: "plan", label: "Plan", icon: IconBulb }, ]; const models = [ { id: "sonnet", name: "Sonnet", version: "4.6" }, { id: "opus", name: "Opus", version: "4.7" }, ]; } /> ``` ### Custom tool renderer `toolRenderers` values are React components that receive `{ part, chatStatus }`. Return whatever UI you want; reuse `GenericTool` as a fallback shell. ## Theming Agent Elements reads these Tailwind CSS vars (shadcn-style). Do not remove or rename them in the consumer theme: - `--an-foreground`, `--an-background`, `--an-primary-color` - Standard shadcn tokens: `--background`, `--foreground`, `--border`, `--muted`, `--muted-foreground`, `--accent`, `--primary`, etc. Customising a component is just editing the installed file. Prefer that over wrapping — the code is yours now. ## When NOT to use Agent Elements - Projects using `assistant-ui`, `ai-elements`, `copilotkit`, or another kit — don't mix. - Pure chat UIs that never render tool calls or plans — `InputBar` + your own message rendering may be enough; skip `AgentChat`. - React .json` - Full docs in one file: `https://agent-elements.21st.dev/llms-full.txt` ## Source & license This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code. - **Author:** [Qredence](https://github.com/Qredence) - **Source:** [Qredence/fleet-pi](https://github.com/Qredence/fleet-pi) - **License:** Apache-2.0 - **Homepage:** https://docs.qredence.ai/ Install and usage instructions live in the source repository linked above. ## Pricing - **Free** — Free ## Security capabilities Automated source analysis of v0.1.0 — what this tool can access: - **Network access:** no - **Filesystem access:** no - **Shell / process execution:** no - **Environment & secrets:** no - **Dynamic code execution:** no *"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.* ## Versions - **0.1.0** — security scan: passed — Imported from the upstream source. ## Links - Listing page: https://agentstack.voostack.com/l/skill-qredence-fleet-pi-agent-elements - Seller: https://agentstack.voostack.com/s/qredence - Browse the marketplace: https://agentstack.voostack.com/browse --- Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.