Primeros pasos: tu primer widget de MCP Apps

#La respuesta corta

Para crear un widget de MCP Apps sin código en Widgetry: entra con Google, pulsa Usar plantilla en una de las 13 plantillas de la galería, ajusta sus datos de ejemplo en el editor mientras la vista previa te lo enseña como lo pintará el chat, escribe una descripción para el agente y pulsa Publicar. El widget pasa a ser una tool show_<slug> en el endpoint MCP de Widgetry. Conecta ese endpoint a tu agente, o enlaza el widget desde tu propio servidor MCP, y pide lo que quieres ver.

El tablero de arriba es una de esas plantillas, funcionando en vivo. El resto de la guía recorre cada paso con ese mismo tablero.

#Paso 1: entra con Google

Ve a Entrar y pulsa Continuar con Google. No hay cuenta ni contraseña aparte. La primera vez que entras, Widgetry crea una organización personal con tu nombre: ahí viven tus widgets, tus diseños y tus claves de API. Si alguien te ha invitado a su organización y has aceptado, cambias de una a otra desde el menú de la cabecera cuando quieras.

Al entrar llegas a Widgets, la lista de widgets de tu organización. Al principio está vacía.

#Paso 2: elige plantilla y diseño

Pulsa Nuevo widget, o baja hasta Nuevo widget desde una plantilla. La galería enseña cada tipo de widget funcionando con datos de ejemplo:

• Filtra por tipo con Todas, Datos, Tarjetas, Animadas, SVG y 3D.
• Elige un diseño en el menú Diseño de la galería. Hay 20 de serie, más los que haya creado tu organización, y cada tipo funciona con cualquier diseño.

Puedes ver las mismas plantillas sin entrar en Plantillas.

Cuando una te encaje, pulsa Usar plantilla. Widgetry copia la plantilla en un widget nuevo de tu organización, en borrador, y abre el editor. La copia es tuya: puedes cambiarla entera, la plantilla no cambia nunca después y tus cambios tampoco vuelven a ella. Para esta guía, usa Tablero con el diseño que quieras.

#Paso 3: edita el widget

El editor tiene dos mitades: a la izquierda las partes del widget, en seis pestañas, y a la derecha la vista previa. Los cambios se guardan solos; la cabecera dice Guardado, Sin guardar o Guardando.

#Datos y esquema: lo que rellena el modelo

Empieza por Datos. Cambia el título del tablero, renombra una columna, añade una tarjeta. La vista previa se actualiza mientras escribes. Es la forma más rápida de ver si el widget sirve para lo que quieres enseñar.

La pestaña Esquema es la otra mitad de la misma idea. Es un JSON Schema con "type": "object" en la raíz y se convierte en el esquema de entrada de la tool del widget. En una conversación de verdad, el modelo lo lee, reúne los datos (de ti, de otras tools, de ficheros) y llama a la tool con un objeto que lo cumple. El widget nunca va a buscar datos por su cuenta. Si añades un campo al markup, añádelo también al esquema, con su description, para que el modelo sepa que tiene que mandarlo.

Mientras el widget es un borrador, el editor acepta JSON roto o datos que no cumplen el esquema, así que puedes editar sin miedo. Los problemas salen en una lista bajo el editor, y un punto rojo marca la pestaña Datos o Esquema.

#Plantilla, estilos y script: cómo se ve

No necesitas estas pestañas para tener un widget que funcione, pero están abiertas del todo.

• Plantilla es Liquid: {{ title }} pinta un dato y {% for %} repite. Los valores se escapan por defecto, porque los datos los escribe un modelo. Los elementos pueden declarar acciones del host sin JavaScript: data-wg-message manda un mensaje al chat, data-wg-link abre un enlace y data-wg-tool con data-wg-args llama a una tool del servidor. Cada tarjeta del tablero manda un mensaje al pulsarla; en el editor, un aviso te dice qué mandaría.
• Estilos solo lee los tokens --wg-* y la clase .wg-panel, así que el widget sigue el diseño que elijas. Para afinar un diseño concreto, escribe reglas bajo :root[data-design="…"].
• Script es para lo que el markup no alcanza: temporizadores, canvas, WebGL, animación con línea de tiempo. Se registra con widgetry.onRender y solo puede importar librerías de un catálogo cerrado (three.js, GSAP, d3 y Chart.js), que marcas en Librerías del script, dentro de Ajustes. Se cargan desde jsDelivr con la versión fijada, y el widget declara ese origen en su CSP.

