Ai Elements
Install and compose AI Elements React components for chat, streaming, tool calls, and reasoning UI on top of the Vercel AI SDK.
Overview
ai-elements is an agent skill for the Build phase that guides installation and use of Vercel AI Elements React components for chat, streaming, and tool-call interfaces.
Install
npx skills add https://github.com/vercel-labs/vercel-plugin --skill ai-elementsWhat is this skill?
- Pre-built React primitives for chat UIs, tool-call rendering, streaming responses, and reasoning panels
- Built on shadcn/ui patterns with npx ai-elements and registry add flows from elements.ai-sdk.dev
- Path and import patterns for @ai-sdk/react, ai package, and @/components/ai-elements/*
- Documented links to AI SDK tool-calling and chatbot UI docs plus sitemap discovery
- High metadata priority (5) for automatic activation when repo matches AI chat file patterns
- Metadata priority 5 for path-based auto-activation
Adoption & trust: 62 installs on skills.sh; 187 GitHub stars; 3/3 security scanners passed (skills.sh audits).
What problem does it solve?
You are building an AI chat surface in React and keep reimplementing messages, streams, and tool cards without a shared component vocabulary.
Who is it for?
Solo builders on Next.js or React who want shadcn-style AI chat, tool rendering, and reasoning panels with the AI SDK.
Skip if: Non-React stacks, MCP App HTML widgets, or teams that only need a one-off static landing page with no agent UI.
When should I use this skill?
Building chat UIs, message displays, tool call rendering, streaming responses, reasoning panels, or any AI-native interface with the AI SDK.
What do I get? / Deliverables
Your agent adds or fixes AI Elements components wired to @ai-sdk/react patterns so the chat UI matches Vercel’s documented AI SDK UI approach.
- AI Elements component files under components/ai-elements or src equivalent
- Wired chat and tool UI matching SDK docs
Recommended Skills
Journey fit
How it compares
Component-library integration for React chat apps, not an MCP ext-apps HTML generator or a guidelines audit checker.
Common Questions / FAQ
Who is ai-elements for?
Indie developers building AI-facing React frontends with Vercel AI SDK who want ready-made chat and tool UI blocks.
When should I use ai-elements?
In Build frontend when you add chat components, message displays, streaming responses, tool-call UI, or reasoning panels in an AI SDK project.
Is ai-elements safe to install?
Check this page’s Security Audits panel; the skill mainly guides installs and imports rather than executing arbitrary network calls itself.
SKILL.md
READMESKILL.md - Ai Elements
--- name: ai-elements description: AI Elements component library guidance — pre-built React components for AI interfaces built on shadcn/ui. Use when building chat UIs, message displays, tool call rendering, streaming responses, reasoning panels, or any AI-native interface with the AI SDK. metadata: priority: 5 docs: - "https://sdk.vercel.ai/docs/ai-sdk-ui/chatbot-with-tool-calling" sitemap: "https://sdk.vercel.ai/sitemap.xml" pathPatterns: - 'components/ai-elements/**' - 'src/components/ai-elements/**' - 'components/**/chat*' - 'components/**/*chat*' - 'components/**/message*' - 'components/**/*message*' - 'src/components/**/chat*' - 'src/components/**/*chat*' - 'src/components/**/message*' - 'src/components/**/*message*' importPatterns: - 'ai' - '@ai-sdk/*' - '@ai-sdk/react' - '@/components/ai-elements/*' bashPatterns: - '\bnpx\s+ai-elements\b' - '\bnpm\s+(install|i|add)\s+[^\n]*\bai-elements\b' - '\bpnpm\s+(install|i|add)\s+[^\n]*\bai-elements\b' - '\bbun\s+(install|i|add)\s+[^\n]*\bai-elements\b' - '\byarn\s+add\s+[^\n]*\bai-elements\b' - '\bnpx\s+shadcn@latest\s+add\s+[^\n]*elements\.ai-sdk\.dev\b' - '\bnpm\s+(install|i|add)\s+[^\n]*\b@ai-sdk/react\b' - '\bpnpm\s+(install|i|add)\s+[^\n]*\b@ai-sdk/react\b' - '\bbun\s+(install|i|add)\s+[^\n]*\b@ai-sdk/react\b' - '\byarn\s+add\s+[^\n]*\b@ai-sdk/react\b' promptSignals: phrases: - "ai elements" - "ai components" - "chat components" - "chat ui" - "chat interface" - "voice elements" - "code elements" - "voice agent" - "speech input" - "transcription component" - "code editor component" - "streaming markdown" - "streaming ui" - "streaming response" - "markdown formatting" allOf: - [message, component] - [conversation, component] - [markdown, stream] - [markdown, render] - [chat, ui] - [chat, interface] - [stream, response] - [ai, component] anyOf: - "message component" - "conversation component" - "tool call display" - "reasoning display" - "voice conversation" - "speech to text" - "text to speech" - "mic selector" - "voice selector" - "ai code editor" - "file tree component" - "terminal component" - "stack trace component" - "test results component" - "react-markdown" - "chat ui" - "terminal" - "useChat" - "streamText" noneOf: - "vue" - "svelte" - "readme" - "markdown file" - "changelog" minScore: 6 validate: - pattern: part\.text\b message: 'You are rendering AI message text as raw strings — use <MessageResponse> from @/components/ai-elements/message to render markdown, code blocks, and rich formatting. Install with: npx shadcn@latest add https://elements.ai-sdk.dev/api/registry/message.json' severity: warn upgradeToSkill: ai-elements upgradeWhy: 'Guides migration from raw text rendering to AI Elements MessageResponse for streaming-aware markdown display.' skipIfFileContains: "ai-elements/message" - pattern: react-markdown message: 'Use <MessageResponse> from @/components/ai-elements/message instead of react-markdown — it handles streaming, code highlighting, and AI SDK message parts out of the box' severity: warn upgradeToSkill: ai-elements upgradeWhy: 'Guides migration from react-markdown to AI Elements MessageResponse with streaming, code highlighting, and math support.' skipIfFileContains: "ai-elements/message" - pattern: dangerouslySetInnerHTML message: 'Do not render AI responses with dangerouslySetInnerHTML — use <MessageResponse> from @/components/ai-elements/message for safe, styled markdown rendering' severity: error upgradeToSkill: ai-elements upgradeWhy: 'Guides migration from dangerou