# Instrucciones para el agente: 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](https://github.com/kvnkld/aicss/blob/main/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](https://github.com/kvnkld/aicss/blob/main/packages/cli/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:

```bash
npm install @aicss/react
```

### Paso 2: importa el componente

La importación oficial del indicador es:

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

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

```tsx
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](https://github.com/kvnkld/aicss/blob/main/packages/react/src/thinking-state/ThinkingState.tsx) 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:

```bash
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](https://github.com/kvnkld/aicss/blob/349ab51e83ae8d0b20907b27a9004af78621e8a3/README.md).