{"id":50873100,"url":"https://github.com/21st-dev/agent-elements","last_synced_at":"2026-06-15T07:03:52.225Z","repository":{"id":354942937,"uuid":"1180216067","full_name":"21st-dev/agent-elements","owner":"21st-dev","description":null,"archived":false,"fork":false,"pushed_at":"2026-04-24T17:53:41.000Z","size":1057,"stargazers_count":51,"open_issues_count":0,"forks_count":1,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-05-01T04:25:00.119Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://agent-elements.21st.dev","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/21st-dev.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-03-12T20:24:56.000Z","updated_at":"2026-04-30T14:56:19.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/21st-dev/agent-elements","commit_stats":null,"previous_names":["21st-dev/agent-elements"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/21st-dev/agent-elements","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/21st-dev%2Fagent-elements","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/21st-dev%2Fagent-elements/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/21st-dev%2Fagent-elements/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/21st-dev%2Fagent-elements/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/21st-dev","download_url":"https://codeload.github.com/21st-dev/agent-elements/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/21st-dev%2Fagent-elements/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34351451,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-15T02:00:07.085Z","response_time":63,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2026-06-15T07:03:49.303Z","updated_at":"2026-06-15T07:03:52.218Z","avatar_url":"https://github.com/21st-dev.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n\n# Agent Elements\n\n**Production-ready React components for chat, tools, and AI workflows.**\n\nA shadcn-style registry of agent UI primitives — message lists, streaming markdown, tool cards (Bash, Edit, Search, Todo, Plan…), clarifying questions, and a composable input bar — built on React 19, Tailwind v4, and the Vercel AI SDK.\n\n[Live site](https://agent-elements.21st.dev) · [Docs](https://agent-elements.21st.dev/docs) · [Discord](https://discord.gg/Aq2B7bCp) · [21st.dev](https://21st.dev)\n\n\u003c/div\u003e\n\n---\n\n## What's in the box\n\n- **`AgentChat`** — drop-in chat shell that wires `MessageList` + `InputBar`, dispatches tool invocations to renderers, and handles the empty state.\n- **Tool cards** — `BashTool`, `EditTool` (with diffs + approval), `SearchTool`, `TodoTool`, `PlanTool`, `ToolGroup`, `SubagentTool`, `McpTool`, `ThinkingTool`, `GenericTool`.\n- **Question tool** — clarifying questions with single / multi / free-text answers.\n- **Composer pieces** — `InputBar`, `Suggestions`, `ModelPicker`, `ModeSelector`, `SendButton`, `AttachmentButton`, `FileAttachment`.\n- **Streaming bits** — `Markdown` (safe streaming), `TextShimmer`, `SpiralLoader`.\n\n26 components total — see the full catalog at [agent-elements.21st.dev/docs](https://agent-elements.21st.dev/docs) or the registry index at [`/r/index.json`](https://agent-elements.21st.dev/r/index.json).\n\n## Install components\n\nThe registry is shadcn-compatible. Pull in `agent-chat` and it transitively installs everything it needs:\n\n```bash\nnpx shadcn@latest add https://agent-elements.21st.dev/r/agent-chat.json\n```\n\nFiles land under `components/agent-elements/`. Pick individual pieces the same way:\n\n```bash\nnpx shadcn@latest add https://agent-elements.21st.dev/r/bash-tool.json\nnpx shadcn@latest add https://agent-elements.21st.dev/r/input-bar.json\n```\n\n**Requirements:** React 19, Tailwind v4, a shadcn-initialised project (`npx shadcn@latest init`).\n\n## Quick example\n\n```tsx\n\"use client\";\n\nimport { AgentChat } from \"@/components/agent-elements/agent-chat\";\nimport { BashTool } from \"@/components/agent-elements/tools/bash-tool\";\nimport { EditTool } from \"@/components/agent-elements/tools/edit-tool\";\nimport { SearchTool } from \"@/components/agent-elements/tools/search-tool\";\nimport { useChat } from \"@ai-sdk/react\";\n\nexport default function Chat() {\n  const { messages, status, sendMessage, stop } = useChat();\n\n  return (\n    \u003cAgentChat\n      messages={messages}\n      status={status}\n      onSend={({ content }) =\u003e sendMessage({ text: content })}\n      onStop={stop}\n      toolRenderers={{\n        Bash: BashTool,\n        Edit: EditTool,\n        Write: EditTool,\n        Search: SearchTool,\n      }}\n    /\u003e\n  );\n}\n```\n\n## Skill for Claude Code \u0026 friends\n\nA bundled [skills.sh](https://skills.sh) skill teaches AI assistants the component catalog, prop shapes, and composition rules so they stop hallucinating imports.\n\n```bash\nnpx skills add 21st-dev/agent-elements\n```\n\nSource: [`skills/agent-elements/SKILL.md`](skills/agent-elements/SKILL.md). More at [docs/skills](https://agent-elements.21st.dev/docs/skills).\n\n## Local development\n\nThis repo is **both** the registry source and the documentation site (Next.js 16). To run it:\n\n```bash\npnpm install\npnpm dev          # http://localhost:3000\n```\n\nOther scripts:\n\n| Script                   | What it does                                                |\n| ------------------------ | ----------------------------------------------------------- |\n| `pnpm dev`               | Next.js dev server                                          |\n| `pnpm build`             | Rebuilds the registry, then builds the site (`prebuild` hook) |\n| `pnpm registry:build`    | Generates `public/r/*.json` from `lib/agent-ui/`            |\n| `pnpm lint` / `pnpm format` | ESLint / Prettier                                        |\n\n## Project structure\n\n```\n.\n├── app/                   Next.js app — landing page, /docs, /api/agent\n├── lib/agent-ui/          Component source (the library)\n├── scripts/build-registry.mts   Compiles lib/agent-ui → public/r/*.json\n├── public/r/              Generated shadcn registry (committed)\n├── skills/agent-elements/ skills.sh bundle (SKILL.md + README)\n└── agents/my-agent/       Example @21st-sdk/agent definition\n```\n\nThe registry builder resolves intra-library imports, rewrites `@/lib/agent-ui/*` → `@/components/agent-elements/*`, and emits one JSON per component plus an index.\n\n## Part of the 21st.dev Agent SDK\n\nAgent Elements is the UI layer of the [**21st.dev Agent SDK**](https://21st.dev/agents). If you just want the components, everything above works on its own — plug them into any React app and wire them to your backend.\n\nIf you need a full agent (Claude Code or Codex running in a sandbox, with threads, streaming, tool approvals, and this UI out of the box), use the SDK directly. You get the same components, preconfigured, plus the runtime.\n\n→ [Explore the Agent SDK](https://21st.dev/agents)\n\n## Stack\n\nNext.js 16 · React 19 · Tailwind v4 · [Vercel AI SDK](https://sdk.vercel.ai) · [shadcn](https://ui.shadcn.com) · [Base UI](https://base-ui.com) · [Motion](https://motion.dev) · [Shiki](https://shiki.style) · [`@21st-sdk/*`](https://21st.dev/agents)\n\n## Links\n\n- **Site:** [agent-elements.21st.dev](https://agent-elements.21st.dev)\n- **Registry index:** [agent-elements.21st.dev/r/index.json](https://agent-elements.21st.dev/r/index.json)\n- **LLM-friendly docs:** [agent-elements.21st.dev/llms-full.txt](https://agent-elements.21st.dev/llms-full.txt)\n- **Issues:** [github.com/21st-dev/agent-elements/issues](https://github.com/21st-dev/agent-elements/issues)\n- **Discord:** [discord.gg/Aq2B7bCp](https://discord.gg/Aq2B7bCp)\n\n## License\n\n[MIT](LICENSE) — built by [21st.dev](https://21st.dev).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F21st-dev%2Fagent-elements","html_url":"https://awesome.ecosyste.ms/projects/github.com%2F21st-dev%2Fagent-elements","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F21st-dev%2Fagent-elements/lists"}