Generera MCP-appwidgetar med AI-kodgenereringsverktyg

[Det här avsnittet utgör förhandsdokumentation och kan komma att ändras.]

Den här artikeln beskriver hur du använder AI-kodgenereringsverktyg som GitHub Copilot CLI eller Claude Code för att generera MCP-appar (Interactive Model Context Protocol) för dina modelldrivna Power Apps MCP-verktyg. MCP-appar är fristående HTML-filer som renderar ett verktygs JSON-utdata visuellt som kort, diagram, instrumentpaneler eller kartor inuti alla MCP Apps-kompatibla värdar, inklusive Microsoft 365 Copilot, Claude och Visual Studio Code.

Om du har ett MCP-verktyg som returnerar JSON-data kan färdigheten generate-mcp-app-ui skapa en polerad, temamedveten widget som visar dessa data i ett kompakt visuellt format direkt i en chattkonversation.

Vad du kan göra med kompetensen generate-mcp-app-ui

• Skapa visuella widgetar för alla MCP-verktyg genom att beskriva vad du vill ha och klistra in verktygets JSON-utdata.
• Välj rätt visuellt objekt för dina data, till exempel diagram för numeriska trender, kort för strukturerade poster, tabeller för jämförelser, kartor för koordinater och så vidare.
• Stöd för ljusa och mörka teman automatiskt via Fluent UI-designtoken.
• Lägg till interaktivitet så att widgetar kan anropa verktyget igen vid körning (till exempel en uppdateringsknapp).
• Förfina UX-iterativt genom att beskriva ändringar i naturligt språk. Till exempel "gör galleriet kompakt", "lägg till ett diagram" eller "använd en kortlayout".

Förutsättningar

Programvarukrav

Ytterligare krav

• Ett MCP-verktyg som returnerar JSON-utdata. Verktygets utdatatyp måste vara inställd på JSON.
• En fungerande Internetanslutning. Widgetar läser in Fluent-användargränssnittet och andra bibliotek från nätverket för innehållsleverans (CDN) vid körning.

Installera plugin-programmet

Kör följande installationskommando från GitHub Copilot CLI eller Claude Code. Installationsprogrammet identifierar automatiskt tillgängliga verktyg och installerar alla Power Platform-plugin-program, inklusive generate-mcp-app-ui.

/plugin marketplace add microsoft/power-platform-skills

Så här installerar du endast MCP App-widgetens färdighet:

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

Kunskapsöversikt

Färdigheten utlöses också av naturligt språkfraser som "skapa en widget", "skapa en widget för mitt verktyg" eller "skapa en MCP-app".

Generera en widget

Följ dessa steg för att skapa en ny widget för ett MCP-verktyg.

1. Skapa och testa ett anpassat verktyg från modelldrivna appdesigners och kopiera fullständiga JSON-utdata. Kontrollera att verktygets utdatatyp är inställd på JSON. Mer information: Skapa anpassade verktyg

2. Anropa kunskapen och beskriv vad du vill ska visas och klistra in JSON-utdata i konversationen:

   /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. Granska den genererade HTML-filen. Färdigheten skriver en fristående HTML-fil, till exempel flight-map.html, till din arbetskatalog.

4. Förhandsgranska i en webbläsare. Öppna HTML-filen lokalt eftersom widgeten har ett reservalternativ för testning. Du kan be chattagenten att lägga till en fristående HTML-förhandsversion om den saknas.

5. Iterera. Beskriv eventuella ändringar direkt i chatten:

   • "Gör kartan större"
   • "Lägg till verktygstips i diagrammet"
   • "Minska höjden och få plats i 250 bildpunkter med dynamisk layout och inga rullningslister"

Distribuera widgeten

När widgeten är klar kopierar du HTML-filen till UX-indata för motsvarande verktyg så returneras den som verktygets UI-svar. Mer information finns i dokumentationen om att skapa anpassade verktyg .

Lägga till interaktivitet med callServerTool

Om du även anger verktygets namn när du anropar kunskapen kan den genererade widgeten innehålla interaktiv integrering av verktygsanrop. Detta gör att widgeten kan anropa ditt verktyg igen vid körningstid. En uppdateringsknapp på verktygets UX kan till exempel anropa sig själv.

/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 kopplar app.callServerTool till widgeten så att när användarna väljer Uppdatera hämtar widgeten uppdaterade data direkt från ditt verktyg. Om du inte anger något verktygsnamn är widgeten skrivskyddad och återger endast data som levereras via återanropet ontoolresult .

