Lo que vas a construir
Una aplicación web de chat con inteligencia artificial, completa y funcional. Tendrás una interfaz moderna con burbujas de conversación, un input para escribir mensajes, indicador de "escribiendo...", y respuestas renderizadas en Markdown. Tu chatbot de terminal se convertirá en algo que cualquiera puede usar desde el navegador.
¿Por qué una interfaz web?
| Terminal | Web UI |
|---|---|
| Solo tú puedes usarlo | Cualquiera con el link |
| Texto plano | Diseño bonito, markdown |
| Una conversación | Múltiples chats |
| Copiar/pegar difícil | Click para copiar |
Paso 1: Elige tu API
Usa la misma API de tu chatbot anterior:
| API | Variable de entorno |
|---|---|
| Gemini | GEMINI_API_KEY |
| Claude | ANTHROPIC_API_KEY |
| OpenAI | OPENAI_API_KEY |
| Ollama | (ninguna, corre local) |
Paso 2: Pídele a una IA que genere la app
Abre Google AI Studio, ChatGPT, o Claude.
Copia y pega este prompt (cambia la API según tu elección):
Necesito una aplicación de chat con IA usando Next.js y React que:
- Use la API de Gemini (variable GEMINI_API_KEY)
- Tenga una interfaz moderna con Tailwind CSS
- Muestre el historial de mensajes en burbujas
- Tenga un input fijo en la parte inferior
- Muestre un indicador de "escribiendo..." mientras espera
- Renderice markdown en las respuestas
- Sea responsive (funcione en móvil)
Dame:
1. Los comandos para crear el proyecto
2. El código de cada archivo
3. Cómo ejecutarlo
💡 Tip: Si prefieres otra API, cambia "Gemini" por "Claude", "OpenAI", u "Ollama".
Paso 3: Sigue las instrucciones
La IA te dará algo como:
npx create-next-app@latest my-chat --typescript --tailwind
cd my-chat
npm install @google/generative-ai react-markdown
Luego te dará el código para varios archivos. Créalos en tu editor.
Paso 4: Configura tu API key
# macOS/Linux
export GEMINI_API_KEY="tu-key-aqui"
# Windows PowerShell
$env:GEMINI_API_KEY="tu-key-aqui"
Paso 5: Ejecuta la app
npm run dev
¿Funcionó?
Deberías ver algo así:
- Input para escribir mensajes
- Burbujas de chat (tú vs IA)
- Respuestas con formato markdown
Si algo falló
| Error | Causa | Solución |
|---|---|---|
Module not found | Falta dependencia | Ejecuta npm install de nuevo |
API key not valid | Key mal configurada | Verifica el export en la misma terminal |
| Pantalla en blanco | Error de React | Revisa la consola del navegador (F12) |
CORS error | Llamada desde frontend | La API debe estar en una ruta API de Next.js |
| No renderiza markdown | Falta react-markdown | npm install react-markdown |
| Styles no funcionan | Tailwind mal configurado | Verifica tailwind.config.js |
Mejoras opcionales
Vuelve a pedirle a la IA:
- "Agrega un botón para copiar las respuestas"
- "Agrega modo oscuro"
- "Guarda el historial en localStorage"
- "Agrega un selector de modelo"
Cada mejora es un prompt nuevo. La IA actualiza el código.
Arquitectura básica
my-chat/
├── app/
│ ├── page.tsx # UI del chat
│ └── api/
│ └── chat/
│ └── route.ts # Endpoint que habla con la IA
├── components/
│ └── ChatMessage.tsx # Componente de burbuja
└── package.json
💡 Importante: Las llamadas a la API deben hacerse desde el servidor (route.ts), no desde el cliente. Así proteges tu API key.
¿Qué aprendiste?
| Antes (Terminal) | Ahora (Web) |
|---|---|
readline de Node | Componentes React |
console.log | Renderizado de UI |
| Proceso local | Servidor web |
El flujo sigue siendo:
- Usuario escribe
- App envía a la API
- API responde
- App muestra la respuesta
Próximo paso
→ Chat IA Público con Auth — Ponlo en internet con login