Generieren von MCP-App-Widgets mit AI-Codegenerierungstools

[Dieses Thema ist Teil der Dokumentation zur Vorabversion und kann geändert werden.]

In diesem Artikel wird erläutert, wie Sie KI-Codegenerierungstools wie GitHub Copilot CLI oder Claude Code verwenden, um MCP-Apps (Interactive Model Context Protocol) für Ihre modellgesteuerten Power Apps MCP-Tools zu generieren. MCP-Apps sind eigenständige HTML-Dateien, die die JSON-Ausgabe eines Tools visuell als Karten, Diagramme, Dashboards oder Karten innerhalb eines mit MCP-Apps kompatiblen Hosts rendern, einschließlich Microsoft 365 Copilot, Claude und Visual Studio Code.

Wenn Sie über ein MCP-Tool verfügen, das JSON-Daten zurückgibt, kann die generate-mcp-app-ui Fähigkeit ein ansprechendes designfähiges Widget erzeugen, das diese Daten in einem kompakten visuellen Format direkt in einer Chatunterhaltung anzeigt.

Welche Funktionen Sie mit der Fähigkeit „generate-mcp-app-ui“ nutzen können

• Erstellen Sie visuelle Widgets für jedes MCP-Tool, indem Sie beschreiben, was Sie wünschen und die JSON-Ausgabe des Tools einfügen.
• Wählen Sie das richtige Visuelle für Ihre Daten aus, z. B. Diagramme für numerische Trends, Karten für strukturierte Datensätze, Tabellen für Vergleiche, Karten für Koordinaten usw.
• Unterstützen Sie helle und dunkle Designs automatisch über Fluent UI-Designtoken.
• Fügen Sie Interaktivität hinzu, damit Widgets Ihr Tool zur Laufzeit erneut aufrufen können (z. B. eine Aktualisierungsschaltfläche).
• Verfeinern Sie die UX iterativ, indem Sie Änderungen in natürlicher Sprache beschreiben. Beispiel: "Komprimieren des Katalogs", "Hinzufügen eines Diagramms" oder "Verwenden eines Kartenlayouts".

Voraussetzungen

Softwareanforderungen

Zusätzliche Anforderungen

• Ein MCP-Tool, das die JSON-Ausgabe zurückgibt. Der Ausgabetyp Ihres Tools muss auf JSON festgelegt werden.
• Eine funktionierende Internetverbindung. Widgets laden Fluent UI und andere Bibliotheken aus dem Content Delivery Network (CDN) zur Laufzeit.

Installieren des Plug-Ins

Führen Sie den folgenden Installer-Befehl von GitHub Copilot CLI oder Claude Code aus. Das Installationsprogramm erkennt automatisch verfügbare Tools und installiert alle Power Platform-Plug-Ins, einschließlich generate-mcp-app-ui.

/plugin marketplace add microsoft/power-platform-skills

Um nur das MCP-App-Widget-Skill zu installieren:

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

Übersicht über Fähigkeiten

Die Fähigkeit wird auch durch Natürliche Sprachausdrücke wie "Erstellen eines Widgets", "Erstellen eines Widgets für mein Tool" oder "Erstellen einer MCP-App" ausgelöst.

Generieren eines Widgets

Führen Sie die folgenden Schritte aus, um ein neues Widget für ein MCP-Tool zu erstellen.

1. Erstellen und testen Sie ein benutzerdefiniertes Tool mithilfe der modellgesteuerten App-Designer und kopieren Sie die vollständige JSON-Ausgabe. Stellen Sie sicher, dass der Ausgabetyp des Tools auf JSON festgelegt ist. Weitere Informationen: Erstellen von benutzerdefinierten Tools

2. Rufen Sie die Fähigkeit auf, und beschreiben Sie, was Angezeigt werden soll, und fügen Sie die JSON-Ausgabe in die Unterhaltung ein:

   /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. Überprüfen Sie die generierte HTML-Datei. Das Programm erstellt eine eigenständige HTML-Datei, zum Beispiel flight-map.html, in Ihrem Arbeitsverzeichnis.

4. Vorschau in einem Browser. Öffnen Sie die HTML-Datei lokal, da das Widget die Fallbackoption zum Testen hat. Sie können den Chat-Agent bitten, eine eigenständige HTML-Vorschau hinzuzufügen, falls diese fehlt.

5. Iterieren Beschreiben Sie alle Änderungen direkt im Chat:

   • "Vergrößern der Karte"
   • Tooltips zum Diagramm hinzufügen.
   • „Verringern der Höhe und Anpassen auf 250 Pixel mit responsivem Layout ohne Bildlaufleisten.“

Bereitstellen Ihres Widgets

Nachdem Ihr Widget fertig ist, kopieren Sie die HTML-Datei in die UX-Eingabe für das entsprechende Tool, und sie wird als UI-Antwort des Tools zurückgegeben. Ausführliche Informationen finden Sie in der Dokumentation zum Erstellen von benutzerdefinierten Tools .

Hinzufügen von Interaktivität mit callServerTool

Wenn Sie auch den Namen Ihres Tools angeben, wenn Sie die Fähigkeit aufrufen, kann das generierte Widget die interaktive Integration von Toolanrufen umfassen. Dadurch kann das Widget Ihr Tool zur Laufzeit erneut aufrufen. Beispielsweise kann eine Aktualisierungsschaltfläche im Tool UX sich selbst aufrufen.

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

