Skip to content
IndexDesign corpus
Best in classAI Interface KitsChat & Agent Components
AI Interface KitsComponent LibraryRegistryFreeReact

AI Elements

Vercel's 47-component shadcn registry for chat, agent, voice and workflow UIs

Visit resourceDocsRepository
Aboutai-sdk.dev

AI Elements is Vercel's component library and custom shadcn registry for AI-native app UIs, split into Chatbot, Code, Voice, Workflow and Utilities groups. It covers the parts that are tedious to hand-roll: streaming messages, reasoning and chain-of-thought panels, tool calls, approval confirmations, citations and sources, sandboxes, file trees, stack traces, voice transcription, and a node/edge agent canvas. Components install into your own tree via `ai-elements` or the shadcn CLI and are wired to the Vercel AI SDK for streaming and type safety. It is the default starting point if you are already on the AI SDK.

Install
npx ai-elements@latest add message # or: npx shadcn@latest add @ai-elements/message
For an agent

This is the first thing to reach for on any Next.js + Vercel AI SDK chat or agent surface — the components expect AI SDK message parts and stream handling, so they slot in with almost no glue, but that same coupling makes them awkward if the backend is LangGraph, a raw OpenAI call, or anything non-AI-SDK. Note the URL redirects: `ai-sdk.dev/elements/*` 308s to `elements.ai-sdk.dev/*`, and the prerequisites are strict (React 19, Next 14+, Tailwind v4, shadcn/ui already configured). Install per component rather than the whole set; the Workflow canvas and Sandbox groups pull heavy client deps you do not want in a plain chatbot.

Why it is here. It is the reference vocabulary for AI app UI — reasoning, tool call, approval, checkpoint, sources — maintained by the same team as the AI SDK, so the component names and the SDK's data model stay in sync.

Install command, framework, licence and component list.
Components it ships47 total
ConversationMessagePrompt InputPrompt QueueSuggestionReasoningPlanTaskTool CallApproval RequestCheckpointSourcesInline CitationAttachmentsContext MeterModel SelectorShimmerArtifactAgent CardAgent CanvasNode EditorWeb PreviewCode BlockDiff ViewFile TreeJSON ViewerStack Trace PanelTerminalGenerated ImageAudio PlayerSpeech InputVoice OutputTranscriptPersonaPanelToolbar
Helps you build5
AI Chat PanelAI Action ApprovalAgent Run HistoryAgent SettingsChat Web App
Notable for
  • Maintained by Vercel alongside the AI SDK
  • 47 components across chat, code, voice, workflow
  • Agent canvas with nodes and edges
  • Approval and checkpoint primitives
  • Installs into your repo via shadcn CLI
Provenance

Verified 2026-08-15. HTTP 200. https://ai-sdk.dev/elements/overview (308 -> elements.ai-sdk.dev), https://elements.ai-sdk.dev/overview, https://elements.ai-sdk.dev/setup, https://github.com/vercel/ai-elements, https://api.github.com/repos/vercel/ai-elements

Related resourcesAI Interface Kits