@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.

60 components react shadcn-cli

website ↗ github ↗ registry ↗

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

60 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