Die Funktion wird im Widget unter app.callServerTool eingerichtet, sodass das Widget, wenn Benutzer Aktualisieren auswählen, die aktualisierten Daten direkt aus Ihrem Tool abruft. Wenn Sie keinen Tool-Namen angeben, ist das Widget schreibgeschützt und zeigt nur die Daten an, die über den ontoolresult-Rückruf übermittelt werden.

• Microsoft 365 Copilot-Chat: Siehe MCP-Apps im Copilot-Chat für Bereitstellungspfade, einschließlich Querladen zum Testen, Bereitstellen über das Microsoft 365 Admin Center für die Organisationsverwendung und Veröffentlichung im Microsoft 365-Agent-Store.
• Deklarative Agenten in Power Apps: Informationen dazu, wie Sie MCP-Tools mit modellgesteuerten Apps verbinden, finden Sie in der Dokumentation zu deklarativen Agenten in Power Apps MCP.
• Weitere MCP-Hosts: Lesen Sie die Dokumentation Ihres Hosts für den MCP-App-Widget-Registrierungsprozess.

Technische Details des Widgets

MCP-Apps-Protokoll

Widgets kommunizieren mit dem Chathost mithilfe der App Klasse aus dem @modelcontextprotocol/ext-apps Paket. Das Protokoll verwaltet diese Rückrufe und Methoden.

CDN-Importe

Widgets laden alle Abhängigkeiten von CDN. Es ist kein Buildschritt oder keine lokale Installation erforderlich. Abhängigkeiten liegen in zwei Formaten vor.

• ECMAScript-Module (ESM) – importiert innerhalb <script type="module"> mit einer URL, die auf /+esm endet

• Universal Module Definition (UMD) – über ein einfaches <script src>-Tag geladen; registriert sich als Nebeneffekt global

  Bibliothek	Format	URL	Zweck
  @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ätze
  @fluentui/web-components@beta	UMD	unpkg.com/@fluentui/web-components@beta/dist/web-components.min.js	Benutzerdefinierte Fluent UI-Elemente

Visueller Zustand

Jedes Widget behandelt drei Zustände:

Fluent UI-Komponenten

Die folgenden Fluent UI-Webkomponenten sind in Widgets verfügbar:

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

Theme-Unterstützung

Widgets unterstützen helle und dunkle Designs über Fluent UI-Designtoken. Das Widget wendet die richtigen Tokenwerte an, wenn sich das Design des Hosts über onhostcontextchangedändert. Verwenden Sie immer Tokenvariablen, var(--colorNeutralForeground1)z. B. anstelle hartcodierter Farbwerte, um das korrekte Rendering in beiden Designs sicherzustellen.

Farbtoken

Verwenden Sie niemals hartcodierte Hexadezimal- oder RGB-Werte. Erfinden Sie keine Tokennamen, die hier nicht aufgeführt sind.

Optimale Verfahren

• Stellen Sie echte Testdaten bereit. Die Skill analysiert die tatsächliche JSON-Struktur, um das richtige Visual auszuwählen. Simulierte Daten erzeugen Widgets, die beim Herstellen einer Verbindung mit dem realen Tool brechen.
• Seien Sie spezifisch beim Visuellen. Beschreiben Sie das gewünschte Format, z. B. Karte, Diagramm, Tabelle oder Kartenlayout. Vage Beschreibungen führen zu generischen Ergebnissen.
• Beginnen Sie mit einer Ansicht. Widgets sind kompakte Unterhaltungskarten, nicht vollständige Anwendungen. Keine Registerkarten, Seitennavigation oder Suchleisten, die die Chateingabe duplizieren.
• Testen Sie beide Themen. Zeigen Sie eine Vorschau im hellen und dunklen Modus an, um den Kontrast und die Lesbarkeit zu überprüfen.
• Ordnen Sie das visuelle Element den Daten zu. Karten für Koordinaten, Diagramme für numerische oder Trenddaten, Karten für strukturierte Datensätze, Tabellen für Vergleiche.

Einschränkungen

• Widgets müssen alle externen Bibliotheken aus CDN laden. Zur Laufzeit ist eine Internetverbindung erforderlich.
• Der Vollbildanzeigemodus erfordert eine zusätzliche Implementierung, die über das hinausgeht, was die Fähigkeit generiert.
• Die Fähigkeit behandelt keine MCP-Serverregistrierung oder -bereitstellung im Microsoft 365 Admin Center. Sie müssen diese Schritte separat ausführen.
• Die Authentifizierung (OAuth 2.1, Microsoft Entra SSO) wird von der MCP-Hostumgebung behandelt, nicht von der Widget-HTML selbst.

Zugehörige Dokumentation

Microsoft 365-Entwicklerdokumentation

• MCP-Apps jetzt im Copilot-Chat verfügbar
• Microsoft 365 Agents Toolkit

Dokumentation zu Power Platform

• Erstellen und Bearbeiten von generativen Seiten mit KI-Codegenerierungstools
• Power Platform CLI-Referenz

Externe Referenzen

• Model Context Protocol (MCP)-Spezifikation
• Fluent UI-Webkomponenten
• Power Platform Skills Repository