VerifiedPlugin
Deployment
vercel
Develop. Preview. Ship.
1 skill
@vercelDevelopment
Plugin
ai-elements
AI Elements is a component library built on top of shadcn/ui to help you build AI-native applications faster.
Plugin Signal68/100Solid
maintained95
capable14
documented100
adopted72
Install
$ npx -y skills add vercel/ai-elements --agent claude-code
Run the curl in your terminal, the rest in Claude Code.
Stats
2,312
Stars
265
Forks
Active
Maintenance
TypeScript
Language
9d ago
Last commit
11mo ago
Created
Repo: vercel/ai-elements
What's inside
README
1▲ AI Elements
AI Elements is a component library built on top of shadcn/ui to help you build AI-native applications faster.
Overview
AI Elements provides pre-built, customizable React components specifically designed for AI applications, including conversations, messages, code blocks, reasoning displays, and more. The CLI makes it easy to add these components to your Next.js project.
Installation
You can use the AI Elements CLI directly with npx, or install it globally:
# Use directly (recommended)
npx ai-elements@latest
# Or using shadcn cli
npx shadcn@latest add https://elements.ai-sdk.dev/api/registry/all.json
Prerequisites
Before using AI Elements, ensure your project meets these requirements:
- Node.js 18 or later
- Next.js project with AI SDK installed
- shadcn/ui initialized in your project (
npx shadcn@latest init) - Tailwind CSS configured (AI Elements supports CSS Variables mode only)
Usage
Install All Components
Install all available AI Elements components at once:
npx ai-elements@latest
This command will:
- Set up shadcn/ui if not already configured
- Install all AI Elements components to your configured components directory
- Add necessary dependencies to your project
Install Specific Components
Install individual components using the add command:
npx ai-elements@latest add <component-name>
Examples:
# Install the message component
npx ai-elements@latest add message
# Install the conversation component
npx ai-elements@latest add conversation
# Install the code-block component
npx ai-elements@latest add code-block
Alternative: Use with shadcn CLI
You can also install components using the standard shadcn/ui CLI:
# Install all components
npx shadcn@latest add https://elements.ai-sdk.dev/api/registry/all.json
# Install a specific component
npx shadcn@latest add https://elements.ai-sdk.dev/api/registry/message.json
Quick Start Example
After installing components, you can use them in your React application:
"use client";
import { useChat } from "@ai-sdk/react";
import {
Conversation,
ConversationContent,
} from "@/components/ai-elements/conversation";
import {
Message,
MessageContent,
MessageResponse,
} from "@/components/ai-elements/message";
export default function Chat() {
const { messages } = useChat();
return (
<Conversation>
<ConversationContent>
{messages.map((message, index) => (
<Message key={index} from={message.role}>
<MessageContent>
<MessageResponse>{message.content}</MessageResponse>
</MessageContent>
</Message>
))}
</ConversationContent>
</Conversation>
);
}
How It Works
The AI Elements CLI:
- Detects your package manager (npm, pnpm, yarn, or bun) automatically
- Fetches component registry from
https://elements.ai-sdk.dev/api/registry/registry.json - Installs components using the shadcn/ui CLI under the hood
- Adds dependencies and integrates with your existing shadcn/ui setup
Components are installed to your configured shadcn/ui components directory (typically @/components/ai-elements/) and become part of your codebase, allowing for full customization.
Configuration
AI Elements uses your existing shadcn/ui configuration. Components will be installed to the directory specified in your components.json file.
Recommended Setup
For the best experience, we recommend:
- AI Gateway: Set up Vercel AI Gateway and add
AI_GATEWAY_API_KEYto your.env.local - CSS Variables: Use shadcn/ui's CSS Variables mode for theming
- TypeScript: Enable TypeScript for better development experience
Contributing
If you'd like to contribute to AI Elements, please follow these steps:
- Fork the repository
- Create a new branch
- Make your changes to the components in
packages/elements. - Open a PR to the
mainbranch.
Made with ❤️ by Vercel
File tree
566vercel/ai-elementsView on GitHub
.changeset/
config.json
README.md
.claude/
CLAUDE.md
.cursor/
rules/
ultracite.mdc
.github/
CODE_OF_CONDUCT.md
CONTRIBUTING.md
dependabot.yml
SECURITY.md
workflows/
generate-skills.yml
release.yml
test.yml
.gitignore
.oxfmtrc.jsonc
.oxlintrc.json
.vscode/
settings.json
apps/
docs/
.gitignore
app/
[lang]/
(home)/
components/
centered-section.tsx
cta.tsx
hero.tsx
one-two-section.tsx
templates.tsx
text-grid-section.tsx
layout.tsx
page.tsx
components/
[[...slug]]/
page.tsx
layout.tsx
docs/
[[...slug]]/
page.tsx
layout.tsx
examples/
[[...slug]]/
page.tsx
layout.tsx
layout.tsx
llms.mdx/
[[...slug]]/
route.ts
llms.txt/
route.ts
og/
[...slug]/
background.png
geist-sans-regular.ttf
geist-sans-semibold.ttf
route.tsx
rss.xml/
route.ts
sitemap.md/
route.ts
actions/
feedback/
emotions.ts
index.ts
api/
chat/
route.ts
tools.ts
types.ts
utils.ts
registry/
[component]/
route.ts
search/
route.ts
favicon.ico
global.css
opengraph-image.png
robots.ts
sitemap.ts
styles/
geistdocs.css
components/
components.json
custom/
elements-demo.tsx
elements-installer.tsx
preview.tsx
source-code.tsx
geistdocs/
ask-ai.tsx
callout.tsx
chat.tsx
code-block-tabs.tsx
code-block.tsx
copy-chat.tsx
copy-page.tsx
desktop-menu.tsx
docs-layout.tsx
docs-page.tsx
edit-source.tsx
feedback.tsx
footer.tsx
github-button.tsx
home-layout.tsx
icons.tsx
installer.tsx
language-selector.tsx
mdx-components.tsx
mermaid.tsx
message-metadata.tsx
mobile-menu.tsx
navbar.tsx
open-in-chat.tsx
provider.tsx
rss-button.tsx
scroll-top.tsx
search.tsx
sidebar.tsx
theme-toggle.tsx
video.tsx
content/
components/
(chatbot)/
attachments.mdx
chain-of-thought.mdx
checkpoint.mdx
confirmation.mdx
context.mdx
conversation.mdx
inline-citation.mdx
message.mdx
model-selector.mdx
plan.mdx
prompt-input.mdx
queue.mdx
reasoning.mdx
shimmer.mdx
sources.mdx
suggestion.mdx
task.mdx
tool.mdx
(code)/
agent.mdx
artifact.mdx
code-block.mdx
commit.mdx
environment-variables.mdx
file-tree.mdx
jsx-preview.mdx
package-info.mdx
sandbox.mdx
schema-display.mdx
snippet.mdx
stack-trace.mdx
terminal.mdx
test-results.mdx
web-preview.mdx
(utilities)/
image.mdx
open-in-chat.mdx
(voice)/
audio-player.mdx
mic-selector.mdx
persona.mdx
speech-input.mdx
transcription.mdx
voice-selector.mdx
(workflow)/
canvas.mdx
connection.mdx
controls.mdx
edge.mdx
node.mdx
panel.mdx
toolbar.mdx
meta.json
docs/
benefits.mdx
community.mdx
how-to-contribute.mdx
index.mdx
meta.json
new-components.mdx
philosophy.mdx
setup.mdx
skill.mdx
troubleshooting.mdx
usage.mdx
vercel-ai-frontend.mdx
examples/
chatbot.mdx
ide.mdx
workflow.mdx
geistdocs.tsx
hooks/
geistdocs/
use-chat.ts
use-sidebar.ts
lib/
geistdocs/
db.ts
fonts.ts
i18n.ts
md-tracking.ts
source.ts
next.config.mjs
package.json
postcss.config.mjs
proxy.ts
source.config.ts
tsconfig.json
LICENSE
package.json
packages/
cli/
CHANGELOG.md
index.js
LICENSE
package.json
README.md
elements/
__tests__/
agent.test.tsx
artifact.test.tsx
audio-player.test.tsx
canvas.test.tsx
chain-of-thought.test.tsx
code-block.test.tsx
commit.test.tsx
confirmation.test.tsx
connection.test.tsx
context.test.tsx
controls.test.tsx
conversation.test.tsx
edge.test.tsx
environment-variables.test.tsx
file-tree.test.tsx
image.test.tsx
inline-citation.test.tsx
jsx-preview.test.tsx
message.test.tsx
mic-selector.test.tsx
model-selector.test.tsx
node.test.tsx
open-in-chat.test.tsx
package-info.test.tsx
panel.test.tsx
persona.test.tsx
plan.test.tsx
prompt-input.test.tsx
queue.test.tsx
README.md
reasoning.test.tsx
sandbox.test.tsx
schema-display.test.tsx
setup.ts
shimmer.test.tsx
snippet.test.tsx
sources.test.tsx
speech-input.test.tsx
stack-trace.test.tsx
style-mock.js
suggestion.test.tsx
task.test.tsx
terminal.test.tsx
test-results.test.tsx
tool.test.tsx
toolbar.test.tsx
transcription.test.tsx
voice-selector.test.tsx
web-preview.test.tsx
package.json
src/
agent.tsx
artifact.tsx
attachments.tsx
audio-player.tsx
canvas.tsx
chain-of-thought.tsx
checkpoint.tsx
code-block.tsx
commit.tsx
confirmation.tsx
connection.tsx
context.tsx
controls.tsx
conversation.tsx
edge.tsx
environment-variables.tsx
file-tree.tsx
image.tsx
inline-citation.tsx
jsx-preview.tsx
message.tsx
mic-selector.tsx
model-selector.tsx
node.tsx
open-in-chat.tsx
package-info.tsx
panel.tsx
persona.tsx
plan.tsx
prompt-input.tsx
queue.tsx
reasoning.tsx
sandbox.tsx
schema-display.tsx
shimmer.tsx
snippet.tsx
sources.tsx
speech-input.tsx
stack-trace.tsx
suggestion.tsx
task.tsx
terminal.tsx
test-results.tsx
tool.tsx
toolbar.tsx
transcription.tsx
voice-selector.tsx
web-preview.tsx
tsconfig.json
vitest.config.mts
examples/
package.json
src/
agent.tsx
artifact.tsx
attachments-inline.tsx
attachments-list.tsx
attachments.tsx
audio-player-remote.tsx
audio-player.tsx
chain-of-thought.tsx
chatbot.tsx
checkpoint.tsx
code-block-dark.tsx
code-block.tsx
commit.tsx
confirmation-accepted.tsx
confirmation-rejected.tsx
confirmation-request.tsx
confirmation.tsx
context.tsx
conversation.tsx
demo-chatgpt.tsx
demo-claude.tsx
demo-cursor.tsx
demo-grok.tsx
demo-workflow.tsx
environment-variables.tsx
file-tree-basic.tsx
file-tree-expanded.tsx
file-tree-selection.tsx
file-tree.tsx
image.tsx
inline-citation.tsx
jsx-preview.tsx
message.tsx
mic-selector.tsx
model-selector.tsx
open-in-chat.tsx
package-info.tsx
persona-command.tsx
persona-glint.tsx
persona-halo.tsx
persona-mana.tsx
persona-obsidian.tsx
persona-opal.tsx
plan.tsx
prompt-input-cursor.tsx
prompt-input-tooltip.tsx
prompt-input.tsx
queue-prompt-input.tsx
queue.tsx
reasoning.tsx
sandbox.tsx
schema-display-basic.tsx
schema-display-body.tsx
schema-display-nested.tsx
schema-display-params.tsx
schema-display.tsx
shimmer-duration.tsx
shimmer-elements.tsx
shimmer.tsx
snippet-plain.tsx
snippet.tsx
sources-custom.tsx
sources.tsx
speech-input.tsx
stack-trace-collapsed.tsx
stack-trace-no-internal.tsx
stack-trace.tsx
suggestion-input.tsx
... 235 moreMore Flows by @vercel.
@vercelVerifiedPlugin
Development
workflow
Workflow SDK: Build durable, reliable, and observable apps and AI Agents in TypeScript
4 skills
@vercelVerifiedPlugin
Development
next-forge
Production-grade Turborepo template for Next.js apps.
1 skill
@vercelFAQ
ai-elements is a Claude Code plugin with 1 hand-picked skill for development work, indexed on Flowy. Install it with the command on its page. It includes ai-elements. Its skills do not fire on their own yet. Request auto-invocation to have Flowy route them as you prompt. Free and open source.
- What is ai-elements?
- AI Elements is a component library built on top of shadcn/ui to help you build AI-native applications faster.
- How do I install ai-elements?
- Run these in Claude Code: npx -y skills add vercel/ai-elements --agent claude-code. Then prompt normally.
- Does ai-elements auto-invoke its skills?
- Not yet. It is indexed on Flowy as a plain plugin. Request auto-invocation on its page and Flowy will route its skills for you as you prompt.
- Is ai-elements free?
- Yes. Flowy is free and open source, with nothing gated. You can read every skill in full before you install.