Generowanie widżetów aplikacji MCP za pomocą narzędzi do generowania kodu sztucznej inteligencji

[Ten temat pochodzi ze wstępnej wersji dokumentacji i może ulec zmianie.]

W tym artykule wyjaśniono, jak używać narzędzi do generowania kodu AI, takich jak GitHub Copilot CLI lub Claude Code, aby wygenerować aplikacje interaktywnego protokołu kontekstu modelu (MCP) dla opartych na modelu narzędziach MCP w usłudze Power Apps. Aplikacje MCP to samodzielne pliki HTML, które wizualnie prezentują dane wyjściowe JSON narzędzia jako karty, wykresy, pulpity nawigacyjne lub mapy w dowolnym hoście zgodnym z aplikacjami MCP, w tym Microsoft 365 Copilot, Claude i Visual Studio Code.

Jeśli masz narzędzie MCP, które zwraca dane JSON, umiejętność generate-mcp-app-ui może utworzyć dopracowany widżet obsługujący motyw, który wyświetla te dane w kompaktowym formacie wizualnym bezpośrednio wewnątrz konwersacji czatu.

Important

  • To jest funkcja w wersji zapoznawczej.
  • Funkcje w wersji zapoznawczej nie są przeznaczone do użytku w środowiskach produkcyjnych i mogą mieć ograniczoną funkcjonalność. Te funkcje są udostępniane przed oficjalnym wydaniem, dzięki czemu klienci mogą szybciej uzyskać do nich dostęp i przekazać opinie na ich temat.
  • Obsługa aplikacji MCP na platformie Microsoft 365 Copilot Chat jest ogólnie dostępna od marca 2026 r. Obsługa aplikacji MCP w agentach deklaratywnych w usłudze Power Apps jest obecnie dostępna w publicznej wersji zapoznawczej. Aby zapoznać się z pełnym ogłoszeniem, zobacz Aplikacje MCP są teraz dostępne w aplikacji Copilot Chat.

Co można zrobić za pomocą umiejętności generate-mcp-app-ui

  • Tworzenie widżetów wizualizacji dla dowolnego narzędzia MCP przez opisanie żądanych elementów i wklejanie danych wyjściowych JSON narzędzia.
  • Wybierz odpowiednią wizualizację danych, taką jak wykresy trendów liczbowych, karty rekordów strukturalnych, tabele dla porównań, mapy współrzędnych itd.
  • Obsługa motywów jasnych i ciemnych automatycznie za pomocą tokenów projektowych interfejsu użytkownika Fluent.
  • Dodaj interakcyjność, aby widżety mogły ponownie wywołać narzędzie w czasie wykonywania (na przykład przycisk odświeżania).
  • Udoskonalaj doświadczenie użytkownika w sposób iteracyjny, opisując zmiany w języku naturalnym. Na przykład "utwórz kompakt galerii", "dodaj wykres" lub "użyj układu karty".

Wymagania wstępne

Wymagania dotyczące oprogramowania

Składnik Minimalna wersja Więcej informacji
GitHub Copilot CLI, Claude Code lub inne narzędzie generowania kodu Latest Claude Code, GitHub Copilot CLI
Nowoczesna przeglądarka Dowolna Podgląd wygenerowanych widżetów lokalnie

Wymagania dodatkowe

  • Narzędzie MCP zwracające dane wyjściowe JSON. Typ danych wyjściowych narzędzia musi być ustawiony na JSON.
  • Działające połączenie internetowe. Widżety ładują Fluent UI i inne biblioteki z CDN w trakcie działania.

Instalowanie wtyczki

Uruchom następujące polecenie instalatora z narzędzia GitHub Copilot CLI lub Claude Code. Instalator automatycznie wykrywa dostępne narzędzia i instaluje wszystkie wtyczki platformy Power Platform, w tym generate-mcp-app-ui.

/plugin marketplace add microsoft/power-platform-skills

Aby zainstalować tylko funkcję widżetu aplikacji MCP:

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

Tip

Włącz automatyczną aktualizację, aby automatycznie otrzymywać aktualizacje umiejętności. /plugin Użyj polecenia, przejdź do Marketplaces, wybierz marketplace i włącz automatyczną aktualizację.

Omówienie umiejętności

Kwalifikacje Polecenie Description
Generator widżetów aplikacji MCP /generate-mcp-app-ui Generowanie samodzielnego widżetu aplikacji MCP (pliku HTML) dla danych wyjściowych JSON narzędzia MCP

Umiejętność jest również wyzwalana przez frazy języka naturalnego, takie jak "tworzenie widżetu", "tworzenie widżetu dla mojego narzędzia" lub "tworzenie aplikacji MCP".

Generowanie widżetu

