MCP-app-widgets genereren met hulpprogramma's voor het genereren van AI-code

[Dit onderwerp maakt deel uit van de voorlopige documentatie en kan nog veranderen.]

In dit artikel wordt uitgelegd hoe u hulpprogramma's voor het genereren van AI-code, zoals GitHub Copilot CLI of Claude Code, kunt gebruiken om interactieve MCP-apps (Model Context Protocol) te genereren voor uw modelgestuurde Power Apps MCP-hulpprogramma's. MCP-apps zijn zelfstandige HTML-bestanden die de JSON-uitvoer van een hulpprogramma visueel weergeven als kaarten, grafieken, dashboards of kaarten in een host die compatibel is met MCP-apps, waaronder Microsoft 365 Copilot, Claude en Visual Studio Code.

Als u een MCP-hulpprogramma hebt dat JSON-gegevens retourneert, kan de generate-mcp-app-ui vaardigheid een professioneel, themabewuste widget produceren waarmee die gegevens in een compacte visuele indeling rechtstreeks in een chatgesprek worden weergegeven.

Mogelijkheden met de generate-mcp-app-ui skill

• Maak visuele widgets voor elk MCP-hulpprogramma door te beschrijven wat u wilt en de JSON-uitvoer van het hulpprogramma te plakken.
• Kies de juiste visual voor uw gegevens, zoals grafieken voor numerieke trends, kaarten voor gestructureerde records, tabellen voor vergelijkingen, kaarten voor coördinaten enzovoort.
• Ondersteuning voor lichte en donkere thema's automatisch via Fluent UI-ontwerptokens.
• Voeg interactiviteit toe zodat widgets uw hulpprogramma tijdens runtime opnieuw kunnen aanroepen (bijvoorbeeld een vernieuwingsknop).
• Verfijn de UX iteratief door wijzigingen in natuurlijke taal te beschrijven. Bijvoorbeeld 'maak de galerie compact', 'voeg een grafiek toe' of 'gebruik een kaartindeling'.

Vereiste voorwaarden

Softwarevereisten

Aanvullende vereisten

• Een MCP-hulpprogramma dat JSON-uitvoer retourneert. Het uitvoertype van het hulpprogramma moet zijn ingesteld op JSON.
• Een werkende internetverbinding. Widgets laden Fluent UI en andere bibliotheken van het CDN (Content Delivery Network) tijdens runtime.

De invoegtoepassing installeren

Voer de volgende installatieopdracht uit vanuit GitHub Copilot CLI of Claude Code. Het installatieprogramma detecteert automatisch beschikbare hulpprogramma's en installeert alle Power Platform-invoegtoepassingen, waaronder generate-mcp-app-ui.

/plugin marketplace add microsoft/power-platform-skills

Alleen de vaardigheid voor de MCP App-widget installeren:

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

Overzicht van vaardigheden

De vaardigheid wordt ook geactiveerd door woordgroepen in natuurlijke taal, zoals 'een widget maken', 'een widget maken voor mijn hulpprogramma' of 'een MCP-app maken'.

Een widget genereren

Volg deze stappen om een nieuwe widget te maken voor een MCP-hulpprogramma.

1. Maak en test een aangepast hulpprogramma van modelgestuurde app-ontwerpers en kopieer de volledige JSON-uitvoer. Zorg ervoor dat het uitvoertype van het hulpprogramma is ingesteld op JSON. Meer informatie: Aangepaste hulpprogramma's maken

2. Roep de vaardigheid aan en beschrijf wat u wilt weergeven en plak de JSON-uitvoer in het gesprek:

   /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. Controleer het gegenereerde HTML-bestand. De vaardigheid schrijft bijvoorbeeld een zelfstandig HTML-bestand flight-map.htmlnaar uw werkmap.

4. Bekijken in een browser. Open het HTML-bestand lokaal, aangezien de widget een terugvaloptie voor testen heeft. U kunt chatagent vragen om zelfstandige HTML-preview toe te voegen als deze ontbreekt.

5. Herhaal dit. Beschrijf eventuele wijzigingen rechtstreeks in de chat:

   • "De kaart groter maken"
   • Hulpmiddelentips toevoegen aan de grafiek
   • Verklein de hoogte en pas deze aan naar 250 pixels in een responsieve indeling zonder schuifbalken.

Uw widget implementeren

Wanneer uw widget klaar is, kopieert u het HTML-bestand naar de UX-invoer voor het bijbehorende hulpprogramma en wordt het geretourneerd als het UI-antwoord van het hulpprogramma. Raadpleeg de documentatie voor het maken van aangepaste hulpprogramma's voor meer informatie.

Interactiviteit toevoegen met callServerTool

Als u ook de naam van uw hulpprogramma opgeeft bij het aanroepen van de vaardigheid, kan de gegenereerde widget interactieve integratie van hulpprogramma-aanroepen bevatten. Hierdoor kan de widget uw hulpprogramma tijdens runtime opnieuw aanroepen. Een vernieuwingsknop in de UX van het hulpprogramma kan zichzelf bijvoorbeeld aanroepen.

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

