Generér MCP-appwidgets med værktøjer til oprettelse af AI-kode

[Dette emne er til dokumentationen til den foreløbige udgivelse. Der kan forekomme ændringer.]

I denne artikel forklares det, hvordan du bruger værktøjer til oprettelse af AI-kode, f.eks. GitHub Copilot CLI eller Claude Code, til at generere MCP-apps (Interactive Model Context Protocol) til dine modeldrevne Power Apps MCP-værktøjer. MCP-apps er selvstændige HTML-filer, der gengiver et værktøjs JSON-output visuelt som kort, diagrammer, dashboards eller kort i en hvilken som helst MCP Apps-kompatibel vært, herunder Microsoft 365 Copilot, Claude og Visual Studio Code.

Hvis du har et MCP-værktøj, der returnerer JSON-data, kan færdigheden generate-mcp-app-ui producere en poleret, temaorienteret widget, der viser disse data i et kompakt visuelt format direkte i en chatsamtale.

Hvad du kan gøre med færdigheden generate-mcp-app-ui

• Opret visuelle widgets til et hvilket som helst MCP-værktøj ved at beskrive, hvad du vil, og indsætte værktøjets JSON-output.
• Vælg den rette visualisering til dine data, f.eks. diagrammer til numeriske tendenser, kort til strukturerede poster, tabeller til sammenligninger, kort for koordinater osv.
• Understøtter automatisk lyse og mørke temaer via Fluent UI-designtokens.
• Tilføj interaktivitet, så widgets kan kalde dit værktøj igen på kørselstidspunktet (f.eks. en opdateringsknap).
• Afgræns UX'en iterativt ved at beskrive ændringer i naturligt sprog. "Gør galleriet kompakt", "tilføj et diagram" eller "brug et kortlayout".

Forudsætninger

Softwarekrav

Yderligere krav

• Et MCP-værktøj, der returnerer JSON-output. Outputtypen for værktøjet skal være angivet til JSON.
• En fungerende internetforbindelse. Widgets indlæser Fluent UI og andre biblioteker fra CDN (Content Delivery Network) på kørselstidspunktet.

Installér plug-in'en

Kør følgende installationskommando fra GitHub Copilot CLI eller Claude Code. Installationsprogrammet registrerer automatisk tilgængelige værktøjer og installerer alle Power Platform-plug-ins, herunder generate-mcp-app-ui.

/plugin marketplace add microsoft/power-platform-skills

Sådan installerer du kun MCP App-widgetten:

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

Oversigt over færdigheder

Færdighederne udløses også af udtryk på naturligt sprog, f.eks. "opret en widget", "byg en widget til mit værktøj" eller "opret en MCP-app".

Generér en widget

Følg disse trin for at oprette en ny widget til et MCP-værktøj.

1. Opret og test et brugerdefineret værktøj fra modeldrevne appdesignere, og kopiér det fulde JSON-output. Sørg for, at værktøjets outputtype er angivet til JSON. Flere oplysninger: Opret brugerdefinerede værktøjer

2. Aktivér færdigheden , og beskriv, hvad du vil have vist, ved at indsætte JSON-outputtet i samtalen:

   /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. Gennemse den genererede HTML-fil. Færdigheden skriver en selvstændig HTML-fil, f.eks. , flight-map.htmltil arbejdsmappen.

4. Eksempelvisning i en browser. Åbn HTML-filen lokalt, da widgetten har reserveindstillingen til test. Du kan bede chatagenten om at tilføje en separat HTML-prøveversion, hvis den mangler.

5. Iterere. Beskriv eventuelle ændringer direkte i chatten:

   • "Gør kortet større"
   • "Tilføj værktøjstip til diagrammet"
   • "Formindsk højden, og tilpas til 250 pixel med dynamisk layout og ingen rullepaneler"

Udrul widgeten

Når din widget er klar, skal du kopiere HTML-filen til UX-inputtet for det tilsvarende værktøj, så returneres den som værktøjets svar på brugergrænsefladen. Du kan finde flere oplysninger i dokumentationen til oprettelse af brugerdefinerede værktøjer .

Tilføj interaktivitet med callServerTool

Hvis du også angiver dit værktøjs navn, når du aktiverer færdigheden, kan den genererede widget omfatte interaktiv integration af værktøjskald. Dette gør det muligt for widgetten at kalde værktøjet igen på kørselstidspunktet. En opdateringsknap på værktøjet UX kan f.eks. kalde sig selv.

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

