Canvas: un panel de vista previa en vivo para todo lo que escribe un modelo

La mayoría de las herramientas de chat te entregan un bloque de código y te desean suerte. Lo copias en un editor, guardas un archivo, abres un navegador, ves que está ligeramente mal, vuelves al chat, pegas la corrección, y repites. Canvas elimina cada paso de ese bucle salvo los dos que importan: preguntar, y mirar.

Qué es Canvas

Cuando la respuesta de un modelo contiene algo renderizable, se abre un panel de vista previa junto a la conversación y lo muestra en vivo. El HTML se renderiza como una página. El SVG se renderiza como la imagen. Un bloque Mermaid se convierte en el diagrama. El Markdown se convierte en texto con formato. Ves el resultado, no el código fuente, en el momento en que el modelo termina de escribirlo.

El chat se queda a la izquierda, el artefacto renderizado a la derecha. Sigues hablando — «haz el encabezado más pequeño», «usa un fondo más oscuro», «añade un nodo para la ruta de reintento» — y la vista previa se actualiza a medida que el modelo revisa. Sin copiar, sin pegar, sin una segunda aplicación.

Donde se gana el sueldo

Unas cuantas cosas que convierte de tarea pesada en conversación:

• Secciones de landing y HTML de email. Describe una sección hero, mírala renderizarse, ajusta el espaciado y el color en lenguaje llano hasta que se vea bien. Estás iterando sobre la cosa en sí, no sobre una descripción de la cosa.
• Diagramas. Pide un diagrama de flujo de un handshake de autenticación o un diagrama de secuencia de una petición. Mermaid lo renderiza al instante, e «intercambia estos dos pasos» es una frase en lugar de un redibujado manual.
• Gráficos y SVG. Bocetos rápidos de datos, iconos, ilustraciones sencillas. Los ves a tamaño completo y los refinas hablando.
• Escritura de formato largo. El Markdown se renderiza con encabezados y estructura reales, así que estás leyendo el documento como lo leerá un lector, no entrecerrando los ojos ante asteriscos en bruto.

Funciona con el selector de modelos

Canvas no está atado a un único proveedor. Esboza una maquetación con un modelo rápido, luego ramifica la parte complicada a uno más potente — la vista previa sigue a la rama ganadora. Como el artefacto vive junto al hilo en lugar de dentro del sandbox de un modelo, cambiar de modelo no te cuesta el trabajo en curso. El renderizado simplemente se vuelve a ejecutar contra la nueva respuesta.

Ese es el mismo principio sobre el que está construido todo el studio: la cosa útil (aquí, un artefacto en vivo) pertenece a tu conversación, no al conjunto de funciones amuralladas de un único modelo.

Itera en lenguaje, llévate el código fuente

Cuando la vista previa se ve bien, el código fuente está justo ahí para llevártelo — copia el HTML, exporta el SVG, coge la definición Mermaid. Canvas no es una caja negra que solo él puede leer; es una forma más rápida de llegar a un código fuente que posees por completo. Hiciste la iteración en lenguaje llano y obtuviste una salida lista para producción al final.

Una función pequeña con un efecto desproporcionado

Canvas no añade una capacidad que los modelos no tuvieran — siempre pudieron escribir HTML. Lo que elimina es la brecha entre lo escrito y lo visto. Cerrar esa brecha cambia cómo trabajas: dejas de tratar la salida del modelo como un borrador para evaluar más tarde y empiezas a tratarla como algo que estás moldeando ahora mismo, en tiempo real, en la misma ventana. Resulta que eso es la mayor parte de lo que hace que una herramienta se sienta rápida.