@ai-elements

Official Vercel AI SDK component registry (also distributed as ai-elements CLI) for building AI-native Next.js applications. Components span: Chatbot, Conversation, Message, Prompt Input, Model Selector, Reasoning/Chain-of-Thought display, Inline Citation, Confirmation, Checkpoint, Context, Suggestion, Task, Queue, Tool display, Code Block, Commit, File Tree, JSX Preview, Package Info, Sandbox, Schema Display, Snippet, Stack Trace, Terminal, Test Results, Web Preview, Audio Player, Mic Selector, and more. Requires Vercel AI SDK + shadcn/ui + Tailwind CSS. Free, open-source. Use for: AI-first Next.js apps that need a full suite of streaming-ready chat and agentic display components wired to the Vercel AI SDK out of the box.

136 components react shadcn-cli

website ↗ github ↗ registry ↗ agent brief (.md) ↗ clone source (134 .json) ↗ clone brief (PROMPT.md) ↗

Install this registry

shadcn (npm) npx shadcn@latest add https://ai-sdk.dev/elements/api/registry/registry.json

pnpm pnpm dlx shadcn@latest add https://ai-sdk.dev/elements/api/registry/registry.json

bun bunx shadcn@latest add https://ai-sdk.dev/elements/api/registry/registry.json

fetch registry curl -s https://ai-sdk.dev/elements/api/registry/registry.json

Components

136 total

Agent component

AI-powered agent component.

npx shadcn@latest add https://ai-sdk.dev/elements/api/registry/agent.json

Artifact component

AI-powered artifact component.

npx shadcn@latest add https://ai-sdk.dev/elements/api/registry/artifact.json

Attachments component

AI-powered attachments component.

npx shadcn@latest add https://ai-sdk.dev/elements/api/registry/attachments.json

Audio Player component

AI-powered audio player component.

npx shadcn@latest add https://ai-sdk.dev/elements/api/registry/audio-player.json

Canvas component

AI-powered canvas component.

npx shadcn@latest add https://ai-sdk.dev/elements/api/registry/canvas.json

Chain Of Thought component

AI-powered chain of-thought component.

npx shadcn@latest add https://ai-sdk.dev/elements/api/registry/chain-of-thought.json

Checkpoint component

AI-powered checkpoint component.

npx shadcn@latest add https://ai-sdk.dev/elements/api/registry/checkpoint.json

Code Block component

AI-powered code block component.

npx shadcn@latest add https://ai-sdk.dev/elements/api/registry/code-block.json

Commit component

AI-powered commit component.

npx shadcn@latest add https://ai-sdk.dev/elements/api/registry/commit.json

Confirmation component

AI-powered confirmation component.

npx shadcn@latest add https://ai-sdk.dev/elements/api/registry/confirmation.json

Connection component

AI-powered connection component.

npx shadcn@latest add https://ai-sdk.dev/elements/api/registry/connection.json

Context component

AI-powered context component.

npx shadcn@latest add https://ai-sdk.dev/elements/api/registry/context.json

Controls component

AI-powered controls component.

npx shadcn@latest add https://ai-sdk.dev/elements/api/registry/controls.json

Conversation component

AI-powered conversation component.

npx shadcn@latest add https://ai-sdk.dev/elements/api/registry/conversation.json

Edge component

AI-powered edge component.

npx shadcn@latest add https://ai-sdk.dev/elements/api/registry/edge.json

Environment Variables component

AI-powered environment variables component.

npx shadcn@latest add https://ai-sdk.dev/elements/api/registry/environment-variables.json

File Tree component

AI-powered file tree component.

npx shadcn@latest add https://ai-sdk.dev/elements/api/registry/file-tree.json

Image component

AI-powered image component.

npx shadcn@latest add https://ai-sdk.dev/elements/api/registry/image.json

Inline Citation component

AI-powered inline citation component.

npx shadcn@latest add https://ai-sdk.dev/elements/api/registry/inline-citation.json

Jsx Preview component

AI-powered jsx preview component.

npx shadcn@latest add https://ai-sdk.dev/elements/api/registry/jsx-preview.json

Message component

AI-powered message component.

npx shadcn@latest add https://ai-sdk.dev/elements/api/registry/message.json

Mic Selector component

AI-powered mic selector component.

npx shadcn@latest add https://ai-sdk.dev/elements/api/registry/mic-selector.json

