Gerar widgets de aplicativo MCP com ferramentas de geração de código de IA

[Este tópico faz parte da documentação de pré-lançamento e está sujeito a alterações.]

Este artigo explica como usar ferramentas de geração de código de IA, como o GitHub Copilot CLI ou o Claude Code, para gerar aplicativos de PROTOCOLO MCP (protocolo de contexto de modelo interativo) interativos para suas ferramentas MCP orientadas por modelos do Power Apps. Os aplicativos MCP são arquivos HTML independentes que renderizam visualmente a saída JSON de uma ferramenta como cartões, gráficos, dashboards ou mapas dentro de qualquer host compatível com aplicativos MCP, incluindo Microsoft 365 Copilot, Claude e Visual Studio Code.

Se você tiver uma ferramenta MCP que retorna dados JSON, a generate-mcp-app-ui habilidade poderá produzir um widget polido e com reconhecimento de tema que exibe esses dados em um formato visual compacto diretamente dentro de uma conversa de chat.

O que você pode fazer com o recurso generate-mcp-app-ui

• Crie widgets visuais para qualquer ferramenta MCP descrevendo o que você deseja e colando a saída JSON da ferramenta.
• Escolha o visual certo para seus dados, como gráficos para tendências numéricas, cartões para registros estruturados, tabelas para comparações, mapas para coordenadas e assim por diante.
• Ofereça suporte a temas claros e escuros automaticamente por meio de tokens de design do Fluent UI.
• Adicione interatividade para que os widgets possam chamar sua ferramenta novamente em runtime (por exemplo, um botão de atualização).
• Refinar o UX iterativamente descrevendo as alterações na linguagem natural. Por exemplo, "torne a galeria compacta", "adicione um gráfico" ou "use um layout de cartão".

Pré-requisitos

Requisitos de software

Requisitos adicionais

• Uma ferramenta MCP que retorna a saída JSON. O tipo de saída da ferramenta deve ser definido como JSON.
• Uma conexão de Internet em funcionamento. Os widgets carregam o Fluent UI e outras bibliotecas da CDN (Rede de Distribuição de Conteúdo) em tempo de execução.

Instalar o plug-in

Execute o comando do instalador a seguir na CLI do GitHub Copilot ou no Claude Code. O instalador detecta automaticamente as ferramentas disponíveis e instala todos os plug-ins do Power Platform, incluindo generate-mcp-app-ui.

/plugin marketplace add microsoft/power-platform-skills

Para instalar apenas a habilidade de widget do aplicativo MCP:

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

Visão geral de habilidades

A habilidade também é disparada por frases em linguagem natural, como "criar um widget", "criar um widget para minha ferramenta" ou "criar um aplicativo MCP".

Gerar um widget

Siga estas etapas para criar um novo widget para uma ferramenta MCP.

1. Crie e teste uma ferramenta personalizada de designers de aplicativos controlados por modelos e copie a saída JSON completa. Verifique se o tipo de saída da ferramenta está definido como JSON. Mais informações: Criar ferramentas personalizadas

2. Invoque a habilidade e descreva o que você deseja exibir, colando a saída JSON na conversa:

   /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. Examine o arquivo HTML gerado. A habilidade grava um arquivo HTML autocontido, por exemplo, flight-map.html, no diretório de trabalho.

4. Visualização em um navegador. Abra o arquivo HTML localmente, pois o widget tem a opção de fallback para teste. Você pode pedir ao agente de chat para adicionar uma visualização HTML autônoma se estiver ausente.

5. Iterar. Descreva as alterações diretamente no chat:

   • "Tornar o mapa maior"
   • "Adicionar dicas de ferramenta no gráfico"
   • Abaixe a altura e ajuste para 250 pixels com layout responsivo e sem barras de rolagem

Implantar seu widget

Depois que o widget estiver pronto, copie o arquivo HTML para a entrada UX da ferramenta correspondente e ele será retornado como a resposta da interface do usuário da ferramenta. Consulte a documentação de criar ferramentas personalizadas para obter detalhes.

Adicionar interatividade com callServerTool

Se você também fornecer o nome da ferramenta ao invocar a habilidade, o widget gerado poderá incluir integração interativa de chamada de ferramenta. Isso permite que o widget chame sua ferramenta novamente em runtime. Por exemplo, um botão de atualização na UX da ferramenta pode chamar a si mesmo.

