Generare widget di app MCP con gli strumenti di generazione del codice di intelligenza artificiale

[Questo argomento fa parte della documentazione non definitiva, pertanto è soggetto a modifiche.]

Questo articolo spiega come utilizzare strumenti di generazione del codice basati sull'intelligenza artificiale, come GitHub Copilot CLI o Claude Code, per generare app MCP (Protocollo di Contesto Modello Interattivo) da usare con i tuoi strumenti MCP per Power Apps basati su modello. Le app MCP sono file HTML autonomi che eseguono il rendering visivo dell'output JSON di uno strumento come schede, grafici, dashboard o mappe all'interno di qualsiasi host compatibile con MCP Apps, incluso Microsoft 365 Copilot, Claude e Visual Studio Code.

Se si dispone di uno strumento MCP che restituisce dati JSON, la generate-mcp-app-ui competenza può produrre un widget con riconoscimento del tema lucido che visualizza i dati in un formato visivo compatto direttamente all'interno di una conversazione di chat.

Operazioni che è possibile eseguire con la competenza generate-mcp-app-ui

• Creare widget visivi per qualsiasi strumento MCP descrivendo gli elementi desiderati e incollando l'output JSON dello strumento.
• Scegliere l'oggetto visivo appropriato per i dati, ad esempio grafici per tendenze numeriche, schede per record strutturati, tabelle per confronti, mappe per le coordinate e così via.
• Supportare automaticamente i temi chiari e scuri tramite i token di progettazione dell'interfaccia utente Fluent.
• Aggiungere interattività in modo che i widget possano chiamare di nuovo lo strumento in fase di esecuzione (ad esempio, un pulsante di aggiornamento).
• Perfezionare l'esperienza utente in modo iterativo descrivendo le modifiche nel linguaggio naturale. Ad esempio, "rendere compatta la raccolta", "aggiungere un grafico" o "usare un layout di scheda".

Prerequisiti

Requisiti software

Requisiti aggiuntivi

• Strumento MCP che restituisce l'output JSON. Il tipo di output dello strumento deve essere impostato su JSON.
• Connessione Internet funzionante. I widget caricano l'interfaccia utente Fluent e altre librerie dalla rete per la distribuzione di contenuti (CDN) in fase di esecuzione.

Installare il plug-in

Eseguire il comando di installazione seguente dall'interfaccia della riga di comando di GitHub Copilot o da Claude Code. Il programma di installazione rileva automaticamente gli strumenti disponibili e installa tutti i plug-in di Power Platform, incluso generate-mcp-app-ui.

/plugin marketplace add microsoft/power-platform-skills

Per installare solo la skill del widget dell'app MCP:

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

Panoramica delle competenze

La competenza viene attivata anche da frasi in linguaggio naturale, ad esempio "creare un widget", "creare un widget per lo strumento" o "creare un'app MCP".

Generare un widget

Seguire questa procedura per creare un nuovo widget per uno strumento MCP.

1. Creare e testare uno strumento personalizzato dai progettisti di app basate su modello e copiare l'output JSON completo. Assicurarsi che il tipo di output dello strumento sia impostato su JSON. Altre informazioni: Creare strumenti personalizzati

2. Invoca la skill e descrivi cosa vuoi visualizzare, incolla l'output JSON nella conversazione:

   /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. Esaminare il file HTML generato. La funzionalità scrive un file HTML autonomo, ad esempio flight-map.html, nella directory di lavoro.

4. Anteprima in un browser. Aprire il file HTML localmente poiché il widget ha un'opzione di fallback per il test. È possibile chiedere all'agente di chat di aggiungere l'anteprima HTML autonoma, se mancante.

5. Esegui l'iterazione. Descrivere le modifiche direttamente nella chat:

   • "Ingrandire la mappa"
   • "Aggiungere suggerimenti per gli strumenti nel grafico"
   • "Ridurre l'altezza e adattarsi a 250 pixel con layout reattivo e senza barre di scorrimento"

Implementare il widget

Quando il widget è pronto, copia il file HTML nell'input UX per lo strumento corrispondente e verrà generato come risposta dell'interfaccia utente dello strumento. Per informazioni dettagliate, vedere la documentazione relativa alla creazione di strumenti personalizzati .

Aggiungere interattività con callServerTool

Se si specifica anche il nome dello strumento quando si richiama la competenza, il widget generato può includere l'integrazione interattiva delle chiamate agli strumenti. In questo modo il widget può chiamare di nuovo lo strumento in fase di esecuzione. Ad esempio, un pulsante di aggiornamento nell'esperienza utente dello strumento può auto-invocarsi.

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

L'abilità collega app.callServerTool al widget in modo che quando gli utenti selezionano Aggiorna, il widget recupera i dati aggiornati direttamente dal tuo strumento. Se non si specifica un nome dello strumento, il widget è di sola lettura ed esegue il rendering solo dei dati recapitati tramite il ontoolresult callback.

