AI Elements Skill from Vercel: Build AI Chat Interfaces

ai-elements (by Vercel) teaches Claude to build chat and AI assistant interfaces with the AI Elements component library on top of shadcn/ui.

Installs: 20.6K; on skills.sh
Stars: 2.5K; on GitHub
Files: 60+; besides SKILL.md
Updated: Oct 2026; last repo commit

The skill loads when you want to build a chatbot or AI-powered chat interface. It covers AI Elements, a Vercel component library built on shadcn/ui, with ready-made parts for conversations, messages, tool displays and prompt inputs. Claude adds the components to your project with the AI Elements CLI or the shadcn CLI, then uses them like any React component.

The skill folder holds 48 reference pages, one per component or group, plus 80 example .tsx files in scripts/. SKILL.md also covers customizing a component after install, styling and theme troubleshooting, and fixing "module not found" errors.

It expects a Next.js project with the AI SDK installed, Node.js 18 or later and Tailwind with shadcn/ui. SKILL.md recommends an AI Gateway key in env.local but does not require one.

Good for

Next.js developers building a chatbot or AI assistant UI with the AI SDK
shadcn/ui users who want ready-made message, prompt input and tool display components
Teams adding reasoning, sources, code blocks or voice input to a chat app

Install ai-elements

Claude Code

Copy this prompt.

Install the ai-elements skill in Claude Code. Run this command:

npx skills add https://github.com/vercel/ai-elements --skill ai-elements

Then check that it loaded and tell me how to use it.

2
Paste it into Claude Code. It shows the change and asks before running it.

Requires Node.js.

From its listing on skills.sh. Source.

What's in the skill

When it loads

Build AI chat interfaces using ai-elements components — conversations, messages, tool displays, prompt inputs, and more. Use when the user wants to build a chatbot, AI assistant UI, or any AI-powered chat interface.

Sections in SKILL.md

Prerequisites
Installing Components
Usage
Example
Extensibility
Customization
Troubleshooting
Why are my components not styled?
I ran the AI Elements CLI but nothing was added to my project
Theme switching doesn’t work — my app stays in light mode
The component imports fail with “module not found”
My AI coding assistant can't access AI Elements components
Still stuck?
Available Components

Key facts

Author: Vercel (GitHub: vercel)
Repo: vercel/ai-elements
Installs on skills.sh: 20,597 as of 2026-11-02
GitHub stars (whole repo): 2,503 as of 2026-11-02
License: Apache-2.0 (LICENSE file in the repo)
Last repo commit: 2026-10-14
Files in the skill folder: 129 files including SKILL.md
skills.sh audits: Gen Agent Trust Hub pass, Socket warn, Snyk pass

What it includes

Run npx ai-elements@latest, or the shadcn CLI
Adds the component code and any needed dependencies to your project, by default under @/components/ai-elements/. Uses your package runner (npx, pnpm dlx or bunx).
Runs code · CLI install
48 pages, from agent to web-preview
Includes conversation, message, prompt-input, tool, reasoning, sources, code-block, terminal, file-tree, model-selector and voice-selector.
Component references
80 .tsx examples in scripts/
Usage examples such as message.tsx, conversation.tsx and prompt-input.tsx. These are React example code, not shell scripts.
Example files
Render chat messages from useChat parts
Shows Message, MessageContent and MessageResponse with the AI SDK useChat hook.
Write · Message example
Edit the installed component files directly
Components live in your codebase, so you can change classes such as rounded-lg.
Write · Customization
Styling, theme, nothing added, module not found
Checks for globals.css with Tailwind 4 and shadcn base styles, project root, components.json and the @/ path alias.
Troubleshooting

From the official docs

Permissions

Medium risk

Following the skill makes Claude download components and dependencies into your project with a package-runner command, and some examples call outside APIs. Review the diff, and keep API keys on the server.

What it can do

Read your data
Create and change things
Delete things
Read-only mode

Watch out for

It installs components and packages into your app
SKILL.md tells Claude to run npx ai-elements@latest, which downloads component code and dependencies and may set up shadcn/ui. Review the changes before you commit. github.com
An example reads an OpenAI key in the browser
The speech-input.tsx example posts to the OpenAI transcription API with process.env.NEXT_PUBLIC_OPENAI_API_KEY. NEXT_PUBLIC_ variables ship to the browser, so move this call to a server route. github.com
The audio-player example fetches a remote file
audio-player.tsx contains a fetch call. Check the URL before you reuse it. github.com

Technical details

Talks to	npm / shadcn registry (via the CLI). OpenAI transcription API (speech-input example)
Scopes	your Next.js project files npm registry and the AI Elements registry

Questions

What does the ai-elements skill do?

It teaches Claude to build AI chat interfaces with the AI Elements component library: install components, compose them in React and customize them. It has reference pages for 48 components.

How do I install it in Claude Code or Codex?

Use the install box above for the skill. The skill itself then tells Claude to add the components to your project with npx ai-elements@latest, which is a separate step.

What does my project need?

SKILL.md lists Node.js 18 or later, a Next.js project with the AI SDK installed, and shadcn/ui. It says any install command sets up shadcn/ui if it is missing.

Does it need an API key?

The skill does not require one. It recommends adding AI_GATEWAY_API_KEY to env.local to use the Vercel AI Gateway instead of a key per provider, and says the Gateway gives $5 in usage per month.

Is it safe to install?

The skill folder is documentation and example code. Following it makes Claude run a package-runner command that downloads components and dependencies into your project, so review the diff. One example sends audio to OpenAI with a NEXT_PUBLIC_ key, which a browser can read, so use a server route for real apps.

Is AI Elements the same as the Vercel AI SDK?

No. The AI SDK handles models and streaming, such as the useChat hook. AI Elements is the set of UI components built on shadcn/ui that display the results.

Information

updated Nov 2, 2026

Repository: vercel/ai-elements
Folder: skills/ai-elements

vercel/ai-elements skills.sh

Sources

Docs, issue trackers and discussions this page is built from.

Show all 4

ai-elements SKILL.md · github.com
vercel/ai-elements README · github.com
ai-elements speech-input.md · github.com
ai-elements speech-input.tsx · github.com