/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":[...]}

A habilidade conecta app.callServerTool no widget para que, quando os usuários selecionem Atualizar, o widget busque dados atualizados diretamente da sua ferramenta. Se você não fornecer um nome de ferramenta, o widget será apenas leitura e renderizará apenas os dados entregues por meio do retorno de chamada ontoolresult.

• Chat do Microsoft 365 Copilot: consulte aplicativos MCP no Copilot Chat para ver os caminhos de implantação, incluindo sideloading para teste, implantação por meio do centro de administração do Microsoft 365 para uso organizacional e publicação na loja de agentes do Microsoft 365.
• Agentes declarativos do Power Apps: consulte a documentação do agente declarativo do MCP do Power Apps para saber como conectar ferramentas MCP a aplicativos controlados por modelos.
• Outros hosts de MCP: consulte a documentação do seu host para obter o processo de registro de widget de aplicativos do MCP.

Detalhes técnicos do widget

Protocolo de aplicativos MCP

Os widgets se comunicam com o host de chat usando a App classe do @modelcontextprotocol/ext-apps pacote. O protocolo gerencia esses callbacks e métodos.

Importações de CDN

Os widgets carregam todas as dependências da CDN. Nenhuma etapa de build ou instalação local é necessária. As dependências vêm em dois formatos:

• Módulos ECMAScript (ESM) – importados dentro <script type="module"> usando uma URL que termina em /+esm

• Definição de Módulo Universal (UMD) – carregada por meio de uma marca simples <script src>, registra-se globalmente como um efeito colateral

  Biblioteca	Formatar	URL	Finalidade
  @modelcontextprotocol/ext-apps	ESM	cdn.jsdelivr.net/npm/@modelcontextprotocol/ext-apps/+esm	Classe de aplicativos App de 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 do Fluent UI

Estados visuais

Cada widget manipula três estados:

Componentes Fluent UI

Os seguintes componentes web do Fluent UI estão disponíveis em 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>

Suporte ao tema

Os widgets dão suporte a temas claros e escuros por meio de tokens de design da Fluent UI. O widget aplica os valores de token corretos quando o tema do host é alterado por meio do onhostcontextchanged. Sempre use variáveis de token, por exemplo, var(--colorNeutralForeground1)em vez de valores de cores codificados para garantir a renderização correta em ambos os temas.

Tokens de cor

Nunca use valores hexidecimal ou RGB codificados. Não invente nomes de token não listados aqui.

Práticas Recomendadas

• Forneça dados de teste reais. A função analisa a estrutura JSON real para selecionar a visualização correta. Dados simulados geram widgets que quebram quando conectados à ferramenta real.
• Seja específico sobre o visual. Descreva o formato desejado, como mapa, gráfico, tabela ou layout de cartão. Descrições vagas levam a resultados genéricos.
• Comece com uma visualização. Os widgets são cartões de conversa compactos, não aplicativos completos. Sem guias, navegação de páginas ou barras de pesquisa que dupliquem a entrada do chat.
• Teste com os dois temas. Visualizar no modo claro e escuro para verificar o contraste e a legibilidade.
• Corresponda o visual aos dados. Mapas para coordenadas, gráficos para dados numéricos ou de tendência, cartões para registros estruturados, tabelas para comparações.

Limitações

• Os widgets devem carregar todas as bibliotecas externas da CDN. Uma conexão com a Internet é necessária em runtime.
• O modo de exibição de tela inteira requer implementação adicional além do que a habilidade gera.
• A habilidade não lida com o registro ou implantação do servidor MCP no Centro de administração do Microsoft 365. Você deve concluir essas etapas separadamente.
• A autenticação (OAuth 2.1, Microsoft Entra SSO) é tratada pelo ambiente de host do MCP, não pelo widget HTML em si.

Documentação relacionada

Documentação do desenvolvedor do Microsoft 365

• Aplicativos MCP agora disponíveis no Copilot Chat
• Toolkit de Agentes do Microsoft 365

Documentação do Power Platform

• Criar e editar páginas gerativas com ferramentas de geração de código de IA
• Referência da CLI do Power Platform

Referências externas

• Especificação do Protocolo de Contexto de Modelo (MCP)
• Componentes web da interface do usuário fluentes
• Repositório de habilidades do Power Platform