AI Elements skill

O Claude monta a tela do seu chatbot ou assistente de IA com peças prontas de conversa, mensagem, campo de pergunta e raciocínio, e você ajusta o visual.

por VercelPublicada pela própria empresa

instalações: 20,4 mil
estrelas no GitHub: 2.497
No skills.sh desde: janeiro de 2026
Licença: Própria

Atualizada no GitHub em 14 de outubro de 2026. Dados conferidos em 26 de outubro de 2026, no skills.sh e no GitHub.

Vercel
ai-elements
O Claude monta a tela do seu chatbot ou assistente de IA com peças prontas de conversa, mensagem, campo de pergunta e raciocínio, e você ajusta o visual.Oficial20,4 mil instalações, grátis

O que ela faz

Ensina o Claude a usar o AI Elements, biblioteca de componentes da Vercel feita sobre o shadcn/ui pra apps de IA. Ele instala cada peça pelo comando ai-elements (npx, pnpm dlx ou bunx, conforme o projeto), e o código vai pra components/ai-elements, dentro do seu projeto.

Traz a documentação de 48 componentes, como conversa, mensagem, campo de pergunta, seletor de modelo, raciocínio, fontes, citação, bloco de código, anexos, entrada por voz, terminal e pré-visualização de site. Eles funcionam junto com o useChat do AI SDK.

Como o código fica no projeto, dá pra mudar estilo e comportamento direto no arquivo. A skill ainda resolve os tropeços mais comuns: componente sem estilo, comando que não adiciona nada, tema escuro que não troca e import que não acha o módulo.

Nas palavras de quem fez

Build AI chat interfaces using ai-elements components — conversations, messages, tool displays, prompt inputs, and more. Use when the user wants to build a…

Vercel, no SKILL.md

Quando usar

Criar um chatbot pro seu site ou produto
Montar a tela de um assistente de IA interno
Mostrar o raciocínio e as fontes que a IA usou na resposta
Dar visual pronto a um chat feito com o AI SDK

Depois de instalar, é só pedir assim

Monta uma página de chat com AI Elements usando o useChat, com campo de pergunta e seletor de modelo
Adiciona o componente de fontes nas respostas do assistente
Tira o arredondado das mensagens e deixa as do usuário em verde

Segurança

Gen Agent Trust Hub, Socket e Snyk leem o código da skill atrás de comando perigoso, dado vazando e instrução escondida. Alerta não é reprovação: quer dizer que vale ler o que a skill faz antes de instalar.

Gen Agent Trust HubPassou
SocketAlerta
SnykPassou

Perguntas

Como instalar a AI Elements no Claude Code?

Toca em Levar, aqui nesta página, e deixa seu nome, e-mail e WhatsApp (é uma vez só). Aparece uma frase pronta: cola ela no Claude Code, que ele mesmo instala a AI Elements, e a skill passa a valer na próxima conversa. A mesma frase serve no Codex. Se preferir fazer na mão, o passo a passo está em como instalar skills no Claude Code.

O que o projeto precisa ter?

Node.js 18 ou mais novo, um projeto Next.js com o AI SDK instalado e o shadcn/ui, que o próprio comando instala se faltar.

Precisa de chave de API?

Pro chat responder com um modelo de IA, sim. A skill recomenda o AI Gateway da Vercel, com a chave AI_GATEWAY_API_KEY no .env.local, que dá US$ 5 de uso por mês pra testar modelos sem pegar a chave de cada provedor. Passou disso, o uso é cobrado.

Roda no Codex e no Antigravity?

Sim. A skill é texto, e os componentes entram por um comando npx comum, que qualquer agente com terminal consegue rodar.

Levar essa skill

1x ai-elementsR$ 0,00

TotalR$ 0,00

Levar precisa do JavaScript ligado. O código da skill está no GitHub: github.com/vercel/ai-elements

Aprenda a usar

Criar site com IA: o passo a passo no Claude Code
Como eu crio site com IA pros clientes sem saber programar: no Claude Code, no Codex ou de graça no Antigravity. O passo a passo, sem cara de template.