Generación de widgets de aplicación MCP con herramientas de generación de código de IA

[Este tema es documentación preliminar y está sujeto a modificaciones.]

En este artículo se explica cómo usar herramientas de generación de código de IA como la CLI de GitHub Copilot o Claude Code para generar aplicaciones de protocolo de contexto de modelos interactivos (MCP) para las herramientas mcP de Power Apps controladas por modelos. Las aplicaciones MCP son archivos HTML independientes que representan visualmente la salida JSON de una herramienta como tarjetas, gráficos, paneles o mapas dentro de cualquier host compatible con aplicaciones MCP, incluido Microsoft 365 Copilot, Claude y Visual Studio Code.

Si tiene una herramienta MCP que devuelve datos JSON, la generate-mcp-app-ui aptitud puede generar un widget pulido y compatible con temas que muestre esos datos en un formato visual compacto directamente dentro de una conversación de chat.

Importante

  • Esta es una característica en vista previa.
  • Las características en vista previa no se han diseñado para un uso de producción y pueden tener una funcionalidad restringida. Estas características están disponibles antes del lanzamiento oficial para que los clientes puedan tener un acceso anticipado y proporcionar comentarios.
  • La compatibilidad con aplicaciones MCP en El chat de Copilot de Microsoft 365 está disponible con carácter general a partir de marzo de 2026. La compatibilidad de Power Apps con aplicaciones MCP en agentes declarativos se encuentra actualmente en versión preliminar pública. Para obtener el anuncio completo, consulte Aplicaciones MCP ahora disponibles en Chat de Copilot.

Qué puede hacer con la capacidad generate-mcp-app-ui

  • Cree widgets visuales para cualquier herramienta MCP mediante la descripción de lo que desea y pegar la salida JSON de la herramienta.
  • Elija el objeto visual adecuado para los datos, como gráficos para tendencias numéricas, tarjetas para registros estructurados, tablas para comparaciones, mapas para coordenadas, etc.
  • Admite automáticamente temas claros y oscuros mediante tokens de diseño de Fluent UI.
  • Agregue interactividad para que los widgets puedan llamar a la herramienta de nuevo en tiempo de ejecución (por ejemplo, un botón actualizar).
  • Para refinar la experiencia de usuario de forma iterativa, describa los cambios en el lenguaje natural. Por ejemplo, "hacer que la galería sea compacta", "agregar un gráfico" o "usar un diseño de tarjeta".

Requisitos previos

Requisitos de software

Componente Versión mínima Más información
GitHub Copilot CLI, Claude Code u otra herramienta de generación de código Latest Claude Code, CLI de GitHub Copilot
Un navegador moderno Cualquiera Para obtener una vista previa de los widgets generados localmente

Requisitos adicionales

  • Una herramienta MCP que devuelve la salida JSON. El tipo de salida de la herramienta debe establecerse en JSON.
  • Una conexión a Internet en funcionamiento. Los widgets cargan Fluent UI y otras bibliotecas de la Red de Entrega de Contenidos (CDN) en tiempo de ejecución.

Instalación del complemento

Ejecute el siguiente comando del instalador desde la CLI de GitHub Copilot o Claude Code. El instalador detecta automáticamente las herramientas disponibles e instala todos los complementos de Power Platform, incluido generate-mcp-app-ui.

/plugin marketplace add microsoft/power-platform-skills

Para instalar solo la función del widget de la aplicación MCP:

/plugin install mcp-apps@power-platform-skills

Sugerencia

Active la actualización automática para recibir automáticamente actualizaciones de aptitudes. Use el /plugin comando, vaya a Marketplaces, elija Marketplace y active la actualización automática.

Resumen de habilidades

Aptitud Comando Descripción
Generador de widgets de aplicaciones MCP /generate-mcp-app-ui Generación de un widget de aplicación MCP independiente (archivo HTML) para la salida JSON de una herramienta MCP

La aptitud también se desencadena mediante frases de lenguaje natural como "crear un widget", "crear un widget para mi herramienta" o "crear una aplicación MCP".

Generación de un widget

