AI Elements
Build AI chat UIs in Next.js with Vercel's ai-elements component registry
Test report
- Verdict
- Tested · Works
- Score
- Tested
- Jul 21, 2026
- Environment
- Claude Code 2.x (agent harness)
- Upstream re-checked
- Aug 10, 2026 · 5a82537
Fetched SKILL.md and references via raw GitHub; frontmatter has valid name+description. Spot-checked references/message.md, prompt-input.md, conversation.md (all HTTP 200) and scripts/message.tsx (200); confirmed 48 reference docs + 80 example scripts exist. Security scan (curl|sh, base64, embedded keys) clean. Cloned into a temp HOME and confirmed SKILL.md lands at ~/.claude/skills/ai-elements/SKILL.md. Output test: asked for a chat conversation UI; baseline (from memory) used Message role=... and m.content and rendered children directly; after reading conversation.md/message.md the skill artifact used the real API — Message from=..., message.parts.map with a part.type switch, MessageContent/MessageResponse wrappers, ConversationContent + ConversationScrollButton. The reference corrected three concrete API errors that would break against the actual library, so it beats baseline; I could not run the npx ai-elements CLI (needs a Next.js/shadcn project) but did not need it for the doc-driven output.
Scored on four weighted criteria — install, triggering, output vs. baseline, docs. How scoring works
- Installs cleanly 5/5
- Triggers reliably 5/5
- Output vs. baseline 7/10
- Docs & honesty 5/5
What AI Elements does
Guides Claude to build AI chat interfaces (conversations, messages, prompt inputs, tool displays) using Vercel's ai-elements component library on top of shadcn/ui and the AI SDK. Triggers when the user wants a chatbot, AI assistant UI, or chat interface in a Next.js project. Ships 48 per-component reference docs and 80 example scripts that pin the exact component APIs.
How to install AI Elements
git clone --depth 1 https://github.com/mxyhi/ok-skills.git /tmp/ai-elements-src
mkdir -p ~/.claude/skills
cp -R /tmp/ai-elements-src/ai-elements ~/.claude/skills/ai-elements
# SKILL.md lives in the ai-elements/ subdir; copy that dir only.
# Runtime deps (needed only when you actually scaffold components, NOT to install the skill):
# a Next.js project + AI SDK + shadcn/ui, then: npx ai-elements@latest add <component>
# (use pnpm dlx / bunx --bun to match the project's package manager)
# Optional: AI_GATEWAY_API_KEY in .env.local for Vercel AI Gateway model access.
Skills live in ~/.claude/skills/ (global) or .claude/skills/
(per-project). Restart Claude Code after installing.
Commands — how to trigger AI Elements
-
/ai-elementsBuild AI chat UIs in Next.js with Vercel's ai-elements component registry
It also activates on plain-language prompts like these:
-
Build a chatbot UI with ai-elements components -
Add a message thread to my AI assistant -
Create a prompt input for this chat interface
Frequently asked questions
- Is the AI Elements skill free?
- Yes. The skill itself is free from mxyhi/ok-skills. SkillProof publishes the install command and an independent test verdict at no cost.
- Does AI Elements work with Claude Code?
- We tested it with Claude Code 2.x (agent harness) on Jul 21, 2026. Verdict: Tested · Works. Fetched SKILL.md and references via raw GitHub; frontmatter has valid name+description. Spot-checked references/message.md, prompt-input.md, conversation.md (all HTTP 200) and scripts/message.tsx (200); confirmed 48 reference docs + 80 example scripts exist. Security scan (curl|sh, base64, embedded keys) clean. Cloned into a temp HOME and confirmed SKILL.md lands at ~/.claude/skills/ai-elements/SKILL.md. Output test: asked for a chat conversation UI; baseline (from memory) used Message role=... and m.content and rendered children directly; after reading conversation.md/message.md the skill artifact used the real API — Message from=..., message.parts.map with a part.type switch, MessageContent/MessageResponse wrappers, ConversationContent + ConversationScrollButton. The reference corrected three concrete API errors that would break against the actual library, so it beats baseline; I could not run the npx ai-elements CLI (needs a Next.js/shadcn project) but did not need it for the doc-driven output.
- What is the AI Elements SkillProof Score?
- 8.8/10 — installs cleanly 5/5, triggers reliably 5/5, output vs. baseline 7/10, docs & honesty 5/5.
- How do I install AI Elements?
- Copy the install command from this page, run it in your terminal, and restart Claude Code. Skills live in ~/.claude/skills/ (global) or .claude/skills/ inside a project.
- Can I use AI Elements with Cursor, Copilot, Gemini CLI, Codex or other AI tools?
- The SKILL.md format is native to Claude (Claude Code, Desktop, claude.ai). The instructions inside adapt to other assistants: Cursor rules, GitHub Copilot instructions, Windsurf rules, Custom GPTs, AGENTS.md for OpenAI Codex, and GEMINI.md for Google Gemini CLI — our conversion guides cover each, and the free converter on the tools page does the wrapping for you.