AICSS: añade componentes de conversación a tu aplicación de agentes

Pega este texto a tu agente (Claude Code, Codex, OpenCode, Hermes o el que uses) y dile «ayúdame a montarlo». Son los pasos para ponerlo en marcha; el porqué de cada pieza está en la guía completa.

• Dificultad: principiante
• Proyecto: https://github.com/kvnkld/aicss (licencia MIT)
• Guía completa: https://lab.wisd.ai/hub/aicss-agent-chat-components

Para el agente: cómo acompañar al usuario

1. Pregunta primero para qué lo quiere. Si su objetivo no necesita algún paso, sáltalo.
2. Antes de instalar, comprueba lo que ya tiene (versiones, claves, sistema operativo).
3. Avanza un paso cada vez: explica en una frase qué vas a hacer y deja que el usuario lo ejecute o lo apruebe.
4. Tras cada paso, comprueba que funcionó antes de seguir. Si falla, para y explica el error.
5. No inventes comandos ni opciones: si la documentación del proyecto contradice estos pasos, manda la documentación.
6. Al terminar, haz una prueba real con el objetivo del usuario y dile dónde profundizar.

Pasos de configuración

Para la ruta de paquete, abre la raíz de una aplicación React y comprueba que usa React y React DOM ≥18, las dependencias pares declaradas en packages/react/package.json, y que npm está disponible. La ruta alternativa del CLI requiere Node.js ≥18 y npm/npx, según su package.json.

Paso 1: elige el método

Consulta https://www.aicss.dev y escoge un componente gratuito para empezar. En React, el README documenta:

npm install @aicss/react

Paso 2: importa el componente

La importación oficial del indicador es:

import { ThinkingState } from "@aicss/react/thinking-state";

En un componente React existente, muéstralo con una condición de la aplicación:

return <div>{isThinking ? <ThinkingState /> : <p>Respuesta lista</p>}</div>;

isThinking representa tu estado real de espera. Para la primera prueba alterna su valor entre true y false en ese componente. El código oficial no declara propiedades: solo muestra «Thinking». No le pases estados de éxito o error como si los gestionara por sí mismo. En Next.js añade transpilePackages: ["@aicss/react"] a la configuración, según el README del paquete.

Paso 3: alternativa con archivos locales

Para el recorrido del CLI, los ejemplos oficiales son:

npx @aicss/cli add thinking-state
npx @aicss/cli add thinking-state --framework vue

Elige el método adecuado para el proyecto y revisa los archivos generados. No ejecutes ambos recorridos sin necesidad.

Comprobación

Fuerza en la aplicación un estado de espera y después uno de éxito o error. Comprueba que la condición muestra y oculta el indicador según el estado real y que la compilación de tu proyecto resuelve la importación.

Si algo falla

Si el CLI solicita acceso, comprueba si elegiste un componente Pro. Si falla la importación en Vue o Svelte, revisa que estés usando sus archivos del CLI y no el paquete React.

Fuente: documentación del proyecto.