Saltar al contenido principal

Chat con IA

El chat con IA crea y modifica tu sitio web a partir de una conversación. Describe lo que quieres y la IA lee tu código, hace los cambios y actualiza el lienzo a medida que avanza.

Panel del chat con IA con una creación terminada, su resumen de actividad y el cuadro de mensaje

Abrir el chat​

  • Haz clic en Asistente de IA en la barra lateral izquierda.
  • Presiona ⌘K / Ctrl+K sin ningún elemento seleccionado.
  • Si hay un elemento seleccionado, ⌘K / Ctrl+K abre la barra Editar con IA. Elige la opción Preguntar a la IA para enviar tu solicitud al chat con ese elemento adjunto.

Enviar un mensaje​

Escribe en el cuadro Preguntar a WebTwizz y presiona Enter para enviar. Presiona Shift+Enter para insertar un salto de línea.

Mientras la IA trabaja, el botón de enviar se convierte en Detener. Haz clic para detener la ejecución y el chat mostrará Respuesta detenida.

Después de una respuesta, pueden aparecer algunas sugerencias para continuar encima del cuadro. Haz clic en una para colocarla en el cuadro y luego edítala o envíala tal como está.

Modos​

El botón de modo junto a + define cómo trabaja la IA en tu próximo mensaje.

Menú de modos con Auto, Normal, Max y Chat
ModoQué hace
AutoEl modo predeterminado. Elige el motor para cada mensaje. La creación inicial de un sitio web suele usar el motor de razonamiento más profundo, al igual que las funciones grandes y las correcciones de problemas. Los cambios cotidianos usan el motor estándar. Las preguntas simples se responden sin cambiar nada.
NormalCrea y edita tu sitio web con el motor estándar.
MaxUsa el motor de razonamiento más profundo en cada mensaje. Analiza más a fondo, resuelve creaciones grandes y errores difíciles, y usa más créditos que Normal.
ChatConversa y planifica. La IA lee tu código, toma capturas de pantalla, busca errores y consulta la web, pero no puede cambiar tu sitio web. Las respuestas de Chat usan menos créditos que la creación.

Solo pagas por el motor que se haya usado. Por eso, un mensaje en Auto que use el motor estándar cuesta la tarifa estándar.

En el modo Chat, cuando hayas acordado un plan, cambia a Auto, Normal o Max y pídele a la IA que lo cree. El modo que elijas se recuerda para cada sitio web en tu navegador. El cuadro de instrucciones del panel ofrece Auto, Normal y Max para la creación inicial de un sitio web.

Habilidades, MCP y modos: escribe /​

Escribe / en el cuadro para ver opciones que orientan tu mensaje. Sigue escribiendo para filtrar y presiona Enter o haz clic para elegir.

Menú / con habilidades, servidores MCP y Añadir un servidor MCP
  • Habilidades: instrucciones reutilizables para un tipo de tarea, como crear un panel o mejorar textos. Una habilidad aparece en tu mensaje como una etiqueta y puedes adjuntar hasta 4. Guardar como habilidad convierte lo que pediste en este chat en una nueva habilidad. Consulta Habilidades.
  • MCP: cada servidor MCP o aplicación conectado a este sitio web. Abre uno para ver sus herramientas y elige una para indicarle a la IA que la use en este mensaje. Añadir un servidor MCP abre la pantalla para conectar uno mediante su enlace.
  • Este mensaje: Chat responde solo a este mensaje sin cambiar nada y Max lo procesa con el motor de razonamiento más profundo. El modo para el resto del chat no cambia.
  • Memoria: Recordar guarda una nota que la IA conserva en todos los chats de este sitio web. Escribe la nota después de /remember y presiona Enter. Olvidar elimina una nota.
Herramientas de Notion en el menú /: Buscar, Obtener, Crear páginas y Actualizar página

Las acciones del sitio web, como publicar, deshacer y abrir el historial de versiones, tienen sus propios atajos de teclado.

