AI Elements

Byg AI chat-UI'er i Next.js med Vercel's ai-elements komponentregister

Testet · Virker ★ 8.8/10

Hvad det gør

Guider Claude til at bygge AI chat-grænseflader (samtaler, beskeder, prompt-input, værktøjsvisninger) ved hjælp af Vercel's ai-elements komponentbibliotek oven på shadcn/ui og AI SDK'en. Udløses, når brugeren ønsker en chatbot, AI-assistent-UI eller chat-grænseflade i et Next.js-projekt. Leveres med 48 per-komponent referencedokumenter og 80 eksempelscripts, der fastlåser de præcise komponent-API'er.

Testrapport

Hentede SKILL.md og referencer via rå GitHub; frontmatter har gyldigt name+description. Stikprøvekontrollerede references/message.md, prompt-input.md, conversation.md (alle HTTP 200) og scripts/message.tsx (200); bekræftede, at 48 referencedokumenter + 80 eksempelscripts eksisterer. Sikkerhedsscanning (curl|sh, base64, indlejrede nøgler) ren. Klonede til en midlertidig HOME og bekræftede, at SKILL.md lander på ~/.claude/skills/ai-elements/SKILL.md. Output-test: bad om en chat-konversations-UI; baseline (fra hukommelsen) brugte Message role=... og m.content og gengav children direkte; efter at have læst conversation.md/message.md brugte skill-artefaktet den rigtige API — Message from=..., message.parts.map med en part.type switch, MessageContent/MessageResponse wrappers, ConversationContent + ConversationScrollButton. Referencen korrigerede tre konkrete API-fejl, der ville bryde mod det faktiske bibliotek, så den slår baseline; jeg kunne ikke køre npx ai-elements CLI (kræver et Next.js/shadcn-projekt), men havde ikke brug for det til det dokumentdrevne output.

Testet: 2026-07-21 · Claude Code 2.x (agent harness)

Installation

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.

Kommandoer og eksempelprompter

/ai-elementsByg AI chat-UI'er i Next.js med Vercel's ai-elements komponentregister

Skills udløses af almindelige forespørgsler — ingen kommandoer at huske. Efter installationen aktiverer prompter som disse skillen (på engelsk):

Build a chatbot UI with ai-elements components
Add a message thread to my AI assistant
Create a prompt input for this chat interface

Læs hele rapporten →