#Ajustes: nombre, descripción y dominios de las imágenes

En Ajustes, lo que más importa es la Descripción para el agente. El modelo la lee para decidir cuándo usar el widget, así que di qué enseña y para qué datos sirve. Las plantillas traen una, en inglés; reescríbela para tu caso.

Si tus datos traen fotos de otra web, pon el origen de esa web en Dominios de las imágenes, uno por línea (por ejemplo https://images.example.com), hasta diez. Los hosts bloquean las imágenes de cualquier dominio que el widget no declare, y la vista previa también, así que una foto que se ve aquí se verá en el chat.

#La vista previa es un host de verdad

La vista previa no es una maqueta. Carga el mismo documento del widget que carga un host de chat y habla con él el protocolo de MCP Apps, dentro de un turno de conversación: tu petición, la llamada a la tool (Ha usado show_tablero) y el widget. Cambia entre Claro y Oscuro para revisar los dos temas, y cambia el diseño en Diseño del widget sin salir del editor. Ver o duplicar este diseño lo abre en el diseñador.

#Paso 4: publica

Pulsa Publicar en la cabecera. Publicar comprueba tres cosas:

1. Que el esquema de datos es válido.
2. Que los datos de ejemplo lo cumplen.
3. Que el widget tiene descripción.

Si algo falla, el editor dice No se puede publicar: corrige lo que está marcado abajo. y lo enumera.

Una vez publicado, el widget forma parte del endpoint MCP de tu organización como una tool llamada show_<slug> (el slug sale del nombre de la plantilla al crear el widget y no cambia aunque lo renombres; el tablero queda como show_tablero), con su recurso ui://. Desde ese momento, Widgetry rechaza cualquier cambio que rompa el esquema o los datos, para que la tool viva no se rompa en mitad de una conversación. Retirar la quita del endpoint.

#Paso 5: llévalo al chat

Debajo de la vista previa, el editor enseña las dos salidas.

#Pruébalo en el endpoint MCP de Widgetry

La forma más rápida de ver el widget en una conversación de verdad es conectar el endpoint de Widgetry, https://widgets.gonzaloverdugo.com/mcp, como conector o servidor MCP en tu agente. Los chats que conectan con OAuth (claude.ai, ChatGPT y otros) te mandan a Widgetry para entrar y elegir la organización; los agentes de código (Claude Code, Codex y otros) usan una clave de API en la cabecera Authorization: Bearer. Cada widget publicado aparece como una tool; los borradores no. Después pide lo que quieres ver, por ejemplo "enséñame mis tareas abiertas en un tablero", y el agente reúne los datos y te enseña el widget. La configuración de cada cliente está en Conecta Widgetry a tu agente.

#Enlázalo desde tu propio servidor MCP

Llévatelo a tu servidor MCP es la salida principal: el widget funciona junto a tus propias tools y tus datos. Tiene dos modos:

• Enlazar a Widgetry: tu servidor lee el widget publicado de su URL viva con una clave de lectura (la crea un propietario en Ajustes), así que lo que publiques después le llega sin desplegar.
• Descargar los ficheros: te llevas <slug>.html y <slug>.widget.json, y tu servidor no depende de Widgetry.

Cada modo enseña el comando de instalación y el código de registro con el SDK oficial de MCP Apps, listos para copiar. Cómo añadir una interfaz a tu servidor MCP explica ese código línea a línea.

#Trabajar en equipo

Los widgets, los diseños y las claves son de una organización, y una persona puede estar en varias. Cada miembro tiene un papel:

Para invitar a alguien, un propietario abre Ajustes, Invitaciones, escribe su email de Google, elige el papel y pulsa Invitar. Widgetry todavía no manda correos: copia el enlace que aparece y envíalo tú. Caduca en siete días y solo lo puede aceptar la cuenta de Google de ese email.

Las claves de API están en Ajustes, Claves de API. Las crean los propietarios, con permiso de Lectura o de Lectura y escritura; la clave se enseña una sola vez, así que cópiala en ese momento. Una clave de lectura sirve el endpoint MCP y los widgets enlazados. Una de escritura deja además que un agente o un script cree, edite y publique widgets. Para abrir otra organización, usa Nueva organización en la misma página.

#Siguientes pasos

• Dale a tus widgets un aspecto propio: Crea tu propio diseño.
• Deja que tu agente edite por ti con las tools MCP de Widgetry: Crear widgets de MCP Apps con un agente de IA.
• Repasa todos los tipos de widget con sus datos de ejemplo: Plantillas.