AI Elements

Buduje interfejsy użytkownika czatu AI w Next.js z rejestrem komponentów ai-elements Vercel

Testowano · Działa ★ 8.8/10

Co robi ten skill

Prowadzi Claude'a do budowania interfejsów czatu AI (konwersacje, wiadomości, wejścia promptów, wyświetlacze narzędzi) za pomocą biblioteki komponentów ai-elements Vercel na bazie shadcn/ui i AI SDK. Uruchamia się, gdy użytkownik chce chatbota, interfejsu użytkownika asystenta AI lub interfejsu czatu w projekcie Next.js. Dostarcza 48 dokumentów referencyjnych dla każdego komponentu i 80 przykładowych skryptów, które precyzują dokładne API komponentów.

Raport z testu

Pobrano SKILL.md i odwołania przez raw GitHub; nagłówek ma prawidłowe name+description. Sprawdzono references/message.md, prompt-input.md, conversation.md (wszystkie HTTP 200) i scripts/message.tsx (200); potwierdzono istnienie 48 dokumentów referencyjnych + 80 przykładowych skryptów. Skan bezpieczeństwa (curl|sh, base64, osadzone klucze) czysty. Sklonowano do tymczasowego HOME i potwierdzono, że SKILL.md ląduje w ~/.claude/skills/ai-elements/SKILL.md. Test wyjścia: poproszono o interfejs użytkownika konwersacji czatu; bazowy (z pamięci) używał Message role=... i m.content i renderował dzieci bezpośrednio; po przeczytaniu conversation.md/message.md artefakt umiejętności użył prawdziwego API — Message from=..., message.parts.map z przełącznikiem part.type, MessageContent/MessageResponse wrappers, ConversationContent + ConversationScrollButton. Odniesienie skorygowało trzy konkretne błędy API, które zepsułyby się w stosunku do rzeczywistej biblioteki, więc przewyższa ono bazowe; nie mogłem uruchomić npx ai-elements CLI (potrzebuje projektu Next.js/shadcn), ale nie było to potrzebne do wyjścia opartego na dokumentacji.

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

Instalacja

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.

Komendy i przykładowe prompty

/ai-elementsBuduje interfejsy użytkownika czatu AI w Next.js z rejestrem komponentów ai-elements Vercel

Skille uruchamiają się na zwykłe polecenia — bez komend do zapamiętania. Po instalacji aktywują go prompty takie jak te (po angielsku):

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

Pełny raport →