Guía Modo Full-Stack

Crea aplicaciones web completas con edición de archivos, terminal y vista previa en vivo impulsados por IA.

¿Qué es el Modo Full-Stack?

El Modo Full-Stack transforma tu chat en un entorno de desarrollo completo. La IA puede escribir, editar y ejecutar código mientras ves los resultados en tiempo real en un IDE integrado con explorador de archivos, terminal y vista previa en vivo.

  • Operaciones de archivos impulsadas por IA (crear, editar, eliminar)
  • Terminal integrado con ejecución de comandos
  • Vista previa en vivo con tecnología WebContainer
  • Soporte de proyectos multi-archivo (React, Next.js, Vue, HTML/CSS/JS)
  • Sincronización de código en tiempo real entre IA e IDE

Características Clave

El Modo Full-Stack proporciona una experiencia de desarrollo completa:

🔧 Herramientas IA

  • write_file - Crear archivos nuevos o sobrescribir existentes
  • edit_content - Hacer ediciones precisas con buscar y reemplazar
  • read_file - Leer contenido de archivos para contexto

🖥️ IDE Integrado

  • Editor Monaco - Edición estilo VS Code con resaltado de sintaxis
  • Terminal - Terminal bash completo con historial de comandos
  • Vista Previa en Vivo - Ve tu app ejecutándose en tiempo real
  • Explorador de Archivos - Navega y gestiona archivos del proyecto

💡 Cómo Funciona

El Modo Full-Stack usa WebContainers para ejecutar Node.js directamente en tu navegador. La IA escribe código en un sistema de archivos virtual, y puedes ver los cambios instantáneamente en el panel de vista previa.

Cómo Usar el Modo Full-Stack

1. Activar el Modo Full-Stack

Haz clic en el botón Full-Stack en el área de entrada del chat para activar el modo.

2. Describe Tu Proyecto

Dile a la IA lo que quieres construir. Sé específico sobre características y tecnologías.

3. Observa a la IA Construir

La IA creará archivos, instalará dependencias y configurará la estructura de tu proyecto.

4. Itera y Refina

Solicita cambios, añade características o corrige bugs a través de conversación natural.

Plantillas Soportadas

El Modo Full-Stack soporta varias plantillas de proyecto:

⚛️ Next.js

Configuración completa de Next.js 15 con App Router, TypeScript y Tailwind CSS

⚡ Vite + React

Desarrollo rápido con Vite + React y reemplazo de módulos en caliente

🌐 HTML/CSS/JS

HTML/CSS/JavaScript simple para prototipos rápidos

📦 Node.js

Backend Node.js con Express u otros frameworks

Consejos y Mejores Prácticas

✅ Best Practices

  • Sé específico sobre tus requisitos y tecnologías preferidas
  • Deja que la IA termine una tarea antes de solicitar otra
  • Usa el terminal para ejecutar comandos personalizados cuando sea necesario
  • Revisa el panel de vista previa para ver los cambios en tiempo real
  • Solicita cambios incrementales en lugar de reescrituras completas

⚠️ Limitations

  • Los WebContainers se ejecutan en el navegador - algunas API de Node.js pueden no funcionar
  • Los proyectos grandes pueden tardar más en sincronizar y previsualizar
  • Las conexiones a bases de datos externas requieren configuración adicional
  • Se aplican límites de tamaño de archivo para el sistema de archivos virtual

Comenzando

¿Listo para construir tu primer proyecto? Prueba uno de estos prompts:

"Crea una landing page Next.js con una sección hero y tabla de precios"
"Construye una app todo React con persistencia en almacenamiento local"
"Haz un dashboard con gráficos usando Recharts"
"Crea una API REST simple con Express"

¡La IA creará automáticamente la estructura del proyecto, instalará dependencias y iniciará el servidor de desarrollo!