MCP-sovelluksen pienoissovellusten luominen tekoälykoodin muodostustyökaluilla

[Tämä ohjeaihe sisältää julkaisua edeltävää materiaalia ja voi muuttua.]

Tässä artikkelissa kerrotaan, miten voit käyttää tekoälykoodin muodostustyökaluja, kuten GitHub Copilot CLI:tä tai Claude Codea, luodaksesi mallipohjaisille Power Apps MCP -työkaluillesi vuorovaikutteisia mallin kontekstiprotokollasovelluksia. MCP-sovellukset ovat itsenäisiä HTML-tiedostoja, jotka hahmontavat työkalun JSON-tulosteen visuaalisesti kortteina, kaavioina, koontinäyttöinä tai karttoina minkä tahansa MCP-sovellusten kanssa yhteensopivan isännän sisällä, mukaan lukien Microsoft 365 Copilot, Claude ja Visual Studio Code.

Jos sinulla on MCP-työkalu, joka palauttaa JSON-tietoja, generate-mcp-app-ui taidolla voit tuottaa kiillotetun, teemaa huomioivan pienoissovelluksen, joka näyttää nämä tiedot kompaktissa visuaalisessa muodossa suoraan keskustelukeskustelun sisällä.

Mitä voit tehdä generate-mcp-app-ui-taidolla

• Luo visuaaliset pienoissovellukset mille tahansa MCP-työkalulle kuvailemalla, mitä haluat, ja liittämällä työkalun JSON-tuloste.
• Valitse tiedoille sopiva visualisointi, kuten numeeristen trendien kaaviot, jäsennettyjen tietueiden kortit, vertailutaulukot, koordinaattien kartat ja niin edelleen.
• Tue kevyitä ja tummempia teemoja automaattisesti sujuvan käyttöliittymän suunnittelutunnusten kautta.
• Lisää vuorovaikutteisuutta, jotta pienoissovellukset voivat kutsua työkalua uudelleen suorituksen aikana (esimerkiksi päivityspainikkeen).
• Tarkenna käyttökokemusta iteratiivisesti kuvailemalla luonnollisen kielen muutoksia. Voit esimerkiksi "tehdä valikoimasta kompaktin", "lisätä kaavion" tai "käyttää kortin asettelua".

Vaatimukset

Ohjelmistovaatimukset

Lisävaatimukset

• MCP-työkalu, joka palauttaa JSON-tulosteen. Työkalun tulostyypiksi on asetettava JSON.
• Toimiva Internet-yhteys. Pienoissovellukset lataavat fluenttikäyttöliittymän ja muita kirjastoja sisältöverkkosta (CDN) suorituksen aikana.

Laajennuksen asentaminen

Suorita seuraava asennusohjelmakomento GitHub Copilot CLI:stä tai Claude Codesta. Asennusohjelma tunnistaa automaattisesti käytettävissä olevat työkalut ja asentaa kaikki Power Platform -laajennukset, mukaan lukien generate-mcp-app-ui.

/plugin marketplace add microsoft/power-platform-skills

Asenna MCP-sovelluksen pienoissovelluksen ominaisuus vain:

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

Taitojen yleiskatsaus

Taidon laukaisevat myös luonnollisen kielen lauseet, kuten "pienoissovelluksen luominen", "pienoissovelluksen luominen työkalulleni" tai "tee MCP-sovellus".

Luo pienoissovellus

Näiden ohjeiden avulla voit luoda uuden pienoissovelluksen MCP-työkalulle.

1. Luo ja testaa mukautettua työkalua mallipohjaisten sovellusten suunnitteluohjelmassa ja kopioi täydelliset JSON-tulokset. Varmista, että työkalun tulostetyypiksi on määritetty JSON. Lisätietoja: Mukautettujen työkalujen luominen

2. Kutsu taito ja kuvaa, mitä haluat näyttää, liittämällä JSON-tuloste keskusteluun:

   /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. Tarkista luotu HTML-tiedosto. Taito kirjoittaa itsenäisen HTML-tiedoston, flight-map.htmlesimerkiksi , työhakemistoosi.

4. Esikatselu selaimessa. Avaa HTML-tiedosto paikallisesti, sillä pienoissovelluksella on varavalinta testaukseen. Voit pyytää keskusteluagenttia lisäämään erillisen HTML-esikatselun, jos se puuttuu.

5. Iteroi. Kuvaile muutokset suoraan keskustelussa:

   • "Tee kartasta suurempi"
   • "Työkaluvihjeiden lisääminen kaavioon"
   • "Pienennä korkeutta ja sovita 250 kuvapisteeen reagoivalla asettelulla eikä vierityspalkkeja"

Pienoissovelluksen käyttöönotto

Kun pienoissovellus on valmis, kopioi HTML-tiedosto vastaavan työkalun käyttökokemussyötteeseen, ja se palautetaan työkalun käyttöliittymävastauksena. Katso lisätietoja mukautettujen työkalujen luomisen ohjeista .

Vuorovaikutteisuuden lisääminen callServerTooliin

Jos annat myös työkalun nimen, kun kutsut osaamista, luotu pienoissovellus voi sisältää vuorovaikutteisen työkalukutsun integroinnin. Tämän ansiosta pienoissovellus voi kutsua työkalusi uudelleen suorituksen aikana. Esimerkiksi työkalun käyttökokemuksen päivityspainike voi kutsua itseään.

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

Taito yhdistää app.callServerTool pienoissovellukseen niin, että kun käyttäjät valitsevat Päivitä, pienoissovellus hakee päivitetyt tiedot suoraan työkalustasi. Jos et anna työkalun nimeä, pienoissovellus on vain luku -tilassa ja hahmontaa vain takaisinkutsun ontoolresult kautta toimitetut tiedot.

