AI Elements

Vytváří AI chat UI v Next.js s registrem komponent ai-elements od Vercel

Otestováno · Funguje ★ 8.8/10

Co umí

Navádí Claude k vytváření AI chat rozhraní (konverzace, zprávy, vstupy promptů, zobrazení nástrojů) pomocí knihovny komponent ai-elements od Vercel na shadcn/ui a AI SDK. Spouští se, když uživatel chce chatbota, UI AI asistenta nebo chat rozhraní v projektu Next.js. Obsahuje 48 referenčních dokumentů pro jednotlivé komponenty a 80 příkladových skriptů, které přesně definují API komponent.

Testovací report

Načten SKILL.md a reference přes raw GitHub; frontmatter má platné name+description. Namátkově zkontrolovány references/message.md, prompt-input.md, conversation.md (vše HTTP 200) a scripts/message.tsx (200); potvrzeno, že existuje 48 referenčních dokumentů + 80 příkladových skriptů. Bezpečnostní sken (curl|sh, base64, vložené klíče) čistý. Klonováno do dočasného HOME a potvrzeno, že SKILL.md se nachází v ~/.claude/skills/ai-elements/SKILL.md. Test výstupu: požádáno o UI chat konverzace; základní verze (z paměti) používala Message role=... a m.content a vykreslovala potomky přímo; po přečtení conversation.md/message.md artefakt dovednosti použil skutečné API — Message from=..., message.parts.map s přepínačem part.type, MessageContent/MessageResponse wrappery, ConversationContent + ConversationScrollButton. Reference opravila tři konkrétní chyby API, které by se rozbily proti skutečné knihovně, takže překonává základní verzi; nemohl jsem spustit npx ai-elements CLI (potřebuje projekt Next.js/shadcn), ale nepotřeboval jsem ho pro výstup řízený dokumentací.

Testováno: 2026-07-21 · Claude Code 2.x (agent harness)

Instalace

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.

Příkazy a ukázkové prompty

/ai-elementsVytváří AI chat UI v Next.js s registrem komponent ai-elements od Vercel

Skilly se spouštějí běžnými požadavky — žádné příkazy k zapamatování. Po instalaci ho aktivují prompty jako tyto (anglicky):

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

Kompletní testovací report (anglicky) →