Model Selector component

AI-powered model selector component.

npx shadcn@latest add https://ai-sdk.dev/elements/api/registry/model-selector.json

Node component

AI-powered node component.

npx shadcn@latest add https://ai-sdk.dev/elements/api/registry/node.json

Open In Chat component

AI-powered open in-chat component.

npx shadcn@latest add https://ai-sdk.dev/elements/api/registry/open-in-chat.json

Package Info component

AI-powered package info component.

npx shadcn@latest add https://ai-sdk.dev/elements/api/registry/package-info.json

Panel component

AI-powered panel component.

npx shadcn@latest add https://ai-sdk.dev/elements/api/registry/panel.json

Persona component

AI-powered persona component.

npx shadcn@latest add https://ai-sdk.dev/elements/api/registry/persona.json

Plan component

AI-powered plan component.

npx shadcn@latest add https://ai-sdk.dev/elements/api/registry/plan.json

Prompt Input component

AI-powered prompt input component.

npx shadcn@latest add https://ai-sdk.dev/elements/api/registry/prompt-input.json

Queue component

AI-powered queue component.

npx shadcn@latest add https://ai-sdk.dev/elements/api/registry/queue.json

Reasoning component

AI-powered reasoning component.

npx shadcn@latest add https://ai-sdk.dev/elements/api/registry/reasoning.json

Sandbox component

AI-powered sandbox component.

npx shadcn@latest add https://ai-sdk.dev/elements/api/registry/sandbox.json

Schema Display component

AI-powered schema display component.

npx shadcn@latest add https://ai-sdk.dev/elements/api/registry/schema-display.json

Shimmer component

AI-powered shimmer component.

npx shadcn@latest add https://ai-sdk.dev/elements/api/registry/shimmer.json

Snippet component

AI-powered snippet component.

npx shadcn@latest add https://ai-sdk.dev/elements/api/registry/snippet.json

Sources component

AI-powered sources component.

npx shadcn@latest add https://ai-sdk.dev/elements/api/registry/sources.json

Speech Input component

AI-powered speech input component.

npx shadcn@latest add https://ai-sdk.dev/elements/api/registry/speech-input.json

Stack Trace component

AI-powered stack trace component.

npx shadcn@latest add https://ai-sdk.dev/elements/api/registry/stack-trace.json

Suggestion component

AI-powered suggestion component.

npx shadcn@latest add https://ai-sdk.dev/elements/api/registry/suggestion.json

Task component

AI-powered task component.

npx shadcn@latest add https://ai-sdk.dev/elements/api/registry/task.json

Terminal component

AI-powered terminal component.

npx shadcn@latest add https://ai-sdk.dev/elements/api/registry/terminal.json

Test Results component

AI-powered test results component.

npx shadcn@latest add https://ai-sdk.dev/elements/api/registry/test-results.json

Tool component

AI-powered tool component.

npx shadcn@latest add https://ai-sdk.dev/elements/api/registry/tool.json

Toolbar component

AI-powered toolbar component.

npx shadcn@latest add https://ai-sdk.dev/elements/api/registry/toolbar.json

Transcription component

AI-powered transcription component.

npx shadcn@latest add https://ai-sdk.dev/elements/api/registry/transcription.json

Voice Selector component

AI-powered voice selector component.

npx shadcn@latest add https://ai-sdk.dev/elements/api/registry/voice-selector.json

Web Preview component

AI-powered web preview component.

npx shadcn@latest add https://ai-sdk.dev/elements/api/registry/web-preview.json

Agent Example block

Example implementation of agent.

npx shadcn@latest add https://ai-sdk.dev/elements/api/registry/example-agent.json

Artifact Example block

Example implementation of artifact.

npx shadcn@latest add https://ai-sdk.dev/elements/api/registry/example-artifact.json

Attachments Inline Example block

Example implementation of attachments inline.

npx shadcn@latest add https://ai-sdk.dev/elements/api/registry/example-attachments-inline.json

Attachments List Example block

Example implementation of attachments list.

npx shadcn@latest add https://ai-sdk.dev/elements/api/registry/example-attachments-list.json

Attachments Example block

Example implementation of attachments.

npx shadcn@latest add https://ai-sdk.dev/elements/api/registry/example-attachments.json

Audio Player Remote Example block

Example implementation of audio player-remote.