• Microsoft 365 Copilot -keskustelu: Tutustu MCP-sovelluksiin Copilot Chatissa käyttöönottopolkuja varten, mukaan lukien testien sivukuormitus, käyttöönotto Microsoft 365 -hallintakeskuksessa organisaatiolle ja julkaiseminen Microsoft 365 -agenttisäilöön.
• Power Appsin deklaratiiviset agentit: Katso Power Appsin MCP:n deklaratiivisesta agentin dokumentaatiosta , miten MCP-työkalut voidaan yhdistää mallipohjaisiin sovelluksiin.
• Muut MCP-isännät: Tutustu isäntäsi MCP-sovellusten pienoissovelluksen rekisteröintiprosessin ohjeisiin.

Widgetin tekniset tiedot

MCP-sovellusten protokolla

Pienoissovellukset ovat yhteydessä chat-isäntään käyttämällä App paketin luokkaa @modelcontextprotocol/ext-apps . Protokolla hallitsee näitä takaisinkutsuja ja menetelmiä.

CDN-tuonnit

Pienoissovellukset lataavat kaikki riippuvuudet CDN:stä. Koontivaihetta tai paikallista asennusta ei tarvita. Riippuvuudet ovat kahdessa muodossa:

• ECMAScript Modules (ESM) – tuotu sisälle <script type="module"> käyttämällä URL-osoitetta, jonka pääte on /+esm

• Universal Module Definition (UMD) – ladattu tavallisella <script src> tunnisteella; rekisteröityy maailmanlaajuisesti sivuvaikutuksena

  Kirjasto	Muoto	osoite	Tarkoitus
  @modelcontextprotocol/ext-apps	ESM	cdn.jsdelivr.net/npm/@modelcontextprotocol/ext-apps/+esm	MCP-sovellusten App luokka
  @fluentui/tokens	ESM	cdn.jsdelivr.net/npm/@fluentui/tokens/+esm	webLightTheme / webDarkTheme tunnusjoukot
  @fluentui/web-components@beta	UMD	unpkg.com/@fluentui/web-components@beta/dist/web-components.min.js	Sujuvan käyttöliittymän mukautetut elementit

Visuaaliset tilat

Jokainen pienoissovellus käsittelee kolmea tilaa:

Sujuvan käyttöliittymän osat

Seuraavat fluent ui -verkko-osat ovat käytettävissä pienoissovelluksessa:

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

Teeman tuki

Pienoissovellukset tukevat vaaleaa ja tummaa teemaa fluenttikäyttöliittymän suunnittelutunnusten kautta. Pienoissovellus käyttää oikeita tunnusarvoja, kun isännän teema muuttuu :n kautta onhostcontextchanged. Käytä aina tunnusmuuttujia, var(--colorNeutralForeground1)esimerkiksi , kiinteän koodatun väriarvon sijaan, jotta molemmissa teemoissa voidaan varmistaa asianmukainen hahmontaminen.

Väritunnukset

Älä koskaan käytä kiinteästi koodattuja heksidesimaali- tai RGB-arvoja. Älä keksi tunnusten nimiä, jotka eivät ole luettelossa.

Parhaat käytännöt

• Anna todellisia testitietoja. Taito analysoi JSON-rakenteen ja valitsee oikean visualisoinnin. Mock data tuottaa pienoissopitoja, jotka katkeavat, kun yhteys todelliseen työkaluun on muodostettu.
• Tutustu tarkemmin visualisointiin. Kuvaile haluamaasi muotoa, kuten karttaa, kaaviota, taulukkoa tai kortin asettelua. Epämääräiset kuvaukset johtavat yleisiin tuloksiin.
• Aloita yhdestä näkymästä. Pienoissovellukset ovat kompaktinkokoisia keskustelukortteja, eivät kokonaisia sovelluksia. Ei välilehtiä, sivussa siirtymistä tai hakupalkkeja, jotka monistavat keskustelusyötteen.
• Testaa kummallakin teemalla. Esikatselu vaaleassa ja tummassa tilassa kontrastin ja luettavuuden varmistamiseksi.
• Täsmää visualisointi tietoihin. Koordinaattien kartat, numeeristen tai trenditietojen kaaviot, jäsennettyjen tietueiden kortit ja vertailutaulukot.

Rajoitukset

• Pienoissovellusten on ladattava kaikki ulkoiset kirjastot CDN:stä. Internet-yhteys vaaditaan suorituksen aikana.
• Koko näytön tila edellyttää lisätoteutuksia, jotka ylittävät toiminnon tuottaman.
• Taito ei käsittele MCP-palvelimen rekisteröintiä tai käyttöönottoa Microsoft 365 -hallintakeskuksessa. Nämä vaiheet on suoritettava erikseen.
• Todentamista (OAuth 2.1, Microsoft Entra SSO) käsittelee MCP-isäntäympäristö, ei pienoissovelluksen HTML-koodia.

Liittyvä dokumentaatio

Microsoft 365 -kehittäjädokumentaatio

• MCP-sovellukset nyt saatavilla Copilot Chatissa
• Microsoft 365 -agenttien työkalupaketti

Power Platform -dokumentaatio

• Luo ja muokkaa luotuja sivuja tekoälykoodin luontityökaluilla
• Power Platform -komentorivikäyttöliittymän viittaus

Ulkoiset viittaukset

• Mallin kontekstiprotokollan (MCP) määritys
• Sujuvan käyttöliittymän verkko-osat
• Power Platformin osaamisalueiden säilö