Generer kontrollprogrammer for MCP-apper med verktøy for generering av AI-kode

[Dette emnet inneholder dokumentasjon for forhåndsversjonen, og kan bli endret.]

Denne artikkelen forklarer hvordan du bruker ai-kodegenereringsverktøy som GitHub Copilot CLI eller Claude Code til å generere interaktive MCP-apper (Model Context Protocol) for modelldrevne Power Apps MCP-verktøy. MCP-apper er selvstendige HTML-filer som gjengir JSON-utdataene til et verktøy visuelt som kort, diagrammer, instrumentbord eller kart i en MCP Apps-kompatibel vert, inkludert Microsoft 365 Copilot, Claude og Visual Studio Code.

Hvis du har et MCP-verktøy som returnerer JSON-data, kan kompetansen generate-mcp-app-ui produsere et profesjonelt, temabevisst kontrollprogram som viser dataene i et kompakt visuelt format direkte i en chatsamtale.

Hva du kan gjøre med generate-mcp-app-ui-ferdigheten

• Opprett visuelle kontrollprogrammer for alle MCP-verktøy ved å beskrive hva du vil og lime inn verktøyets JSON-utdata.
• Velg riktig visualobjekt for dataene, for eksempel diagrammer for numeriske trender, kort for strukturerte poster, tabeller for sammenligninger, kart for koordinater og så videre.
• Støtte lyse og mørke temaer automatisk gjennom Fluent UI-utformingstokener.
• Legg til interaktivitet slik at kontrollprogrammer kan ringe verktøyet på nytt ved kjøring (for eksempel en oppdateringsknapp).
• Begrens UX-gjentakelsen ved å beskrive endringer i naturlig språk. Du kan for eksempel «gjøre galleriet kompakt», «legge til et diagram» eller «bruke et kortoppsett».

Forutsetninger

Programvarekrav

Tilleggskrav

• Et MCP-verktøy som returnerer JSON-utdata. Verktøyets utdatatype må settes til JSON.
• En fungerende Internett-tilkobling. Kontrollprogrammer laster inn Fluent UI og andre biblioteker fra Content Delivery Network (CDN) under kjøring.

Installere plugin-modulen

Kjør følgende installasjonskommando fra GitHub Copilot CLI eller Claude Code. Installasjonsprogrammet oppdager automatisk tilgjengelige verktøy og installerer alle plugin-moduler for Power Platform, inkludert generate-mcp-app-ui.

/plugin marketplace add microsoft/power-platform-skills

Slik installerer du bare widget-ferdigheten for MCP-appen:

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

Kompetanseoversikt

Ferdigheten utløses også av uttrykk for naturlig språk, for eksempel «opprett et kontrollprogram», «bygg et kontrollprogram for verktøyet mitt» eller «lag en MCP-app».

Generer en widget

Følg disse trinnene for å opprette et nytt kontrollprogram for et MCP-verktøy.

1. Opprett og test et egendefinert verktøy fra modelldrevne apputformere, og kopier hele JSON-utdataene. Kontroller at verktøyets utdatatype er satt til JSON. Mer informasjon: Opprette egendefinerte verktøy

2. Aktiver kompetansen og beskriv det du vil vise, og lim inn JSON-utdataene 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. Se gjennom den genererte HTML-filen. Kompetansen skriver for eksempel flight-map.htmlen selvstendig HTML-fil til arbeidskatalogen.

4. Forhåndsvis i en nettleser. Åpne HTML-filen lokalt siden widgeten har et fallback-alternativ for testing. Du kan be chatagenten om å legge til frittstående HTML-forhåndsvisning hvis den mangler.

5. Iterere. Beskriv eventuelle endringer direkte i chatten:

   • "Gjør kartet større"
   • "Legg til verktøytips i diagrammet"
   • Reduser høyden og tilpass til 250 piksler med responsivt oppsett uten rullefelt.

Distribuer widgeten

Når kontrollprogrammet er klart, kopierer du HTML-filen til UX-inndata for tilsvarende verktøy, og den returneres som verktøyets svar på brukergrensesnittet. Se dokumentasjonen for oppretting av egendefinerte verktøy for mer informasjon.

Legg til interaktivitet med callServerTool

Hvis du også oppgir navnet på verktøyet når du aktiverer kompetansen, kan det genererte kontrollprogrammet inkludere interaktiv integrering av verktøyanrop. Dette gjør det mulig for widgeten å ringe verktøyet på nytt ved kjøringstid. En oppdateringsknapp på verktøyet UX kan for eksempel kalle seg 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":[...]}

Kompetansen kobles opp app.callServerTool i kontrollprogrammet, slik at når brukere velger Oppdater, henter kontrollprogrammet oppdaterte data direkte fra verktøyet. Hvis du ikke angir et verktøynavn, er kontrollprogrammet skrivebeskyttet og gjengir bare dataene som leveres gjennom tilbakeringingen ontoolresult .