npx shadcn@latest add https://ai-sdk.dev/elements/api/registry/example-audio-player-remote.json

Audio Player Example block

Example implementation of audio player.

npx shadcn@latest add https://ai-sdk.dev/elements/api/registry/example-audio-player.json

Chain Of Thought Example block

Example implementation of chain of-thought.

npx shadcn@latest add https://ai-sdk.dev/elements/api/registry/example-chain-of-thought.json

Chatbot Example block

Example implementation of chatbot.

npx shadcn@latest add https://ai-sdk.dev/elements/api/registry/example-chatbot.json

Checkpoint Example block

Example implementation of checkpoint.

npx shadcn@latest add https://ai-sdk.dev/elements/api/registry/example-checkpoint.json

Code Block Dark Example block

Example implementation of code block-dark.

npx shadcn@latest add https://ai-sdk.dev/elements/api/registry/example-code-block-dark.json

Code Block Example block

Example implementation of code block.

npx shadcn@latest add https://ai-sdk.dev/elements/api/registry/example-code-block.json

Commit Example block

Example implementation of commit.

npx shadcn@latest add https://ai-sdk.dev/elements/api/registry/example-commit.json

Confirmation Accepted Example block

Example implementation of confirmation accepted.

npx shadcn@latest add https://ai-sdk.dev/elements/api/registry/example-confirmation-accepted.json

Confirmation Rejected Example block

Example implementation of confirmation rejected.

npx shadcn@latest add https://ai-sdk.dev/elements/api/registry/example-confirmation-rejected.json

Confirmation Request Example block

Example implementation of confirmation request.

npx shadcn@latest add https://ai-sdk.dev/elements/api/registry/example-confirmation-request.json

Confirmation Example block

Example implementation of confirmation.

npx shadcn@latest add https://ai-sdk.dev/elements/api/registry/example-confirmation.json

Context Example block

Example implementation of context.

npx shadcn@latest add https://ai-sdk.dev/elements/api/registry/example-context.json

Conversation Example block

Example implementation of conversation.

npx shadcn@latest add https://ai-sdk.dev/elements/api/registry/example-conversation.json

Demo Chatgpt Example block

Example implementation of demo chatgpt.

npx shadcn@latest add https://ai-sdk.dev/elements/api/registry/example-demo-chatgpt.json

Demo Claude Example block

Example implementation of demo claude.

npx shadcn@latest add https://ai-sdk.dev/elements/api/registry/example-demo-claude.json

Demo Cursor Example block

Example implementation of demo cursor.

npx shadcn@latest add https://ai-sdk.dev/elements/api/registry/example-demo-cursor.json

Demo Grok Example block

Example implementation of demo grok.

npx shadcn@latest add https://ai-sdk.dev/elements/api/registry/example-demo-grok.json

Demo Workflow Example block

Example implementation of demo workflow.

npx shadcn@latest add https://ai-sdk.dev/elements/api/registry/example-demo-workflow.json

Environment Variables Example block

Example implementation of environment variables.

npx shadcn@latest add https://ai-sdk.dev/elements/api/registry/example-environment-variables.json

File Tree Basic Example block

Example implementation of file tree-basic.

npx shadcn@latest add https://ai-sdk.dev/elements/api/registry/example-file-tree-basic.json

File Tree Expanded Example block

Example implementation of file tree-expanded.

npx shadcn@latest add https://ai-sdk.dev/elements/api/registry/example-file-tree-expanded.json

File Tree Selection Example block

Example implementation of file tree-selection.

npx shadcn@latest add https://ai-sdk.dev/elements/api/registry/example-file-tree-selection.json

File Tree Example block

Example implementation of file tree.

npx shadcn@latest add https://ai-sdk.dev/elements/api/registry/example-file-tree.json

Image Example block

Example implementation of image.

npx shadcn@latest add https://ai-sdk.dev/elements/api/registry/example-image.json

Inline Citation Example block

Example implementation of inline citation.

npx shadcn@latest add https://ai-sdk.dev/elements/api/registry/example-inline-citation.json

Jsx Preview Example block

Example implementation of jsx preview.

npx shadcn@latest add https://ai-sdk.dev/elements/api/registry/example-jsx-preview.json

Message Example block

Example implementation of message.

npx shadcn@latest add https://ai-sdk.dev/elements/api/registry/example-message.json

Mic Selector Example block