Menciones: escribe @​

Escribe @ para señalarle algo a la IA y que sepa exactamente a qué te refieres. Sigue escribiendo para buscar en todo a la vez. Lo que elijas aparece en tu mensaje como una etiqueta, igual que una habilidad. Elimina la etiqueta para quitarlo.

Mensaje en el cuadro del chat con Stripe y Notion como etiquetas Menú @ con los servicios conectados primero y las páginas después
Puedes mencionarQué hace la IA con ello
Un servicio conectado, como Stripe o NotionUsa ese servicio para tu solicitud
Una sección de esta página o una páginaTrabaja en esa parte del sitio web
Una tabla de datosConsulta sus columnas y algunas filas
Otro chat de este sitio webLee lo que se dijo y decidió allí
Una versiónConsulta cómo era el sitio web en ese momento
Algo que haya creado la IA, como un documentoLo abre
Uno de tus otros sitios webLee sus archivos sin modificarlo ni copiar nada de un sitio a otro

Las menciones se conservan en el chat. Así, si después dices «ahora haz lo mismo con su pie de página», la IA sigue sabiendo a qué te refieres. Las listas se cargan cada vez que las abres, por lo que cualquier servicio, chat o tabla que acabes de añadir ya estará disponible.

Archivos adjuntos​

Haz clic en + para añadir algo a tu mensaje:

  • Subir imagen: una captura de pantalla, un diseño de referencia o una imagen, como tu logotipo, para que la IA la coloque en tu sitio web.
  • Subir archivo: código, documentos, hojas de cálculo y PDF de hasta 20MB, o un .zip de hasta 100MB.
  • Seleccionar elemento: señala algo en el lienzo (consulta más abajo).
  • Mencionar y Habilidades y MCP: los mismos menús que se abren al escribir @ y /.
Menú + con Subir imagen, Subir archivo, Seleccionar elemento, Mencionar y Habilidades y MCP

En un teléfono, + abre un panel, y Mencionar y Habilidades y MCP son la forma más rápida de acceder a ambos menús sin buscar @ y / en el teclado.

También puedes arrastrar archivos al cuadro o pegar una imagen.

Señalar un elemento​

Elige Seleccionar elemento y luego haz clic en un elemento del lienzo. Una etiqueta en el cuadro muestra el archivo y los números de línea para que la IA sepa exactamente a qué te refieres. Haz clic en × en la etiqueta para quitarla.

Mejorar y dictar​

  • El foco (Mejorar prompt) reescribe tu mensaje con más detalle antes de enviarlo.
  • El micrófono (Entrada de voz) te permite hablar en lugar de escribir. Haz clic de nuevo para detenerlo. Aparece en los navegadores que admiten entrada de voz.

Seguir el trabajo​

El lienzo se actualiza en tiempo real mientras la IA trabaja y el chat muestra lo que está haciendo en filas sencillas.

Paso de IA en curso con filas de lectura y escritura y una línea en tiempo real debajo del archivo que se está escribiendo
  • Cada paso tiene su propio panel. Mientras se ejecuta, ves filas como «Leyendo page.tsx» o «Escribiendo Hero.tsx». Cuando termina, se contrae en una línea como «Editó 3 archivos · leyó 5 archivos · ejecutó 1 comando», con las líneas añadidas y eliminadas. Haz clic en la línea para volver a abrirlo.
  • Las filas de archivos muestran Creó o Editado, el nombre del archivo y las líneas añadidas y eliminadas, como +24 -3. Mientras se escribe un archivo, su línea más reciente aparece debajo en tiempo real. Haz clic en una fila para ver los cambios.
  • Las filas de comandos indican lo que se ejecutó con palabras sencillas. Haz clic en una para ver el resultado.
  • El plan. Para tareas más grandes, la IA publica un plan y una barra encima del cuadro muestra el paso actual, como Paso 2 de 5. Haz clic en la barra para ver el plan completo.
  • La línea de estado te indica qué está pasando entre pasos, como Preparando tu proyecto... o Comprobando que todo funcione....

