¿Qué diferencia a doop de otros canvas de diseño con IA?
Doop es el único entorno donde los agentes de inteligencia artificial no generan bocetos aislados que luego importas, sino que operan como editores de carne y hueso sobre el mismo lienzo que tú. Mientras herramientas como Figma AI o Canva Magic sugieren variantes en paneles laterales, doop permite que Claude Code (o cualquier cliente MCP) cree frames, modifique HTML en tiempo real y deje comentarios pinzados a elementos específicos mientras tú observas el cursor del agente desplazándose por la pantalla. Este cambio de paradigma convierte a la IA de asistente pasivo a compañero de equipo con presencia física en el espacio de trabajo.
El proyecto, publicado en agosto de 2026 por Kevin Goedecke, cruza dos tendencias que ya habíamos identificado en nuestro hub de herramientas IA: por un lado, los agentes capaces de actuar directamente sobre interfaces visuales (como Stagehand o OpenBot); por otro, el Protocolo de Contexto de Modelo (MCP) como estándar para conectar LLMs con herramientas externas. Doop integra un servidor MCP nativo que expone el canvas como si fuera una API editable, permitiendo que cualquier modelo con soporte MCP se autentique y comience a diseñar sin que el humano escriba una línea de código de integración.
La arquitectura subyacente es notablemente limpia. Cada diseño vive en un Canvas (/c/<id>) compuesto por Frames: artboards que renderizan HTML real dentro de iframes sandboxed. Esto significa que el agente no manipula vectores abstractos, sino que escribe marcado, estilos y scripts que se ejecutan inmediatamente en un entorno aislado. La distinción es crucial: el agente puede iterar sobre componentes interactivos, revisar responsive design o depurar JavaScript visual mientras el humano supervisa el resultado en paralelo.
¿Cómo se conecta un agente IA a doop?
La conexión se realiza mediante el MCP server integrado que expone doop en el endpoint /mcp. Para vincular Claude Code, basta con ejecutar un comando en terminal: claude mcp add --transport http doop http://localhost:4300/mcp. Esto dispara el flujo OAuth estándar del protocolo: se abre una ventana del navegador, el usuario aprueba los permisos, y desde ese instante el agente opera con la misma identidad y privilegios que su dueño.
El proceso difiere radicalmente de las integraciones tradicionales por API. No necesitas generar claves de API manuales, configurar webhooks ni esperar a que el modelo termine para ver el resultado. La conexión es persistente y bidireccional: el agente recibe actualizaciones del canvas en tiempo real mediante WebSocket y puede emitir comandos que se reflejan instantáneamente en los cursores de todos los participantes humanos. Como señala la documentación oficial, "diseñas con agentes, no con prompts-y-refresco".
Además de los agentes externos, doop incluye el Doop Agent: un equipo de diseño automatizado que reside en el servidor y opera sin necesidad de cliente MCP conectado. Este agente interno se activa mediante tarjetas de trabajo en el tablero o menciones @rol en comentarios de elementos. Los roles disponibles incluyen especialistas en UX, copywriting, identidad de marca y accesibilidad, definidos en shared/agents.ts. Cuando asignas una tarea, el agente puede enrutarla secuencialmente por varios roles: primero el arquitecto de UX estructura la información, luego el redactor ajusta los textos, y finalmente el experto en accesibilidad valida el contraste de colores.
¿Qué puede hacer un agente una vez dentro del canvas?
Las capacidades operativas se dividen en tres categorías principales: creación estructural, edición en streaming y memoria de diseño. En el terreno estructural, el agente genera nuevos Frames (artboards) completos con HTML, CSS y JavaScript funcional. La edición en streaming permite que el agente modifique componentes existentes mientras el usuario observa cómo cambia el código fuente y el renderizado simultáneamente. La memoria de diseño, gestionada por el módulo server/distill.ts, analiza frames de referencia que el usuario ha marcado como ejemplares y propone reglas de estilo duraderas que todos los agentes deben seguir en futuras iteraciones.
La siguiente tabla compara las dos modalidades de agentes disponibles:
| Característica | Agente MCP externo (Claude Code, etc.) | Doop Agent (built-in) |
|---|---|---|
| Conexión requerida | Cliente MCP instalado localmente | Ninguna (funciona en servidor) |
| Coste computacional | API key del usuario | Tareas gratuitas limitadas (Anthropic) + OpenAI del usuario después |
| Velocidad de respuesta | Inmediata (streaming directo) | Cola asíncrona con estados visibles |
| Contexto de conversación | Histórico completo del chat | Limitado a tarjetas y comentarios del canvas |
| Personalización | Depende del prompt del usuario | Roles predefinidos (UX, copy, brand, accessibility) |
El agente externo es ideal para flujos exploratorios donde el diseñador mantiene un diálogo continuo con la IA ("sube el padding, ahora cambia la tipografía por una sans-serif"). El Doop Agent funciona mejor para tareas delegadas: creas una tarjeta con "diseñar landing de pricing" y vuelves más tarde a revisar tres propuestas generadas automáticamente mientras atendías otras reuniones.
¿Es doop realmente multiplayer o solo colaborativo asíncrono?
La sincronización ocurre en tiempo real sobre una única sala WebSocket. Cada participante, sea humano o agente, aparece con un cursor distintivo, un indicador de presencia y un avatar. Cuando un agente MCP está trabajando, muestra una franja de estado ("working strip") con el nombre de la tarea actual y un borde pulsante en el frame que está modificando. Los comentarios se anclan a elementos específicos del DOM, no a coordenadas generales, de modo que si el agente mueve un botón, el hilo de conversación se desplaza con él.
El sistema de permisos es granular y privado por defecto. Los canvas requieren invitación por correo electrónico para colaboradores humanos, aunque puedes activar el compartido mediante enlace. Los agentes heredan exactamente los mismos permisos que su usuario anfitrión: si tu cuenta tiene acceso de solo lectura a un canvas, tu agente MCP conectado no podrá editar aunque lo intente. Esta distinción es vital en entornos empresariales donde los agentes autónomos podrían cometer errores costosos si tuvieran privilegios elevados por defecto.
La funcionalidad de "diseño en vivo" incluye undo/redo por participante, una feed de actividad que registra cada acción (humana o automatizada) con marca temporal, y la capacidad de fijar frames como referencias permanentes. Cuando un agente genera una variante que el equipo decide conservar como patrón, puedes inmovilizar ese frame en el sidebar. El distilador posteriormente analizará esos ejemplares para extraer reglas como "todos los botones primarios usan #3B82F6 y border-radius de 0.5rem", que luego se inyectan en el contexto de todos los agentes futuros.
¿Cómo se despliega doop en producción?
El repositorio ofrece tres vías de instalación según el nivel de infraestructura disponible. Para desarrollo local, npm run dev levanta la aplicación web en el puerto 4300 y la API/WebSocket/MCP en el 4400 sin configuración adicional. Utiliza PGlite, una implementación de PostgreSQL embebida en WebAssembly, que persiste datos en ./data/pg. No necesitas Docker ni servicios externos para probar todas las funcionalidades, incluida la demostración de bienvenida donde el Doop Agent genera un diseño automáticamente.
Para entornos de producción autogestionados, el método recomendado es Docker Compose:
BETTER_AUTH_SECRET=$(openssl rand -hex 32) docker compose up -dEsto levanta el frontend, el backend y una instancia real de PostgreSQL en el puerto 4400. Alternativamente, puedes compilar la versión estática con npm run build && npm start, aunque requerirás configurar DATABASE_URL para apuntar a una base de datos Postgres persistente. La variable más crítica es ANTHROPIC_API_KEY, que habilita el Doop Agent integrado para las tareas gratuitas iniciales. Una vez agotado el límite (RESIDENT_TASK_LIMIT), los usuarios deben conectar sus propias cuentas de ChatGPT u OpenAI para que el agente continúe operando.
Para quienes prefieren no gestionar infraestructura, existe doop.design, la versión alojada por el equipo original. Los datos se mantienen privados mediante el mismo sistema de autenticación que la versión self-hosted, con la ventaja de no preocuparse por actualizaciones de seguridad ni backups.
¿Qué alternativas existen en el mercado de diseño con agentes?
La principal competencia directa es Paper.design, la herramienta cerrada que doop busca reemplazar. Paper.design ofrece una experiencia similar de canvas colaborativo con IA, pero bajo modelo SaaS cerrado sin opción de self-hosting. Figma, por su parte, integra capacidades de IA generativa (Figma AI) pero se centra en sugerencias y automatizaciones limitadas, no en agentes autónomos que editen el documento como usuarios independientes.
La siguiente tabla sitúa a doop en el panorama actual:
| Herramienta | Modelo de código | Agente autónomo | Self-hosting | Protocolo abierto |
|---|---|---|---|---|
| Doop | Open source (AGPL-3.0) | Sí (MCP + built-in) | Completo | MCP nativo |
| Paper.design | Cerrado | Sí | No | Propietario |
| Figma AI | Cerrado | No (asistencia solo) | No | Ninguno |
| Canva Magic Studio | Cerrado | No | No | Ninguno |
La ventaja competitiva de doop reside precisamente en esa combinación rara: es la única solución que permite que los agentes operen mediante un protocolo estandarizado (MCP) sobre infraestructura que tú controlas completamente. Esto resulta esencial para equipos que trabajan con datos sensibles o que necesitan auditar cada decisión de diseño tomada por un algoritmo. Como hemos explorado en análisis previos sobre cómo funcionan los agentes de IA y el Protocolo de Contexto de Modelo, la trazabilidad y el control soberano de los datos se están convirtiendo en requisitos fundamentales para la adopción empresarial de herramientas generativas.
Preguntas frecuentes
¿Necesito saber programar para usar doop con agentes IA?
No es obligatorio, aunque ayuda. Puedes utilizar el Doop Agent integrado mediante la interfaz gráfica: arrastras una tarjeta al tablero, escribes la descripción del diseño que necesitas y el agente trabaja solo. Sin embargo, para conectar agentes externos como Claude Code mediante MCP, deberás ejecutar comandos en terminal y gestionar tus propias API keys, lo que requiere cierta comodidad técnica.
¿Cuánto cuesta usar el Doop Agent después de las tareas gratuitas?
El Doop Agent utiliza la API de OpenAI (ChatGPT) con la clave que cada usuario conecta a su cuenta. El coste depende exclusivamente del uso que hagas de tokens en GPT-4 u otros modelos que configures. No hay tarifa de suscripción impuesta por doop; solo pagas por consumo directo a OpenAI según sus precios oficiales de 2026.
¿Puedo exportar los diseños generados por los agentes?
Sí. Como cada Frame renderiza HTML real dentro de un iframe sandboxed, puedes acceder al código fuente completo (HTML, CSS y JavaScript) y descargarlo como archivo único o copiarlo a tu repositorio. No hay bloqueo de formato propietario: el resultado es código web estándar editable en cualquier editor.
¿Los agentes pueden acceder a internet para buscar referencias mientras diseñan?
Depende del agente que conectes. El Doop Agent integrado no navega por la web autónomamente; trabaja con el contexto que le proporciones en el canvas y su memoria de estilos distilada. Sin embargo, si conectas Claude Code u otro cliente MCP con capacidades de navegador (como los que utilizan Stagehand), sí podrán consultar recursos externos durante la sesión de diseño.
¿Es seguro compartir un canvas con agentes si trabajo con información confidencial?
Los agentes heredan exactamente los permisos de su usuario anfitrión y no pueden escalar privilegios. Si el canvas está configurado como privado y el agente se conecta mediante tu cuenta, solo accederá a lo que tú puedes ver. En la versión self-hosted, todos los datos permanecen en tu infraestructura sin salir a servidores de terceros, salvo las llamadas necesarias a las APIs de Anthropic u OpenAI para procesar las tareas de IA.