Funktionen konfigureres app.callServerTool i widgetten, så når brugerne vælger Opdater, henter widgetten opdaterede data direkte fra dit værktøj. Hvis du ikke angiver et værktøjsnavn, er widgetten skrivebeskyttet og gengiver kun de data, der leveres via tilbagekaldet ontoolresult .

• Microsoft 365 Copilot-chat: Se MCP-apps i Copilot Chat for udrulningsstier, herunder sideloading til test, installation via Microsoft 365 Administration til organisationsbrug og publicering til Microsoft 365-agentlageret.
• Power Apps-deklarative agenter: Se dokumentation til Power Apps MCP-deklarativ agent for at få mere at vide om, hvordan du forbinder MCP-værktøjer med modeldrevne apps.
• Andre MCP-værter: Se din værts dokumentation for at få oplysninger om registreringsprocessen for MCP-appswidget.

Tekniske detaljer om widget

MCP-apps-protokol

Widgets kommunikerer med chatværten App ved hjælp af klassen fra @modelcontextprotocol/ext-apps pakken. Protokollen administrerer disse tilbagekald og metoder.

CDN-import

Widgets indlæser alle afhængigheder fra CDN. Der kræves ingen buildtrin eller lokal installation. Afhængigheder findes i to formater:

• ECMAScript-moduler (ESM) – importeret inde <script type="module"> ved hjælp af en URL-adresse, der slutter med /+esm

• UMD (Universal Module Definition) – indlæses via et almindeligt <script src> mærke. Registrerer sig globalt som en bivirkning

  Bibliotek	Formater	URL	Formål
  @modelcontextprotocol/ext-apps	ESM	cdn.jsdelivr.net/npm/@modelcontextprotocol/ext-apps/+esm	MCP-apps-klasse App
  @fluentui/tokens	ESM	cdn.jsdelivr.net/npm/@fluentui/tokens/+esm	webLightTheme / webDarkTheme tokensæt
  @fluentui/web-components@beta	UMD	unpkg.com/@fluentui/web-components@beta/dist/web-components.min.js	Brugerdefinerede elementer i flydende brugergrænseflade

Visuelle tilstande

Hver widget håndterer tre tilstande:

Flydende brugergrænsefladekomponenter

Følgende Fluent UI-webkomponenter er tilgængelige i 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>

Understøttelse af tema

Widgets understøtter lyse og mørke temaer via Fluent UI-designtokens. Widgetten anvender de korrekte tokenværdier, når værtens tema ændres via onhostcontextchanged. Brug altid tokenvariabler, f.eks. , var(--colorNeutralForeground1)i stedet for hardcodede farveværdier for at sikre korrekt gengivelse i begge temaer.

Farvetokens

Brug aldrig hardcoded hexidecimal- eller RGB-værdier. Opfind ikke tokennavne, der ikke er angivet her.

Bedste praksis

• Angiv reelle testdata. Færdigheden analyserer den faktiske JSON-struktur for at vælge den rette visualisering. Mock data producerer widgets, der afbrydes, når de er forbundet til det rigtige værktøj.
• Vær specifik for visualiseringen. Beskriv det ønskede format, f.eks kort, diagram, tabel eller kortlayout. Vage beskrivelser fører til generiske resultater.
• Start med én visning. Widgets er kompakte samtalekort, ikke komplette programmer. Ingen faner, sidenavigation eller søgelinjer, der duplikerer chatinputtet.
• Test med begge temaer. Eksempelvisning i lys og mørk tilstand for at bekræfte kontrast og læsbarhed.
• Tilpas visualiseringen til dataene. Kort for koordinater, diagrammer til numeriske data eller tendensdata, kort til strukturerede poster, tabeller til sammenligninger.

Begrænsninger

• Widgets skal indlæse alle eksterne biblioteker fra CDN. Der kræves en internetforbindelse på kørselstidspunktet.
• Fuldskærmsvisning kræver yderligere implementering ud over det, færdighederne genererer.
• Færdighederne håndterer ikke MCP-serverregistrering eller -installation i Microsoft 365 Administration. Du skal fuldføre disse trin separat.
• Godkendelse (OAuth 2.1, Microsoft Entra SSO) håndteres af MCP-værtsmiljøet og ikke selve widgetens HTML.

Relateret dokumentation

Dokumentation til Microsoft 365-udviklere

• MCP-apps er nu tilgængelige i Copilot Chat
• Microsoft 365 Agents Toolkit

Dokumentation til Power Platform

• Opret og rediger generative sider med værktøjer til oprettelse af AI-kode
• CLI-reference til Power Platform

Eksterne referencer

• MCP-specifikation (Model Context Protocol)
• Flydende webkomponenter til brugergrænsefladen
• Power Platform Færdighedsarkiv