Wykonaj następujące kroki, aby utworzyć nowy widżet dla narzędzia MCP.

  1. Utwórz i przetestuj niestandardowe narzędzie w projektantach aplikacji opartych na modelu i skopiuj pełne dane wyjściowe JSON. Upewnij się, że typ danych wyjściowych narzędzia jest ustawiony na wartość JSON. Więcej informacji: Tworzenie narzędzi niestandardowych

  2. Wywołaj umiejętności i opisz, co chcesz wyświetlić, wklejając dane wyjściowe JSON do konwersacji:

    /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. Przejrzyj wygenerowany plik HTML. Funkcja zapisuje samodzielny plik HTML, na przykład, flight-map.html do katalogu roboczego.

  4. Podgląd w przeglądarce. Otwórz plik HTML lokalnie, ponieważ widżet ma opcję rezerwową do testowania. Jeśli brakuje osobnej wersji podglądu HTML, możesz poprosić agenta czatu o dodanie jej.

  5. Iteruj. Opisz wszelkie zmiany bezpośrednio na czacie:

    • "Utwórz mapę większą"
    • „Dodaj etykietki narzędzi na wykresie”
    • „Zmniejsz wysokość i dopasuj obraz do 250 pikseli z układem dynamicznym i bez pasków przewijania”

Uwaga / Notatka

Umiejętność wymaga rzeczywistych danych JSON z narzędzia — a nie przykładowych lub symulowanych danych. Kształt danych napędza generowanie widżetu. Jeśli wklejasz pozorne dane, wygenerowany widżet może nie działać poprawnie po nawiązaniu połączenia z rzeczywistym narzędziem.

Wdrażanie widżetu

Gdy widżet będzie gotowy, skopiuj plik HTML do wejścia UX odpowiedniego narzędzia, a zostanie on zwrócony jako odpowiedź tego narzędzia w interfejsie użytkownika. Aby uzyskać szczegółowe informacje, zapoznaj się z dokumentacją tworzenia narzędzi niestandardowych .

Dodawanie interakcyjności za pomocą narzędzia callServerTool

Jeśli podasz również nazwę narzędzia podczas wywoływania umiejętności, wygenerowany widżet może zawierać interaktywną integrację wywołań narzędzi. Dzięki temu widżet może ponownie wywołać narzędzie w czasie wykonywania. Na przykład przycisk odświeżania w interfejsie użytkownika narzędzia może wywołać sam siebie.

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

Umiejętność uruchamiania app.callServerTool w widżecie, aby po wybraniu przez użytkowników opcji Odśwież widżet pobrał zaktualizowane dane bezpośrednio z Twojego narzędzia. Jeśli nie podasz nazwy narzędzia, widżet jest tylko do odczytu i renderuje tylko dane dostarczane za pośrednictwem wywołania zwrotnego ontoolresult .

  • Microsoft 365 Copilot Chat: zobacz Aplikacje MCP w Copilot Chat, aby poznać ścieżki wdrożenia, w tym ręczne ładowanie do testowania, wdrażanie przez centrum administracyjne Microsoft 365 do użytku w organizacji oraz publikowanie w sklepie z agentami Microsoft 365.
  • Agenci deklaratywne usługi Power Apps: zobacz dokumentację agenta deklaratywnego MCP usługi Power Apps , aby dowiedzieć się, jak połączyć narzędzia MCP z aplikacjami opartymi na modelu.
  • Inne hosty MCP: zapoznaj się z dokumentacją hosta dotyczącą procesu rejestracji widżetu aplikacji MCP.

Szczegóły techniczne widżetu

Protokół aplikacji MCP

Widżety komunikują się z hostem czatu przy użyciu App klasy z @modelcontextprotocol/ext-apps pakietu. Protokół zarządza tymi wywołaniami zwrotnymi i metodami.

Wywołanie zwrotne/metoda Description
app.ontoolresult Uruchamia się, gdy host dostarcza dane narzędzi. Twoje dane są zawsze na result.structuredContent— nie na result.data ani na result samym.
app.onhostcontextchanged Uruchamia się, gdy kontekst hosta ulegnie zmianie, w tym motyw (ctx.theme to 'light' lub 'dark').
app.onteardown Uruchamia się po usunięciu widżetu z konwersacji.
app.connect() Ustanawia komunikację z hostem. Wszystkie programy obsługi zdarzeń muszą być zarejestrowane przed wywołaniem metody connect().
app.getHostContext() Zwraca bieżący kontekst hosta, w tym motyw początkowy, po zakończeniu connect().
app.callServerTool({ name, arguments }) Wywołuje narzędzie interaktywnie. Zwraca wartości result.isError i result.structuredContent.

Importowanie sieci CDN