Siga estos pasos para crear un widget para una herramienta MCP.

  1. Cree y pruebe una herramienta personalizada a partir de diseñadores de aplicaciones controladas por modelos y copie la salida JSON completa. Asegúrese de que el tipo de salida de la herramienta esté establecido en JSON. Más información: Creación de herramientas personalizadas

  2. Invoque la aptitud y describa lo que desea mostrar y pegue la salida JSON en la conversación:

    /generate-mcp-app-ui Visualizes flights using an animated arc map for routes and a synchronized Gantt timeline for departure and arrival schedules, enabling quick understanding of flight coverage, timing, and overlaps. Here's an example of the tool's output: {"flight_records":[{"Departure Time":"2024-07-02T05:00:00Z","Arrival Time":"2024-07-02T07:30:00Z","Flight Name":"Zava 1001","Status":"Active","Airport":"Seattle-Tacoma","Airport1":"Los Angeles Intl"},{"Departure Time":"2024-07-02T03:00:00Z","Arrival Time":"2024-07-02T10:00:00Z","Flight Name":"Zava 103","Status":"Active","Airport":"Seattle-Tacoma","Airport1":"Hartsfield-Jackson"}]}

  3. Revise el archivo HTML generado. La habilidad escribe un archivo HTML autocontenido, por ejemplo, flight-map.html, en el directorio de trabajo.

  4. Vista previa en un explorador. Abra el archivo HTML localmente, ya que el widget tiene la opción de respaldo para pruebas. Puede pedir al agente de chat que agregue una vista previa HTML independiente si falta.

  5. Itere. Describa los cambios directamente en el chat:

    • "Hacer que el mapa sea mayor"
    • "Agregar sugerencias de herramientas en el gráfico"
    • "Reducir el alto y ajustar en 250 píxeles, con diseño dinámico y sin barras de desplazamiento"

Nota:

La aptitud requiere JSON real de la herramienta, no datos ficticios o de ejemplo. La forma de datos controla la generación del widget. Si pega datos ficticios, es posible que el widget generado no funcione correctamente cuando está conectado a la herramienta real.

Implementación del widget

Una vez que el widget esté listo, copie el archivo HTML en la entrada UX de la herramienta correspondiente y se devolverá como respuesta de la UI de la herramienta. Consulte la documentación sobre la creación de herramientas personalizadas para obtener más información.

Agregar interactividad con callServerTool

Si también proporciona el nombre de la herramienta al invocar la función, el widget generado puede incluir una integración de llamada interactiva de herramientas. Esto permite que el widget llame nuevamente a la herramienta en tiempo de ejecución. Por ejemplo, un botón de actualización en la interfaz de usuario de la herramienta puede llamarse a sí mismo.

/generate-mcp-app-ui Show the current weather conditions with a refresh button. Tool name: get_weather. Tool output: {"city":"Seattle","temp_f":54,"condition":"Overcast","humidity":78,"forecast":[...]}

La habilidad conecta app.callServerTool en el widget para que cuando los usuarios seleccionen Actualizar, el widget obtenga los datos actualizados directamente desde tu herramienta. Si no proporciona un nombre de herramienta, el widget es de solo lectura y muestra solo los datos entregados a través del callback ontoolresult.

  • Chat de Microsoft 365 Copilot: Consulte las aplicaciones MCP en el chat de Copilot para obtener rutas de implementación, incluida la carga lateral para pruebas, la implementación a través del Centro de administración de Microsoft 365 para su uso organizativo y la publicación en la tienda de agentes de Microsoft 365.
  • Agentes declarativos de Power Apps: consulte la documentación del agente declarativo mcP de Power Apps para saber cómo conectar herramientas de MCP con aplicaciones controladas por modelos.
  • Otros hosts de MCP: consulte la documentación de su host para el proceso de registro de widgets de aplicaciones de MCP.

Detalles técnicos del widget

Protocolo de aplicaciones MCP

Los widgets se comunican con el host de chat mediante la App clase del @modelcontextprotocol/ext-apps paquete. El protocolo administra estas devoluciones de llamada y métodos.

Devolución de llamada / Método Descripción
app.ontoolresult Se desencadena cuando el host entrega los datos de la herramienta. Los datos siempre están en result.structuredContent—no result.data o result ellos mismos.
app.onhostcontextchanged Se activa cuando cambia el contexto del host, incluido el tema (ctx.theme es 'light' o 'dark').
app.onteardown Se desencadena cuando se elimina el widget de la conversación.
app.connect() Establece la comunicación con el host. Todos los controladores de eventos deben registrarse antes de llamar a connect().
app.getHostContext() Devuelve el contexto de host actual (incluido el tema inicial) una vez que connect() se ha completado.
app.callServerTool({ name, arguments }) Llama a una herramienta de forma interactiva. Devuelve result.isError y result.structuredContent.

Importaciones de CDN