Cuando la IA te pregunta algo​

A veces, la IA necesita que tomes una decisión, como qué apariencia prefieres o qué servicio usar. Muestra la pregunta con opciones para elegir.

Pregunta de la IA con tres opciones, Otra cosa y ¿No tienes preferencia? Tú decides
  • Haz clic en una opción para responder.
  • Haz clic en Otra cosa para escribir tu propia respuesta.
  • Haz clic en ¿No tienes preferencia? Tú decides para dejar que la IA elija.

Aprobar acciones​

Algunas acciones esperan tu aprobación: publicar tu sitio web (¿Publicar el sitio web?), ejecutar comandos que van más allá de una compilación normal, como eliminar o mover archivos o descargar algo, hacer cambios en la base de datos que eliminen datos o tablas, y eliminar una habilidad. Una tarjeta explica lo que la IA quiere hacer. No ocurre nada hasta que haces clic en Aceptar. Haz clic en Rechazar para omitir la acción.

Tarjeta de aprobación con una descripción sencilla, el comando y los botones Rechazar y Aceptar

Las respuestas pueden incluir botones que te llevan al lugar adecuado del editor:

  • Enlaces a secciones, como Ajustes / Dominios o Página / Ajustes de Inicio, abren esa parte del editor. Un enlace al historial de versiones abre el historial de versiones.
  • Tarjetas de conexión, como Conectar Resend, conectan ese servicio directamente desde el chat. Si ya conectaste una cuenta de ese servicio en otro proyecto, la tarjeta te ofrece esa cuenta. Consulta Conectores en el chat.
  • Tarjetas en tiempo real muestran las cifras de un servicio conectado, como los ingresos de Stripe o los visitantes de Google Analytics, con enlaces a Ajustes y Abrir. Las cifras provienen directamente del servicio.
  • Nombres de claves, como RESEND_API_KEY, se pueden pulsar. Haz clic en uno para abrir Secretos en esa clave, lista para que escribas el valor.
  • Conectar un origen de datos aparece cuando tu sitio web necesita una base de datos. Abre la ventana de conexión dentro del chat. Crear primero con datos de ejemplo (o Ahora no) permite que la IA continúe sin una, y puedes conectarla después desde el panel de datos.
Respuesta de la IA que enumera las claves por completar como nombres de claves en los que se puede hacer clic

Las respuestas también pueden mostrar muestras de color, código con un botón Copiar y vistas previas en tiempo real de un componente.

Imágenes y archivos​

  • Fotos de banco de imágenes: la IA puede buscar fotos de Unsplash en cualquier plan.
  • Imágenes generadas: la IA puede crear imágenes en los planes de pago. En el plan gratuito, ofrece una foto de banco de imágenes u otra alternativa.
  • Archivos para ti: la IA puede crear documentos, exportaciones de datos como CSV o JSON e imágenes para que los guardes. Aparecen como una tarjeta con Abrir, que abre el archivo en una pestaña nueva. Haz clic en ⋯ en la tarjeta, o haz clic derecho sobre ella, para Copiar enlace, Descargar, Cambiar nombre o Eliminar el archivo. Los documentos se descargan como archivos Markdown. Los archivos siguen disponibles durante 90 días después de su última actualización y puedes volver a indicárselos a la IA con @. Para descargar archivos de código necesitas un plan de pago.

Arrastra cualquier foto o imagen generada del chat al lienzo para usarla.