Widżety ładują wszystkie zależności z usługi CDN. Nie jest wymagany żaden krok kompilacji ani instalacja lokalna. Zależności mają dwa formaty:

  • Moduły ECMAScript (ESM) — importowane wewnątrz <script type="module"> przy użyciu adresu URL kończącego się na /+esm

  • Universal Module Definition (UMD) — ładowana za pośrednictwem zwykłego <script src> tagu; rejestruje się globalnie jako efekt uboczny

    Biblioteka Forma adres URL Przeznaczenie
    @modelcontextprotocol/ext-apps ESM cdn.jsdelivr.net/npm/@modelcontextprotocol/ext-apps/+esm Klasa aplikacji App MCP
    @fluentui/tokens ESM cdn.jsdelivr.net/npm/@fluentui/tokens/+esm webLightTheme / webDarkTheme zestawy tokenów
    @fluentui/web-components@beta UMD (Uniwersalny Dysk Multimedialny) unpkg.com/@fluentui/web-components@beta/dist/web-components.min.js Elementy niestandardowe interfejsu użytkownika Fluent

Stany wizualne

Każdy widżet obsługuje trzy stany:

Stan Wskazówki
Ładowanie Pokaż element <fluent-spinner> z kontekstowym komunikatem („Znajdowanie atrakcji...”, a nie tylko „Trwa ładowanie...”).
Załadowano Renderuj zawartość kompaktowo. Użyj pełnej dostępnej szerokości.
Błąd Pokaż przyjazny komunikat i przycisk "Spróbuj ponownie". Jeśli widżet używa callServerToolelementu , przycisk ponownie wywołuje narzędzie.

Składniki interfejsu użytkownika Fluent

Następujące składniki internetowe interfejsu użytkownika Fluent są dostępne w widżetach:

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

Obsługa motywów

Widżety obsługują motywy jasne i ciemne za pomocą tokenów projektowych interfejsu użytkownika Fluent. Widżet stosuje prawidłowe wartości tokenu, gdy motyw hosta zmieni się za pośrednictwem elementu onhostcontextchanged. Zawsze używaj zmiennych tokenu, na przykład , var(--colorNeutralForeground1)a nie zakodowanych na stałe wartości kolorów, aby zapewnić poprawne renderowanie w obu motywach.

Tokeny kolorów

Używanie Token
Tekst podstawowy var(--colorNeutralForeground1)
Tekst pomocniczy var(--colorNeutralForeground2)
Podstawowe tło var(--colorNeutralBackground1)
Tło karty/po najechaniu kursorem var(--colorNeutralBackground2)
Znak/akcent var(--colorBrandBackground)
Tekst na powierzchni marki var(--colorNeutralForegroundOnBrand)
Granice var(--colorNeutralStroke1)
Tekst błędu var(--colorStatusDangerForeground1)
Tekst pomyślności var(--colorStatusSuccessForeground1)

Nigdy nie używaj na sztywno zakodowanych wartości szesnastkowych lub RGB. Nie wymyślaj nazw tokenów, które nie są wymienione tutaj.

Najlepsze praktyki

  • Podaj rzeczywiste dane testowe. Umiejętność analizuje rzeczywistą strukturę JSON, aby wybrać odpowiednią wizualizację. Dane testowe generują widżety, które zawodzą przy połączeniu z rzeczywistym narzędziem.
  • Należy być precyzyjnym odnośnie elementów wizualnych. Opisz żądany format, taki jak mapa, wykres, tabela lub układ karty. Niejasne opisy prowadzą do ogólnych wyników.
  • Zacznij od jednego widoku. Widżety to kompaktowe karty konwersacji, a nie pełne aplikacje. Brak kart, nawigacji stron ani pasków wyszukiwania, które duplikują dane wejściowe czatu.
  • Przetestuj oba motywy. Podgląd w trybie jasnym i ciemnym w celu zweryfikowania kontrastu i czytelności.
  • Dopasuj wizualizację do danych. Mapy dla współrzędnych, wykresy dla danych liczbowych lub trendów, karty zapisów strukturalnych, tabele dla porównań.

Ograniczenia

  • Widżety muszą ładować wszystkie biblioteki zewnętrzne z usługi CDN. Połączenie internetowe jest wymagane w czasie wykonywania.
  • Tryb wyświetlania pełnoekranowego wymaga dodatkowej implementacji poza tym, co generuje umiejętność.
  • Ta umiejętność nie obsługuje rejestracji ani wdrażania serwera MCP w centrum administracyjnym platformy Microsoft 365. Należy wykonać te kroki oddzielnie.
  • Uwierzytelnianie (OAuth 2.1, Microsoft Entra SSO) jest obsługiwane przez środowisko hosta MCP, a nie sam kod HTML widżetu.

Dokumentacja dla deweloperów platformy Microsoft 365

Dokumentacja platformy Power Platform

Odwołania zewnętrzne

  • Last updated on