El enfoque de trabajo
AI Elements guía a un agente para añadir componentes específicos de chat a una aplicación Next.js existente. Abarca vistas de conversación, contenido de mensajes, vistas de herramientas y entradas de prompts. Los componentes se guardan en tu repositorio, por lo que la interfaz puede seguir los requisitos de estilo e interacción del propio producto.
La fuente conecta estos componentes con el AI SDK y las convenciones de shadcn/ui. Sus ejemplos combinan componentes básicos de mensajes alrededor de fragmentos de texto, en vez de tratar la respuesta del asistente como un único widget opaco. Esto hace que el Skill resulte útil cuando la integración del modelo ya existe y el siguiente paso es ofrecer una interfaz coherente donde los usuarios puedan leer y responder.
Entregables esperados
- Los archivos fuente de los componentes seleccionados, añadidos al directorio de componentes configurado en el proyecto.
- Una vista de conversación React compuesta por componentes básicos de mensajes y respuestas.
- Estilos específicos del proyecto y una explicación de los problemas de integración que sigan sin resolverse.
Del brief a la revisión
- 01Revisar la aplicación existente
Inspecciona la herramienta de ejecución de paquetes, la configuración de Next.js, las dependencias del AI SDK y la configuración de shadcn. Confirma los alias de importación y los estilos globales antes de añadir componentes.
- 02Añadir las piezas necesarias de la interfaz
Usa la herramienta de ejecución de paquetes del proyecto con el instalador de componentes compatible. Selecciona las piezas que necesita la conversación e inspecciona los archivos añadidos al repositorio.
- 03Conectar y personalizar
Asigna el rol de cada mensaje a Message, anida MessageContent y renderiza los fragmentos de texto con MessageResponse, como en el ejemplo de la fuente. Los resultados de herramientas necesitan una vista propia compatible; no debe suponerse que ese ejemplo limitado a texto también los renderiza. Ajusta las clases locales de Tailwind e inspecciona los estados de conversación resultantes.