Lo que la IA puede hacer​

  • Crear y modificar páginas, componentes, estilos y contenido.
  • Instalar paquetes y ejecutar comandos en tu proyecto.
  • Revisar su propio trabajo: tomar capturas de pantalla, leer registros de errores y buscar problemas.
  • Buscar y leer contenido en la web.
  • Trabajar con tu base de datos conectada: crear tablas y añadir, actualizar, eliminar o consultar datos.
  • Consultar tus conectores, como los errores en Sentry o tus visitantes en Google Analytics, y pedir permiso antes de cambiar algo allí.
  • Consultar tu sitio web publicado: sus estadísticas, los errores de Registros, tus tareas y sus últimas ejecuciones, y los archivos que subieron los usuarios. Puede ejecutar una tarea una vez en la vista previa e indica los horarios en tu zona horaria.
  • Trabajar con tu cuenta de Stripe: productos, precios, enlaces de pago y códigos de descuento.
  • Crear commits, enviar y obtener cambios, crear ramas y abrir solicitudes de incorporación de cambios una vez que hayas conectado GitHub.
  • Consultar versiones guardadas anteriores de un archivo y restaurar una.
  • Leer tus otros chats del mismo sitio web cuando los mencionas.
  • Crear y actualizar tus habilidades.
  • Publicar tu sitio web después de que lo apruebes.

Sigue tus instrucciones para la IA en cada mensaje.

Lo que la IA no puede hacer​

  • Cambiar tu sitio web en modo Chat. Las herramientas de una aplicación conectada o de un servidor MCP sí pueden ejecutarse en ese modo, después de pedirte permiso.
  • Conocer tus claves secretas. Te indica el nombre de cada clave que necesita y tú escribes el valor.
  • Conectar cuentas por ti. Te muestra el botón de conexión y tú completas la conexión.
  • Generar imágenes en el plan gratuito.
  • Publicar, eliminar datos o ejecutar comandos arriesgados sin tu aprobación.

Créditos​

Cada mensaje usa créditos de tu plan. El chat te avisa cuando quedan pocos:

  • Quedan pocos créditos aparece cuando has usado el 90% de tus créditos. Consigue más créditos abre los ajustes de tu suscripción.
  • Sin créditos por hoy o Sin créditos gratis este mes significa que se agotaron los créditos gratuitos y la creación está en pausa. Seguir creando muestra los planes a los que puedes cambiar y Ver mi uso abre tu consumo.
  • Se gastaron los créditos de este mes aparece en un plan de pago. Comprar créditos te permite añadir más.
  • No te detengas aquí aparece cuando ya no te queda ningún crédito. Seguir creando muestra los planes.

Si un mensaje falla, Intentar de nuevo lo vuelve a enviar. Si una ejecución larga se detiene a mitad del proceso, Continuar la retoma. Ambas opciones indican que usan créditos. Consulta Pagos y facturación para obtener información sobre planes, créditos diarios y recargas.

Las ejecuciones continúan​

Si cierras la pestaña o recargas mientras la IA trabaja, la ejecución continúa. Cuando vuelves, el chat retoma la ejecución en curso y muestra lo que pasó mientras no estabas. Mientras hay una ejecución en curso, la pantalla permanece activa.

Los demás paneles se pausan mientras la IA trabaja para evitar que tus cambios entren en conflicto con los suyos. Se desbloquean en cuanto termina.

Historial del chat​

El encabezado del panel muestra el nombre del chat actual. Haz clic en + (Chat nuevo) para iniciar una conversación nueva o en el reloj (Historial) para ver chats anteriores.

Lista del Historial del chat con títulos y fechas de los chats

Historial del chat muestra todos los chats de este sitio web con su fecha. Haz clic en uno para continuarlo. El botón de papelera elimina el chat de inmediato, sin pedir confirmación.

Deshacer cambios de la IA​

La IA edita los archivos reales de tu proyecto y guarda su trabajo cuando termina una ejecución. Para deshacer un cambio, presiona ⌘Z / Ctrl+Z o abre el historial de versiones para volver a una versión anterior de tu sitio web. También puedes pedirle a la IA que deje algo como estaba antes.