Widgets interactivos en el chat (MCP Apps)

¿Qué es esto?

Cuando utilizas ComStack desde un cliente compatible con MCP Apps —Claude en web, escritorio o móvil—, varias herramientas no solo devuelven texto, sino que renderizan una tarjeta interactiva en vivo directamente en el chat. Revisar una publicación, previsualizar una página, ajustar los colores y fuentes de tu sitio o consultar el uso, todo ocurre dentro de estas tarjetas. En clientes sin soporte para MCP Apps (Claude Code CLI, llamadas mediante API-key), las herramientas devuelven su JSON estructurado habitual; nada se rompe, simplemente no obtienes la capa visual.

Cómo funciona

Una herramienta habilitada para widgets incluye una referencia de recurso de interfaz en sus metadatos. Cuando la herramienta se ejecuta, el cliente monta el widget en un marco aislado y le proporciona el resultado de la herramienta. El widget puede devolver llamadas a un conjunto limitado de herramientas de ComStack a través del cliente, siempre como tú, con tus permisos y nunca con sus propias credenciales. Cerrar un widget nunca cancela el trabajo del lado del servidor: una publicación en curso, por ejemplo, finaliza en el servidor independientemente de ello.

Los widgets son principalmente superficies de lectura y revisión. Los dos que permiten escritura —el botón Publicar del revisor y el botón Aplicar del Design Studio— solo actúan cuando haces clic en ellos, llamando a las mismas herramientas auditadas (publish-confirm, update-design) que el asistente usaría en el chat. Aprobar en el widget es equivalente a aprobar en el chat.

Los widgets

Revisión de publicación (publish): cada página pendiente con sus cambios: diferencias de texto en línea para páginas de conocimiento, un panel de detalles para cambios de metadatos (un cambio de título nunca es invisible), casillas de verificación por página para publicaciones parciales y un discreto botón de Publicar. Puedes cerrar la tarjeta mientras se publica; las páginas estarán activas en unos minutos de todos modos.
Visor de páginas (get-page-content): las páginas de conocimiento se renderizan como el documento; las páginas personalizadas se abren en una vista previa visual de la propia página, con pestañas de HTML, CSS y JS para los desarrolladores (cada pestaña muestra cambios a nivel de línea cuando hay un borrador en revisión) y un interruptor de ancho móvil en pantallas grandes.
Vista previa de carga (upload-custom-page): en el momento en que se carga un archivo, el borrador se abre en su vista previa renderizada con un resumen de las cadenas traducibles extraídas.
Progreso de publicación (publish-status): reconéctate a una publicación en curso: progreso en vivo y, al finalizar, los enlaces publicados.
Resumen del proyecto (get-project-state, list-my-projects): el enlace de tu sitio, idiomas, conteo de páginas, borradores pendientes con estado de validación y enlaces de edición, además del árbol de navegación.
Design Studio (update-design): selectores de color para tu paleta de acento, un selector de Google Fonts con vistas previas en vivo, controles de esquema de color y brillo del micrófono, y una mini vista previa en vivo de cómo se verán los botones y resaltados. Aplicar solo guarda lo que cambiaste.
Uso y crédito (get-usage-report, get-credit-balance): cargos y conteo de eventos en barras escaladas, junto con tu saldo de crédito.
Quién soy (whoami): una pequeña tarjeta de identidad que muestra al usuario conectado.

Cuándo usarlo

Quieres publicar y deseas verificar exactamente qué cambios se realizarán antes de confirmar, o publicar solo algunas de las páginas pendientes.
Quieres ver una página personalizada tal como la verán los visitantes, no como código fuente.
Estás ajustando colores o fuentes de marca y quieres iterar visualmente en lugar de describir códigos hexadecimales.
Quieres una imagen rápida de un proyecto: qué está activo, qué está en borrador y qué necesita correcciones.

Errores comunes

“Solo veo JSON / texto plano, sin tarjeta”. Tu cliente no admite MCP Apps (Claude Code CLI y los llamadores de API-key nunca renderizan widgets), o el conector es anterior al lanzamiento de los widgets: elimina y vuelve a añadir el conector de ComStack en Claude, luego inicia un nuevo chat.
“El widget dice que no pudo conectar con el host”. Un pequeño error del cliente al montar el marco; vuelve a ejecutar la llamada a la herramienta (pide al asistente que lo intente de nuevo).
“Las vistas previas de fuentes no están disponibles” en el Design Studio. El cliente bloqueó la descarga de la vista previa de la fuente. Tu elección de fuente se aplicará de todos modos: se cargará en tu sitio publicado independientemente de la vista previa.
“La tarjeta de publicación perdió el seguimiento”. El sondeo de estado fue interrumpido; la publicación continúa en el servidor. Pide al asistente publish-status para reconectarte.
Una página personalizada muestra “Esta página es un componente Astro” en lugar de una vista previa. Los componentes Astro no pueden renderizarse del lado del cliente. Abre la página en vivo o el enlace del editor; las pestañas de HTML/CSS/JS mostrarán exactamente qué cambió.