AI Elements

Erstellt KI-Chat-UIs in Next.js mit Vercels ai-elements Komponenten-Registry

Getestet · Funktioniert ★ 8.8/10

Was es kann

Leitet Claude an, KI-Chat-Interfaces (Konversationen, Nachrichten, Prompt-Eingaben, Tool-Anzeigen) mit Vercels ai-elements Komponentenbibliothek auf Basis von shadcn/ui und dem AI SDK zu erstellen. Wird ausgelöst, wenn der Benutzer einen Chatbot, eine KI-Assistenten-UI oder ein Chat-Interface in einem Next.js-Projekt wünscht. Liefert 48 pro-Komponenten-Referenzdokumente und 80 Beispielskripte, die die exakten Komponenten-APIs festlegen.

Testbericht

SKILL.md und Referenzen über raw GitHub abgerufen; Frontmatter hat gültigen name+description. references/message.md, prompt-input.md, conversation.md (alle HTTP 200) und scripts/message.tsx (200) stichprobenartig überprüft; bestätigt, dass 48 Referenzdokumente + 80 Beispielskripte existieren. Sicherheitsscan (curl|sh, base64, eingebettete Schlüssel) sauber. In ein temporäres HOME geklont und bestätigt, dass SKILL.md unter ~/.claude/skills/ai-elements/SKILL.md landet. Output-Test: nach einer Chat-Konversations-UI gefragt; Baseline (aus dem Gedächtnis) verwendete Message role=... und m.content und renderte Kinder direkt; nach dem Lesen von conversation.md/message.md verwendete das Skill-Artefakt die echte API – Message from=..., message.parts.map mit einem part.type-Schalter, MessageContent/MessageResponse-Wrapper, ConversationContent + ConversationScrollButton. Die Referenz korrigierte drei konkrete API-Fehler, die gegen die tatsächliche Bibliothek verstoßen würden, daher schlägt sie die Baseline; ich konnte die npx ai-elements CLI nicht ausführen (benötigt ein Next.js/shadcn-Projekt), brauchte sie aber nicht für die dokumentengesteuerte Ausgabe.

Getestet am: 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.

Befehle & Beispiel-Prompts

/ai-elementsErstellt KI-Chat-UIs in Next.js mit Vercels ai-elements Komponenten-Registry

Skills reagieren auf normale Anfragen — keine Slash-Befehle nötig. Nach der Installation aktivieren Prompts wie diese den Skill (auf Englisch):

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

Vollständiger Testbericht (Englisch) →