AI
Componentes vendorados da Vercel AI Elements, organizados pra montar UIs de IA — chat, agentes, fluxos.
A categoria AI importa os componentes da Vercel AI Elements para a KDS, ajustados pros nossos imports relativos e tokens semânticos. São 29 primitivos pra montar UIs de IA — chat, agentes, paletas de modelo, visualização de tool-calls, workflows visuais.
A separação em sub-categorias espelha a organização oficial da AI Elements:
Chatbot
17 primitivos pra UI de chat — Conversation, Message, PromptInput, Reasoning, Tool, Sources, Suggestion, Task...
Code
3 primitivos pra surface de código gerado — CodeBlock (com Shiki), Artifact, WebPreview.
Workflow
7 primitivos pra agent flows visuais sobre @xyflow/react — Canvas, Node, Edge, Panel...
Utilities
2 utilitários — Image (geração) e OpenInChat (deep-links pra outras IAs).
Por que vendorar
A KDS importa os componentes diretamente do registry
(https://registry.ai-sdk.dev/<name>.json) — não depende do CLI
oficial nem de um pacote npm. As razões:
- Versionamento próprio. O fornecimento é via SemVer da KDS, não do upstream — você sabe exatamente o que muda quando atualiza.
- Tokens semânticos. Cada componente foi reescrito pra usar
imports relativos (
../../forms/Buttonem vez de@/components/ui/button) e os tokens semânticos do KDS. Trocar tema funciona automaticamente. - Acessibilidade auditada. Os componentes passam pela mesma régua WCAG 2.2 AA + axe que o resto da KDS — não saem direto do upstream sem revisão.
- Chromatic regressivo. Cada componente roda nos 4 temas × light/dark no Chromatic. Mudanças visuais quebram o build.
Stack subjacente
| Layer | Provider |
|---|---|
| Streaming markdown | streamdown |
| Sticky-bottom scroll | use-stick-to-bottom |
| Code highlighting | shiki |
| Token usage | tokenlens |
| Workflow canvas | @xyflow/react |
| Animation | motion |
| AI SDK | ai + @ai-sdk/react |
O que NÃO está aqui (ainda)
A AI Elements oficial ainda não publicou alguns componentes no registry público. Quando estiverem disponíveis, importamos:
- Voice (6): AudioPlayer, MicSelector, Persona, SpeechInput, Transcription, VoiceSelector
- Code (12 faltam): Agent, Commit, EnvironmentVariables, FileTree, JsxPreview, PackageInfo, Sandbox, SchemaDisplay, Snippet, StackTrace, Terminal, TestResults
- Chatbot (1): Attachments
Como vendorar mais
A pipeline é repetível — está em
tools/ai-elements/
no monorepo, com README explicando.