Los widgets cargan todas las dependencias de la red CDN. No se requiere ningún paso de compilación o instalación local. Las dependencias tienen dos formatos:

  • Módulos ECMAScript (ESM) — importados usando una URL que termina en <script type="module">

  • Definición de módulo universal (UMD): se carga a través de una etiqueta sin formato <script src> ; se registra globalmente como efecto secundario

    Biblioteca Formato Dirección URL propósito
    @modelcontextprotocol/ext-apps ESM cdn.jsdelivr.net/npm/@modelcontextprotocol/ext-apps/+esm Clase App de aplicaciones MCP
    @fluentui/tokens ESM cdn.jsdelivr.net/npm/@fluentui/tokens/+esm webLightTheme / webDarkTheme conjuntos de tokens
    @fluentui/web-components@beta UMD unpkg.com/@fluentui/web-components@beta/dist/web-components.min.js Elementos personalizados de la interfaz de usuario de Fluent

Estados visuales

Cada widget controla tres estados:

Estado Orientación
Cargando Mostrar un <fluent-spinner> con un mensaje contextual ("Buscar atracciones..." no solo "Cargando...").
Cargado Representar el contenido de forma compacta. Utiliza todo el ancho disponible.
Error Muestra un mensaje descriptivo y un botón "Volver a intentar". Si el widget usa callServerTool, el botón vuelve a invocar la herramienta.

Componentes de la interfaz de usuario de Fluent

Los siguientes componentes web de fluent UI están disponibles en widgets:

<fluent-card>, <fluent-button>, <fluent-text-input>, <fluent-textarea>, <fluent-dropdown>, <fluent-listbox>, <fluent-option>, <fluent-checkbox>, <fluent-spinner>, <fluent-divider>, <fluent-badge>, <fluent-switch>, <fluent-tooltip>

Soporte de temas

Los widgets admiten temas claros y oscuros a través de tokens de diseño de la interfaz de usuario de Fluent. El widget aplica los valores de token correctos cuando el tema del host cambia a través de onhostcontextchanged. Use siempre variables de token, por ejemplo, var(--colorNeutralForeground1), en lugar de valores de color codificados de forma rígida para garantizar la representación correcta en ambos temas.

Tokens de color

Utilizar Token
Texto principal var(--colorNeutralForeground1)
Texto secundario var(--colorNeutralForeground2)
Fondo principal var(--colorNeutralBackground1)
Tarjeta/Mantener el puntero por el fondo var(--colorNeutralBackground2)
Marca/énfasis var(--colorBrandBackground)
Texto en la superficie de la marca var(--colorNeutralForegroundOnBrand)
Bordes var(--colorNeutralStroke1)
Texto de error var(--colorStatusDangerForeground1)
Texto de éxito var(--colorStatusSuccessForeground1)

Nunca use valores hexadecimales o RGB codificados de forma rígida. No invente los nombres de token que no aparecen aquí.

Prácticas recomendadas

  • Proporcione datos de prueba reales. La capacidad analiza la estructura JSON real para seleccionar el objeto visual correcto. Los datos ficticios generan widgets que se interrumpen cuando están conectados a la herramienta real.
  • Sea específico sobre el elemento visual. Describa el formato que desee, como el mapa, el gráfico, la tabla o el diseño de tarjeta. Las descripciones vagas conducen a resultados genéricos.
  • Comience con una vista. Los widgets son tarjetas de conversación compactas, no aplicaciones completas. No hay pestañas, navegación por páginas ni barras de búsqueda que dupliquen la entrada del chat.
  • Prueba con ambos temas. Vista previa en modo claro y oscuro para comprobar el contraste y la legibilidad.
  • Asocia el objeto visual con los datos. Mapas para coordenadas, gráficos para datos numéricos o de tendencia, tarjetas para registros estructurados, tablas para comparaciones.

Limitaciones

  • Los widgets deben cargar todas las bibliotecas externas desde la red CDN. Se requiere una conexión a Internet en tiempo de ejecución.
  • El modo de visualización de pantalla completa requiere una implementación adicional más allá de lo que genera la aptitud.
  • La habilidad no gestiona el registro ni la implementación del servidor MCP en el Centro de administración de Microsoft 365. Debe completar esos pasos por separado.
  • La autenticación (OAuth 2.1, Microsoft Entra SSO) se controla mediante el entorno host de MCP, no el propio HTML del widget.

Documentación para desarrolladores de Microsoft 365

Documentación de Power Platform

Referencias externas

  • Last updated on