• Microsoft 365 Copilot-chat: Se MCP-appar i Copilot Chat för distributionsvägar, inklusive sidoladdning för testning, distribution via Microsoft 365 administrationscenter för organisationsanvändning och publicering till Microsoft 365-agentbutiken.
• Deklarativa agenter för Power Apps: Se dokumentationen om Deklarativ agent i Power Apps MCP för hur du ansluter MCP-verktyg med modelldrivna appar.
• Andra MCP-värdar: Konsultera din värds dokumentation för registreringsprocessen för MCP-apps widget.

Teknisk information om widgetar

PROTOKOLL FÖR MCP-appar

Widgetar kommunicerar med chattvärden med hjälp av App klassen från @modelcontextprotocol/ext-apps paketet. Protokollet hanterar dessa återkopplingar och metoder.

CDN-importer

Widgetar läser in alla beroenden från CDN. Inget byggsteg eller lokal installation krävs. Beroenden finns i två format:

• ECMAScript-moduler (ESM) – importeras inuti <script type="module"> med hjälp av en URL som slutar /+esm

• Universal Module Definition (UMD) – läses in via en vanlig <script src> tagg och registrerar sig globalt som en bieffekt.

  Bibliotek	Format	URL	Syfte
  @modelcontextprotocol/ext-apps	ESM	cdn.jsdelivr.net/npm/@modelcontextprotocol/ext-apps/+esm	MCP-appklass App
  @fluentui/tokens	ESM	cdn.jsdelivr.net/npm/@fluentui/tokens/+esm	webLightTheme / webDarkTheme tokenuppsättningar
  @fluentui/web-components@beta	UMD	unpkg.com/@fluentui/web-components@beta/dist/web-components.min.js	Anpassade element för Fluent-användargränssnittet

Visuella tillstånd

Varje widget hanterar tre tillstånd:

Fluent UI-komponenter

Följande Fluent UI-webbkomponenter är tillgängliga i widgetar:

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

Stöd för tema

Widgetar stöder ljusa och mörka teman via Fluent UI-designtoken. Widgeten tillämpar rätt tokenvärden när värdens tema ändras via onhostcontextchanged. Använd alltid tokenvariabler, var(--colorNeutralForeground1)till exempel , i stället för hårdkodade färgvärden för att säkerställa korrekt återgivning i båda temana.

Färgtoken

Använd aldrig hårdkodade hexidecimala värden eller RGB-värden. Uppfinn inte tokennamn som inte finns listade här.

Regelverk

• Ange verkliga testdata. Färdigheten analyserar den faktiska JSON-strukturen för att välja rätt visuellt objekt. Falska data genererar widgetar som bryts när de är anslutna till det verkliga verktyget.
• Var specifik om det visuella. Beskriv önskat format, till exempel karta, diagram, tabell eller kortlayout. Vaga beskrivningar leder till allmänna resultat.
• Börja med en vy. Widgetar är kompakta konversationskort, inte fullständiga program. Inga flikar, sidnavigering eller sökfält som duplicerar chattindata.
• Testa med båda temana. Förhandsgranska i ljust och mörkt läge för att verifiera kontrast och läsbarhet.
• Matcha det visuella med data. Kartor för koordinater, diagram för numeriska data eller trenddata, kort för strukturerade poster, tabeller för jämförelser.

Begränsningar

• Widgets måste läsa in alla externa bibliotek från CDN. En internetanslutning krävs vid körning.
• Helskärmsläge kräver ytterligare implementering utöver vad kunskapen genererar.
• Funktionen hanterar inte MCP-serverregistrering eller distribution till administrationscentret för Microsoft 365. Du måste utföra dessa steg separat.
• Autentisering (OAuth 2.1, Microsoft Entra SSO) hanteras av MCP-värdmiljön, inte själva html-widgeten.

Relaterad dokumentation

Dokumentation om Microsoft 365-utvecklare

• MCP-appar är nu tillgängliga i Copilot Chat
• Verktygslåda för Microsoft 365-agenter

Dokumentation om Power Platform

• Skapa och redigera generativa sidor med ai-kodgenereringsverktyg
• Referens för Power Platform CLI

Externa referenser

• MCP-specifikation (Model Context Protocol)
• Webbkomponenter för Fluent-användargränssnittet
• Lagringsplats för Power Platform-kunskaper