• Microsoft 365 Copilot-chat: Se MCP-apper i Copilot Chat for distribusjonsbaner, inkludert sidelasting for testing, distribusjon gjennom administrasjonssenteret for Microsoft 365 for organisasjonsbruk og publisering til microsoft 365-agentbutikken.
• Power Apps-deklarative agenter: Se dokumentasjonen for Power Apps MCP-deklarativ agent for hvordan du kobler MCP-verktøy til modelldrevne apper.
• Andre MCP-vertere: Se vertenes dokumentasjon for widgetregistreringsprosessen for MCP-apper.

Tekniske detaljer for widget

MCP-appprotokoll

Widgeter kommuniserer med chatverten ved hjelp av App klassen fra @modelcontextprotocol/ext-apps pakken. Protokollen administrerer disse tilbakeringingene og metodene.

CDN-import

Kontrollprogrammer laster inn alle avhengigheter fra CDN. Ingen byggetrinn eller lokal installasjon er nødvendig. Avhengigheter kommer i to formater:

• ECMAScript-moduler (ESM) – importert i <script type="module"> en nettadresse som slutter på /+esm

• Universal Module Definition (UMD) – lastet inn via en vanlig <script src> kode, registrerer seg globalt som en bivirkning

  Bibliotek	Format	URL	Formål
  @modelcontextprotocol/ext-apps	ESM	cdn.jsdelivr.net/npm/@modelcontextprotocol/ext-apps/+esm	MCP-apper-klasse App
  @fluentui/tokens	ESM	cdn.jsdelivr.net/npm/@fluentui/tokens/+esm	webLightTheme / webDarkTheme tokensett
  @fluentui/web-components@beta	UMD	unpkg.com/@fluentui/web-components@beta/dist/web-components.min.js	Egendefinerte elementer i Fluent UI

Visuelle tilstander

Hvert kontrollprogram håndterer tre tilstander:

Fluent UI-komponenter

Følgende Fluent UI-nettkomponenter er tilgjengelige i kontrollprogrammer:

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

Temastøtte

Kontrollprogrammer støtter lyse og mørke temaer gjennom Fluent UI-utformingstokener. Kontrollprogrammet bruker de riktige tokenverdiene når vertens tema endres via onhostcontextchanged. Bruk alltid tokenvariabler, for eksempel var(--colorNeutralForeground1), i stedet for hardkodede fargeverdier for å sikre riktig gjengivelse i begge temaene.

Fargetokener

Bruk aldri hardkodede heksadesimale verdier eller RGB-verdier. Ikke oppfinne tokennavn som ikke er oppført her.

Anbefalte fremgangsmåter

• Oppgi reelle testdata. Ferdigheten analyserer den faktiske JSON-strukturen for å velge riktig visualisering. Mock-data produserer kontrollprogrammer som bryter når de er koblet til det virkelige verktøyet.
• Vær spesifikk om visualobjektet. Beskriv formatet du vil bruke, for eksempel kart, diagram, tabell eller kortoppsett. Vage beskrivelser fører til generiske resultater.
• Start med én visning. Kontrollprogrammer er kompakte samtalekort, ikke fullstendige programmer. Ingen faner, sidenavigasjon eller søkefelt som dupliserer chatinndataene.
• Test med begge temaene. Forhåndsvis i lys og mørk modus for å bekrefte kontrast og lesbarhet.
• Samsvar visualobjektet med dataene. Kart for koordinater, diagrammer for numeriske data eller trenddata, kort for strukturerte poster, tabeller for sammenligninger.

Begrensninger

• Widgets må laste inn alle eksterne biblioteker fra CDN. En Internett-tilkobling kreves ved kjøring.
• Fullskjermvisningsmodus krever ekstra implementering utover det kompetansen genererer.
• Kompetansen håndterer ikke MCP-serverregistrering eller -distribusjon til administrasjonssenteret for Microsoft 365. Du må fullføre disse trinnene separat.
• Godkjenning (OAuth 2.1, Microsoft Entra SSO) håndteres av MCP-vertsmiljøet, ikke selve kontrollprogrammets HTML.

Relatert dokumentasjon

Utviklerdokumentasjon for Microsoft 365

• MCP-apper er nå tilgjengelige i Copilot Chat
• Verktøysett for Microsoft 365 Agents

Power Platform-dokumentasjon

• Opprette og redigere generative sider med verktøy for generering av kunstig intelligens-kode
• Power Platform CLI-referanse

Eksterne referanser

• McP-spesifikasjon (Model Context Protocol)
• Fluent UI Web Components
• Power Platform Skills-repositorium