De vaardigheid wordt in de widget opgeslagen app.callServerTool , zodat wanneer gebruikers Vernieuwen selecteren, de widget bijgewerkte gegevens rechtstreeks uit uw hulpprogramma ophaalt. Als u geen toolnaam opgeeft, is de widget alleen voor lezen en worden alleen de gegevens weergegeven die via de ontoolresult callback worden geleverd.

• Microsoft 365 Copilot-chat: Zie MCP-apps in Copilot Chat voor implementatiepaden, waaronder sideloaden voor testen, implementeren via het Microsoft 365-beheercentrum voor organisatiegebruik en publiceren naar de Microsoft 365-agentopslag.
• Power Apps-declaratieve agents: Zie de Power Apps MCP-declaratieve agents-documentatie voor hoe MCP-hulpprogramma's met modelgestuurde apps te verbinden.
• Andere MCP-hosts: raadpleeg de documentatie van uw host voor het registratieproces van de MCP-appswidget.

Technische details widget

Protocol voor MCP-apps

Widgets communiceren met de chathost met behulp van de App klasse van het @modelcontextprotocol/ext-apps pakket. Het protocol beheert deze callbacks en methoden.

CDN-importen

Widgets laden alle afhankelijkheden van CDN. Er is geen buildstap of lokale installatie vereist. Afhankelijkheden hebben twee indelingen:

• ECMAScript Modules (ESM) - geïmporteerd met <script type="module"> behulp van een URL die eindigt op /+esm

• Universal Module Definition (UMD) - geladen via een gewone <script src> tag; registreert zichzelf globaal als neveneffect

  Bibliotheek	Indeling	URL	Doel
  @modelcontextprotocol/ext-apps	ESM	cdn.jsdelivr.net/npm/@modelcontextprotocol/ext-apps/+esm	MCP-appsklasse App
  @fluentui/tokens	ESM	cdn.jsdelivr.net/npm/@fluentui/tokens/+esm	webLightTheme / webDarkTheme tokensets
  @fluentui/web-components@beta	UMD	unpkg.com/@fluentui/web-components@beta/dist/web-components.min.js	Aangepaste elementen van Fluent UI

Visuele statussen

Elke widget verwerkt drie statussen:

Fluent UI-onderdelen

De volgende Fluent UI-webonderdelen zijn beschikbaar in 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>

Ondersteuning voor thema's

Widgets ondersteunen lichte en donkere thema's via Fluent UI-ontwerptokens. De widget past de juiste tokenwaarden toe wanneer het thema van de host verandert via onhostcontextchanged. Gebruik altijd tokenvariabelen, bijvoorbeeld var(--colorNeutralForeground1), in plaats van vastgelegde kleurwaarden om ervoor te zorgen dat beide thema's correct worden weergegeven.

Kleurtokens

Gebruik nooit in code vastgelegde hexidecimale of RGB-waarden. Bedenk geen tokennamen die hier niet worden vermeld.

Aanbevolen procedures

• Geef echte testgegevens op. De vaardigheid analyseert de werkelijke JSON-structuur om de juiste visual te selecteren. Mockgegevens produceren widgets die breken wanneer ze zijn verbonden met de werkelijke tool.
• Wees specifiek over de visualisatie. Beschrijf de gewenste indeling, zoals kaart, grafiek, tabel of kaartindeling. Vage beschrijvingen leiden tot algemene resultaten.
• Begin met één weergave. Widgets zijn compacte gesprekskaarten, niet volledige toepassingen. Geen tabbladen, paginanavigatie of zoekbalken die de chatinvoer dupliceren.
• Test met beide thema's. Bekijk in de lichte en donkere modus om het contrast en de leesbaarheid te verifiëren.
• Koppel de visual aan de gegevens. Kaarten voor coördinaten, grafieken voor numerieke of trendgegevens, kaarten voor gestructureerde records, tabellen voor vergelijkingen.

Beperkingen

• Widgets moeten alle externe bibliotheken van CDN laden. Er is een internetverbinding vereist tijdens runtime.
• Voor de weergavemodus volledig scherm is extra implementatie vereist die verder gaat dan wat de vaardigheid genereert.
• De vaardigheid verwerkt geen MCP-serverregistratie of -implementatie in het Microsoft 365-beheercentrum. U moet deze stappen afzonderlijk uitvoeren.
• Verificatie (OAuth 2.1, Microsoft Entra SSO) wordt verwerkt door de MCP-hostomgeving, niet de widget HTML zelf.

Verwante documentatie

Documentatie voor Microsoft 365-ontwikkelaars

• MCP-apps nu beschikbaar in Copilot Chat
• Microsoft 365 Agents Toolkit

Documentatie voor Power Platform

• Generatieve pagina's maken en bewerken met hulpprogramma's voor het genereren van AI-code
• Power Platform CLI-verwijzing

Externe verwijzingen

• McP-specificatie (Model Context Protocol)
• Fluent UI Webcomponenten
• Power Platform Skills-opslagplaats