Example implementation of mic selector.

npx shadcn@latest add https://ai-sdk.dev/elements/api/registry/example-mic-selector.json

Model Selector Example block

Example implementation of model selector.

npx shadcn@latest add https://ai-sdk.dev/elements/api/registry/example-model-selector.json

Open In Chat Example block

Example implementation of open in-chat.

npx shadcn@latest add https://ai-sdk.dev/elements/api/registry/example-open-in-chat.json

Package Info Example block

Example implementation of package info.

npx shadcn@latest add https://ai-sdk.dev/elements/api/registry/example-package-info.json

Persona Command Example block

Example implementation of persona command.

npx shadcn@latest add https://ai-sdk.dev/elements/api/registry/example-persona-command.json

Persona Glint Example block

Example implementation of persona glint.

npx shadcn@latest add https://ai-sdk.dev/elements/api/registry/example-persona-glint.json

Persona Halo Example block

Example implementation of persona halo.

npx shadcn@latest add https://ai-sdk.dev/elements/api/registry/example-persona-halo.json

Persona Mana Example block

Example implementation of persona mana.

npx shadcn@latest add https://ai-sdk.dev/elements/api/registry/example-persona-mana.json

Persona Obsidian Example block

Example implementation of persona obsidian.

npx shadcn@latest add https://ai-sdk.dev/elements/api/registry/example-persona-obsidian.json

Persona Opal Example block

Example implementation of persona opal.

npx shadcn@latest add https://ai-sdk.dev/elements/api/registry/example-persona-opal.json

Plan Example block

Example implementation of plan.

npx shadcn@latest add https://ai-sdk.dev/elements/api/registry/example-plan.json

Prompt Input Cursor Example block

Example implementation of prompt input-cursor.

npx shadcn@latest add https://ai-sdk.dev/elements/api/registry/example-prompt-input-cursor.json

Prompt Input Tooltip Example block

Example implementation of prompt input-tooltip.

npx shadcn@latest add https://ai-sdk.dev/elements/api/registry/example-prompt-input-tooltip.json

Prompt Input Example block

Example implementation of prompt input.

npx shadcn@latest add https://ai-sdk.dev/elements/api/registry/example-prompt-input.json

Queue Prompt Input Example block

Example implementation of queue prompt-input.

npx shadcn@latest add https://ai-sdk.dev/elements/api/registry/example-queue-prompt-input.json

Queue Example block

Example implementation of queue.

npx shadcn@latest add https://ai-sdk.dev/elements/api/registry/example-queue.json

Reasoning Example block

Example implementation of reasoning.

npx shadcn@latest add https://ai-sdk.dev/elements/api/registry/example-reasoning.json

Sandbox Example block

Example implementation of sandbox.

npx shadcn@latest add https://ai-sdk.dev/elements/api/registry/example-sandbox.json

Schema Display Basic Example block

Example implementation of schema display-basic.

npx shadcn@latest add https://ai-sdk.dev/elements/api/registry/example-schema-display-basic.json

Schema Display Body Example block

Example implementation of schema display-body.

npx shadcn@latest add https://ai-sdk.dev/elements/api/registry/example-schema-display-body.json

Schema Display Nested Example block

Example implementation of schema display-nested.

npx shadcn@latest add https://ai-sdk.dev/elements/api/registry/example-schema-display-nested.json

Schema Display Params Example block

Example implementation of schema display-params.

npx shadcn@latest add https://ai-sdk.dev/elements/api/registry/example-schema-display-params.json

Schema Display Example block

Example implementation of schema display.

npx shadcn@latest add https://ai-sdk.dev/elements/api/registry/example-schema-display.json

Shimmer Duration Example block

Example implementation of shimmer duration.

npx shadcn@latest add https://ai-sdk.dev/elements/api/registry/example-shimmer-duration.json

Shimmer Elements Example block

Example implementation of shimmer elements.

npx shadcn@latest add https://ai-sdk.dev/elements/api/registry/example-shimmer-elements.json

Shimmer Example block

Example implementation of shimmer.

npx shadcn@latest add https://ai-sdk.dev/elements/api/registry/example-shimmer.json

Snippet Plain Example block

Example implementation of snippet plain.

npx shadcn@latest add https://ai-sdk.dev/elements/api/registry/example-snippet-plain.json

Snippet Example block

Example implementation of snippet.

