AI Elements

Bygg AI chat-grensesnitt i Next.js med Vercels ai-elements komponentregister

Bestått ★ 8.8/10

Hva den gjør

Veileder Claude til å bygge AI chat-grensesnitt (samtaler, meldinger, prompt-input, verktøyvisninger) ved hjelp av Vercels ai-elements komponentbibliotek på toppen av shadcn/ui og AI SDK. Utløses når brukeren ønsker en chatbot, AI-assistent-grensesnitt eller chat-grensesnitt i et Next.js-prosjekt. Inkluderer 48 per-komponent referansedokumenter og 80 eksempel-skript som spesifiserer de eksakte komponent-API-ene.

Testrapport

Hentet SKILL.md og referanser via rå GitHub; frontmatter har gyldig name+description. Sjekket references/message.md, prompt-input.md, conversation.md (alle HTTP 200) og scripts/message.tsx (200); bekreftet at 48 referansedokumenter + 80 eksempel-skript eksisterer. Sikkerhetsskanning (curl|sh, base64, innebygde nøkler) ren. Klonet til en midlertidig HOME og bekreftet at SKILL.md lander på ~/.claude/skills/ai-elements/SKILL.md. Output-test: ba om et chat-samtalegrensesnitt; baseline (fra minnet) brukte Message role=... og m.content og gjengav barn direkte; etter å ha lest conversation.md/message.md brukte ferdighetsartefakten den virkelige API-en — Message from=..., message.parts.map med en part.type switch, MessageContent/MessageResponse wrappers, ConversationContent + ConversationScrollButton. Referansen korrigerte tre konkrete API-feil som ville bryte mot det faktiske biblioteket, så den slår baseline; jeg kunne ikke kjøre npx ai-elements CLI (trenger et Next.js/shadcn-prosjekt), men trengte det ikke for den dokumentasjonsdrevne outputen.

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

Installer

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-elementsBygg AI chat-grensesnitt i Next.js med Vercels ai-elements komponentregister

Skills utløses av vanlige forespørsler — ingen kommandoer å huske. Etter installasjonen 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

Full rapport →