• Chat di Microsoft 365 Copilot: Consulta le applicazioni MCP in Copilot Chat per i percorsi di distribuzione, inclusi il sideloading per i test, la distribuzione tramite l'interfaccia di amministrazione di Microsoft 365 per l'uso all'interno dell'organizzazione e la pubblicazione nell'archivio di agenti di Microsoft 365.
• Agenti dichiarativi di Power Apps: vedere la documentazione dell'agente dichiarativo MCP di Power Apps per informazioni su come connettere gli strumenti MCP con app basate su modello.
• Altri host MCP: consulta la documentazione dell'host per il processo di registrazione del widget delle applicazioni MCP.

Dettagli tecnici del widget

Protocollo delle app MCP

I widget comunicano con l'host di chat usando la App classe del @modelcontextprotocol/ext-apps pacchetto. Il protocollo gestisce questi callback e metodi.

Importazioni della rete CDN

I widget caricano tutte le dipendenze dalla rete CDN. Non è necessario alcun passaggio di compilazione o installazione locale. Le dipendenze sono disponibili in due formati:

• Moduli ECMAScript (ESM) - importati all'interno <script type="module"> usando un URL che termina con /+esm

• Universal Module Definition (UMD) - caricato tramite un tag normale <script src> ; si registra a livello globale come effetto collaterale

  Libreria	Formato	URL	Scopo
  @modelcontextprotocol/ext-apps	ESM	cdn.jsdelivr.net/npm/@modelcontextprotocol/ext-apps/+esm	Classe MCP App app
  @fluentui/tokens	ESM	cdn.jsdelivr.net/npm/@fluentui/tokens/+esm	webLightTheme / webDarkTheme set di token
  @fluentui/web-components@beta	UMD	unpkg.com/@fluentui/web-components@beta/dist/web-components.min.js	Elementi personalizzati dell'interfaccia utente Fluent

Stati di visualizzazione

Ogni widget gestisce tre stati:

Componenti dell'interfaccia utente Fluent

I seguenti componenti Web dell'interfaccia utente Fluent sono disponibili nei widget:

<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>

Supporto per i temi

I widget supportano temi chiari e scuri tramite token di progettazione dell'interfaccia utente Fluent. Il widget applica i valori del token corretti quando il tema dell'host cambia tramite onhostcontextchanged. Utilizzare sempre variabili token, ad esempio var(--colorNeutralForeground1), anziché valori di colore codificati per garantire il rendering corretto per entrambi i temi.

Token di colore

Non usare mai valori esadecimali o RGB hardcoded. Non inventare nomi di token non elencati qui.

Procedure consigliate

• Fornire dati di test reali. L'abilità analizza la struttura JSON effettiva per selezionare l'oggetto visivo corretto. I dati fittizi producono widget che si interrompono quando si è connessi allo strumento reale.
• Specificare l'elemento visivo. Descrivere il formato desiderato, ad esempio mappa, grafico, tabella o layout scheda. Descrizioni vaghe portano a risultati generici.
• Iniziare con una sola visualizzazione. I widget sono schede di conversazione compatta, non applicazioni complete. Nessuna scheda, spostamento di pagina o barre di ricerca che duplicano l'input della chat.
• Eseguire il test con entrambi i temi. Anteprima in modalità chiara e scura per verificare il contrasto e la leggibilità.
• Associare l'oggetto visivo ai dati. Mappe per coordinate, grafici per dati numerici o di tendenza, card per record strutturati, tabelle per confronti.

Limitazioni

• I widget devono caricare tutte le librerie esterne dalla rete CDN. In fase di esecuzione è necessaria una connessione Internet.
• La modalità di visualizzazione a schermo intero richiede un'implementazione aggiuntiva oltre a quella generata dalla competenza.
• La funzionalità non supporta la registrazione o la distribuzione del server MCP nel Centro di amministrazione di Microsoft 365. È necessario completare questi passaggi separatamente.
• L'autenticazione (OAuth 2.1, Microsoft Entra SSO) viene gestita dall'ambiente host MCP, non dal widget HTML stesso.

Documentazione correlata

Documentazione per sviluppatori di Microsoft 365

• App MCP ora disponibili in Copilot Chat
• Microsoft 365 Agents Toolkit

Documentazione di Power Platform

• Creare e modificare pagine generative con gli strumenti di generazione del codice di intelligenza artificiale
• Informazioni di riferimento per l'interfaccia della riga di comando di Power Platform

Riferimenti esterni

• Specifica del protocollo MCP (Model Context Protocol)
• Componenti Web dell'interfaccia utente Fluent
• Repository delle competenze di Power Platform