npx shadcn@latest add https://ai-sdk.dev/elements/api/registry/example-snippet.json

Sources Custom Example block

Example implementation of sources custom.

npx shadcn@latest add https://ai-sdk.dev/elements/api/registry/example-sources-custom.json

Sources Example block

Example implementation of sources.

npx shadcn@latest add https://ai-sdk.dev/elements/api/registry/example-sources.json

Speech Input Example block

Example implementation of speech input.

npx shadcn@latest add https://ai-sdk.dev/elements/api/registry/example-speech-input.json

Stack Trace Collapsed Example block

Example implementation of stack trace-collapsed.

npx shadcn@latest add https://ai-sdk.dev/elements/api/registry/example-stack-trace-collapsed.json

Stack Trace No Internal Example block

Example implementation of stack trace-no-internal.

npx shadcn@latest add https://ai-sdk.dev/elements/api/registry/example-stack-trace-no-internal.json

Stack Trace Example block

Example implementation of stack trace.

npx shadcn@latest add https://ai-sdk.dev/elements/api/registry/example-stack-trace.json

Suggestion Input Example block

Example implementation of suggestion input.

npx shadcn@latest add https://ai-sdk.dev/elements/api/registry/example-suggestion-input.json

Suggestion Example block

Example implementation of suggestion.

npx shadcn@latest add https://ai-sdk.dev/elements/api/registry/example-suggestion.json

Task Example block

Example implementation of task.

npx shadcn@latest add https://ai-sdk.dev/elements/api/registry/example-task.json

Terminal Basic Example block

Example implementation of terminal basic.

npx shadcn@latest add https://ai-sdk.dev/elements/api/registry/example-terminal-basic.json

Terminal Clear Example block

Example implementation of terminal clear.

npx shadcn@latest add https://ai-sdk.dev/elements/api/registry/example-terminal-clear.json

Terminal Streaming Example block

Example implementation of terminal streaming.

npx shadcn@latest add https://ai-sdk.dev/elements/api/registry/example-terminal-streaming.json

Terminal Example block

Example implementation of terminal.

npx shadcn@latest add https://ai-sdk.dev/elements/api/registry/example-terminal.json

Test Results Basic Example block

Example implementation of test results-basic.

npx shadcn@latest add https://ai-sdk.dev/elements/api/registry/example-test-results-basic.json

Test Results Errors Example block

Example implementation of test results-errors.

npx shadcn@latest add https://ai-sdk.dev/elements/api/registry/example-test-results-errors.json

Test Results Suites Example block

Example implementation of test results-suites.

npx shadcn@latest add https://ai-sdk.dev/elements/api/registry/example-test-results-suites.json

Test Results Example block

Example implementation of test results.

npx shadcn@latest add https://ai-sdk.dev/elements/api/registry/example-test-results.json

Tool Input Available Example block

Example implementation of tool input-available.

npx shadcn@latest add https://ai-sdk.dev/elements/api/registry/example-tool-input-available.json

Tool Input Streaming Example block

Example implementation of tool input-streaming.

npx shadcn@latest add https://ai-sdk.dev/elements/api/registry/example-tool-input-streaming.json

Tool Output Available Example block

Example implementation of tool output-available.

npx shadcn@latest add https://ai-sdk.dev/elements/api/registry/example-tool-output-available.json

Tool Output Error Example block

Example implementation of tool output-error.

npx shadcn@latest add https://ai-sdk.dev/elements/api/registry/example-tool-output-error.json

Tool Example block

Example implementation of tool.

npx shadcn@latest add https://ai-sdk.dev/elements/api/registry/example-tool.json

Transcription Example block

Example implementation of transcription.

npx shadcn@latest add https://ai-sdk.dev/elements/api/registry/example-transcription.json

V0 Clone Example block

Example implementation of v0 clone.

npx shadcn@latest add https://ai-sdk.dev/elements/api/registry/example-v0-clone.json

Voice Selector Example block

Example implementation of voice selector.

npx shadcn@latest add https://ai-sdk.dev/elements/api/registry/example-voice-selector.json

Web Preview Example block

Example implementation of web preview.

npx shadcn@latest add https://ai-sdk.dev/elements/api/registry/example-web-preview.json

Workflow Example block

Example implementation of workflow.

npx shadcn@latest add https://ai-sdk.dev/elements/api/registry/example-workflow.json