A abordagem de trabalho
AI Elements orienta um agente a adicionar componentes específicos de chat a uma aplicação Next.js existente. Abrange visualizações de conversa, conteúdo das mensagens, exibições de ferramentas e entradas de prompts. Os componentes ficam no seu repositório, permitindo que a interface siga os requisitos de estilo e interação do próprio produto.
A fonte conecta esses componentes ao AI SDK e às convenções de shadcn/ui. Seus exemplos compõem primitivas de mensagem em torno de partes de texto, em vez de tratar a resposta do assistente como um único widget opaco. Isso torna a skill útil quando a integração com o modelo já existe e a próxima tarefa é oferecer um espaço coeso para os usuários lerem e responderem.
Entregas esperadas
- Arquivos-fonte dos componentes selecionados, adicionados ao diretório de componentes configurado no projeto.
- Uma visualização de conversa em React composta por primitivas de mensagem e resposta.
- Estilos específicos do projeto e uma explicação dos problemas de integração ainda não resolvidos.
Do briefing à revisão
- 01Verifique a aplicação existente
Inspecione o executor de pacotes, a configuração do Next.js, as dependências do AI SDK e a configuração do shadcn. Confirme os aliases de importação e os estilos globais antes de adicionar componentes.
- 02Adicione as partes necessárias da interface
Use o executor de pacotes do projeto com o instalador de componentes compatível. Selecione as partes de que a conversa precisa e inspecione os arquivos adicionados ao repositório.
- 03Conecte e personalize
Mapeie o papel de cada mensagem para Message, aninhe MessageContent e renderize as partes de texto com MessageResponse, como no exemplo da fonte. Os resultados de ferramentas precisam de uma exibição própria e compatível; não se deve presumir que o exemplo voltado apenas a texto os renderize. Ajuste as classes locais de Tailwind e inspecione os estados da conversa resultante.