Proyecto educativo — no apto para producción sin validación técnica. Leer disclaimer
OVERVIEW
Hay un momento que todo vibe coder recuerda: la primera vez que una app que construiste le responde algo inteligente a alguien. Este proyecto es ese momento.
Vas a construir un chatbot web con una personalidad completamente definida por ti — puede ser un coach de fitness que nunca para de motivarte, un chef que convierte cualquier receta en algo gourmet, o un asistente de viajes que solo recomienda destinos baratos y sorprendentes. La IA hace el trabajo pesado; tú defines quién es.
Al terminar tendrás una aplicación web deployada en Vercel, con interfaz de chat en tiempo real, historial de conversación en el navegador, y una URL que puedes compartir con cualquier persona. No es un tutorial genérico de "hola mundo" — es una app con identidad propia que refleja tu criterio creativo.
El secreto del proyecto está en el system prompt: un bloque de texto donde le dices al modelo exactamente quién es, cómo habla, qué sabe y qué límites tiene. Dominar esa técnica es la base de casi todo lo que vas a construir después en el mundo de la IA.
TECH STACK
THE PROBLEM
Cuando alguien empieza en vibe coding, el primer obstáculo no es técnico: es la parálisis de no saber por dónde empezar. Los tutoriales muestran código aislado, pero nadie te enseña a construir algo completo, desplegado, con una URL real que puedas mostrar.
Además, la mayoría de los ejemplos de "chatbot" son aburridos — un assistant genérico sin carácter. Un chatbot con personalidad es infinitamente más interesante de construir, más fácil de explicar en una entrevista, y mucho más memorable para quien lo usa.
Este proyecto resuelve los dos problemas a la vez: te da un camino claro de principio a fin, y el resultado final tiene carácter propio.
PROPOSED SOLUTION
Usuario escribe un mensaje en el frontend
El frontend envía el historial de conversación a `/api/chat`
La API route llama al LLM con el system prompt + historial
La respuesta se devuelve al frontend con streaming para que aparezca en tiempo real
MVP FEATURES
RELEASE PHASE: v0.1-ALPHA// CÓMO EJECUTARLO
PASOS SUGERIDOS
Activar el modo aprendizaje: Antes de escribir una sola línea de código, decile a tu agente de IA en qué nivel estás: "Soy principiante, nunca construí una app con IA. A medida que avancemos, explicame qué hace cada parte del código, por qué la estructuraste así, y qué alternativas existen. No quiero solo que funcione — quiero entender lo que estamos construyendo." Este paso define cómo va a trabajar contigo durante todo el proyecto.
Crear el proyecto base: Describile a tu agente qué querés construir — una app web con un chat donde el usuario escribe mensajes y un bot responde con personalidad. Pedile que sugiera qué tecnologías usar y por qué. Escuchá su razonamiento antes de aceptar. Si no entendés algún término, preguntá antes de continuar. Una vez que tengas claridad, pedile que cree el proyecto.
Conectar la IA: Decile a tu agente que necesitás conectar el proyecto a un servicio de IA para que el chatbot pueda responder. Pedile que te explique qué opciones existen, cuál recomienda para este caso y por qué, y cómo se hace de forma segura para que tu contraseña (API key) no quede expuesta. Dejá que él maneje la instalación y configuración — tu trabajo es entender qué está haciendo y por qué.
Crear el canal de comunicación: Describile al agente que necesitás un puente entre la pantalla del usuario y el servicio de IA — algo que reciba lo que escribe el usuario, se lo mande a la IA, y devuelva la respuesta. Pedile que lo construya y que te explique por qué este puente es necesario en lugar de conectar al usuario directamente con la IA.
Definir la personalidad: Antes de tocar la pantalla, escribí en papel quién es tu chatbot. Nombre, cómo habla, qué sabe, qué no haría nunca. Esto es lo más importante del proyecto — es lo que lo hace tuyo. Una vez que lo tenés claro, compartíselo al agente y pedile que lo critique y sugiera mejoras. Ese intercambio es parte del proceso.
Construir la pantalla de chat: Describile al agente cómo imaginás la interfaz: dónde escribe el usuario, cómo se ven los mensajes, cómo se diferencia lo que dice el bot de lo que dice el usuario. Cuanto más concreto seas en la descripción, mejor va a ser el resultado. No necesitás saber cómo se construye — solo saber cómo querés que se vea.
Ver las respuestas en tiempo real: Pedile al agente que las respuestas aparezcan palabra por palabra mientras se generan, en lugar de esperar a que termine. Pedile que te explique cómo funciona eso y por qué hace la experiencia mucho mejor. No necesitás entender el código — sí entender el concepto.
Pulir los detalles: Pedile al agente que agregue los detalles que hacen que una app se sienta completa: un botón para empezar una conversación nueva, una indicación de que el bot está respondiendo, y que la pantalla se mueva sola al último mensaje.
Publicar la app: Pedile al agente que te guíe para publicar la app en internet con una URL real. Decile que nunca usaste un servicio de deploy antes y que necesitás instrucciones paso a paso, incluyendo cómo configurar la contraseña de la IA de forma segura en el servidor.
Compartir: Manda la URL a alguien y mira su reacción cuando chatea con tu bot.
LO QUE VAS A APRENDER
Cómo funciona una app de IA por dentro: qué pasa desde que el usuario escribe hasta que el bot responde
Qué es un system prompt y por qué es la pieza más importante para darle carácter a un chatbot
Por qué la contraseña de la IA nunca puede estar en el código que ve el navegador — y cómo protegerla
Cómo hacer que las respuestas aparezcan en tiempo real en lugar de esperar que terminen
El ciclo completo de vibe coding: describir → generar → iterar → publicar
Cómo guardar información sensible de forma segura en un proyecto web
Cómo publicar una app en internet con una URL real, desde cero
HERRAMIENTAS
PUNTO DE PARTIDA SUGERIDO
Claude Code, Cursor o cualquier agente con soporte de proyectos
TAMBIÉN FUNCIONA CON
El método importa más que la herramienta. Elige la que ya conoces.
RECURSOS Y REFERENCIAS
- Documentación de la API de Anthropic — si usás Claude como modelo
- Documentación de la API de OpenAI — si usás GPT como modelo
- Documentación de Google AI (Gemini) — si usás Gemini como modelo
- Guía de system prompts — Anthropic — el concepto aplica igual en cualquier proveedor
- Next.js App Router — Route Handlers
- Vercel — Deploy desde GitHub
Seguridad
La contraseña de la IA (API key) está guardada de forma segura en el servidor — preguntale a tu agente si está bien configurada y pedile que te explique por qué no puede estar en el código que ve el navegador
Si alguien escribe algo muy largo o extraño en el chat, la app lo maneja sin romperse — pedile a tu agente que agregue un límite de longitud al mensaje del usuario
Si la IA no responde en un tiempo razonable, el usuario ve un mensaje de error claro, no una pantalla congelada
Rendimiento
Las respuestas del bot aparecen en tiempo real (palabra por palabra), no después de una espera larga
Si una conversación se extiende mucho, la app sigue funcionando sin ponerse lenta — pedile a tu agente que verifique que no se acumule demasiado historial
El botón de limpiar el chat funciona: después de usarlo, el bot responde como si fuera la primera vez
Arquitectura y Estructura
La personalidad del bot está definida en un solo lugar del código, no repetida en varios lados — pedile a tu agente que lo verifique
Si la IA devuelve un error (se cayó el servicio, se agotó el crédito), el usuario ve un mensaje útil, no una pantalla rota
Antes de publicar (MVP Checklist)
La API key está configurada en el servidor de deploy, no solo en tu computadora local — pedile a tu agente que te guíe para verificarlo
Confirmá que la API key no está escrita en ningún archivo de código — pedile a tu agente que haga una búsqueda rápida antes de publicar
Probá la app publicada desde otro dispositivo o navegador, no solo desde donde la desarrollaste
El bot responde con la personalidad que definiste, en el idioma correcto, no en inglés genérico
Mandá el link a alguien más y verificá que pueden usarlo sin instrucciones de tu parte
// FASES DE DESARROLLO
Fase 1 — Arrancar (30 min):
Decile a tu agente que querés construir un chatbot con personalidad y que te ayude a armar el proyecto base. No escribas nada de lógica de chat todavía — solo dejá que el proyecto exista y que la herramienta esté conectada.
Fase 2 — El cerebro del bot (1-2 horas):
Pedile al agente que construya la parte que conecta tu app con la IA. Antes de seguir, verificá que funcione enviándole un mensaje simple y recibiendo respuesta.
Fase 3 — La personalidad (1-2 horas):
Escribí en papel quién es tu chatbot antes de hablar con el agente. Este paso no es técnico — es creativo. Es lo que hace que tu proyecto sea tuyo y no uno más.
Fase 4 — La pantalla de chat (2-4 horas):
Describile al agente cómo imaginás la interfaz: cómo se ven los mensajes, dónde escribe el usuario, cómo responde el bot. Cuanto más concreto, mejor.
Fase 5 — Detalles y publicación (1-2 horas):
Pulir la experiencia y publicar la app con una URL real que puedas compartir.
¿Agente o modo chat?
Para este proyecto, modo agente (Claude Code, Cursor Agent, Copilot Workspace) es la mejor opción. El agente puede crear archivos, instalar dependencias y ejecutar el servidor local sin que cambies de contexto. Si usas m
¿TUI o editor?
Claude Code (TUI): Ideal si te sientes cómodo en la terminal. Puedes describir cada fase y dejar que el agente trabaje en el proyecto completo.
Cursor o Windsurf (IDE): Mejor si prefieres ver los archivos mientras se generan. El modo Agent de Cursor es equivalente en capacidad.
GitHub Copilot: Mejor para asistencia línea a línea que para generar el proyecto completo desde cero.
// PROMPT INICIAL SUGERIDO
Soy principiante, nunca he construido una app con IA antes.
Quiero construir {{descripción de tu idea: ej. "un chatbot web donde el usuario escribe mensajes y un bot con personalidad propia responde"}}.
El chatbot va a tener este carácter: {{describe tu bot: ej. "un coach de fitness que habla con energía y siempre termina con una frase motivadora"}}.
Antes de escribir código, hazme las preguntas que necesites para entender bien qué quiero construir. Después sugiere qué tecnologías usar y explícame cada una en lenguaje simple — qué es, para qué sirve en este proyecto, y por qué la elegiste sobre otras opciones.
A medida que construyas, explícame qué está pasando en cada paso: qué hace cada parte, por qué está ahí, y qué pasaría si no estuviera. No quiero solo que funcione — quiero entender lo que estamos construyendo.
Necesito que las respuestas del bot aparezcan en tiempo real, palabra por palabra, sin que el usuario tenga que esperar a que termine. Explícame cómo funciona eso cuando lo implementes.
La contraseña para acceder al servicio de IA nunca puede estar en el código que ve el navegador. Configúrala de forma segura y explícame por qué eso importa.
Cuando el proyecto esté listo localmente, guíame paso a paso para publicarlo en internet con una URL real. Asume que nunca he hecho esto antes.¿LISTO PARA CONSTRUIRLO?
Abre tu herramienta de Vibe Coding favorita y empieza a construir.