Lokalisierter Leseleitfaden

ui-widget-developerZweck, Verwendung und Quelle

Erstellen Sie MCP-Server für Copilot Chat mithilfe der Widget-Rendering-Unterstützung des OpenAI Apps SDK oder des MCP Apps SDK (beliebige Sprache). Nutzen Sie diese Fähigkeit, wenn Sie: - MCP-Server erstellen, die in M integriert sind365Copilot-Deklarativagenten – Entwicklung interaktiver Widgets (React + Fluent UI) für Copilot Chat – Implementierung von Tools zur Bereitstellung von strukturiertem Inhalt für die Widget-Darstellung – Anpassung eines bestehenden MCP-Servers zur Unterstützung der Copilot-Widget-Darstellung – Einrichtung von Entwicklungstunneln für die lokale MCP-Server-Applikation – KonfigurationmcpPlugin.jsBei Manifesten mit RemoteMCPServer-Laufzeitumgebung: Verwenden Sie diese Skill NICHT für die allgemeine Agentenentwicklung (Gerüst, Manifeste, Bereitstellung) – verwenden Sie stattdessen declarative-agent-developer. Diese Skill ist AUSSCHLIESSLICH für die Entwicklung von MCP-Servern und Widgets vorgesehen. Trigger: „MCP-Server für Copilot“, „OpenAI Apps SDK“, „Copilot-Widget“, „strukturierter Inhalt“, „MCP-Plugin“, „devtunnels MCP“, „OAI-App“, „Widget-Rendering“, „UI-Widget“

Quelle abgerufen: 2026-10-29

Quell-Repository: microsoft/skills
SKILL.md: .github/plugins/microsoft-365-agents-toolkit/skills/ui-widget-developer/SKILL.md
Repository-Sterne: 3,157
Repository zuletzt aktualisiert: 2026-10-31
Fähigkeitskategorien: Agenten-Workflow
Letzte Datenerfassung: 2026-10-31 10:38 UTC+08:00

Lizenz: MIT

Original SKILL.md

Die Workflow-Auszüge dienen als Lesehilfe und sind keine ausführbaren Anweisungen von Codez. Für die Erstellung dieser Seite wurde keine Drittanbieter-Skill verwendet.

Die folgenden Abschnitte zu Zweck und Arbeitsablauf sind vorgelagertes Material, das zur besseren Lesbarkeit aufbereitet und übersetzt wurde. Sie unterscheiden sich von der separat gekennzeichneten redaktionellen Analyse von Codez.

Was diese Fähigkeit bewirkt

Wie der vorgelagerte Workflow funktioniert

Schnellstart

Terminal1- MCP-Server starten: Terminal2- DevTunnel starten: Beim ersten Start muss der Agent bereitgestellt werden, sobald der Tunnel aktiv ist (siehe Regel „AGENTENBEREITSTELLUNG“). Bei nachfolgenden Starts bleibt die Tunnel-URL stabil – eine erneute Bereitstellung ist nur erforderlich, wenn sich das Agentenmanifest ändert.

Aufwärtspassage · L384 ↗

Entwicklungs-Workflow

Starten Sie den MCP-Server (Entwicklermodus mit Hot Reload): TypeScript:cd mcp-server && npm install && npm run devPython:cd mcp-server && pip install -r requirements.txt && python server.pyC#:cd mcp-server && dotnet run

Aufwärtspassage · L402 ↗

🚨 KRITISCHE AUSFÜHRUNGSREGELN 🚨

FLUENT UI-KONFORMITÄT (ERFORDERLICH): Widget-Implementierungen MÜSSEN React + Fluent UI-Komponenten verwenden. Bevor der Agent Widget-Code schreibt, MUSS er Folgendes lesen und befolgen:references/best-practices.mdFLUENT UI-PAKETVORAUSSETZUNG (ERFORDERLICH): Das Widget-Projekt MUSS vor der Implementierung Fluent UI-Abhängigkeiten enthalten. Installieren und behalten Sie mindestens die folgenden Pakete in den Widget-Paketabhängigkeiten: Falls eines dieser Pakete fehlt, installieren Sie es automatisch, bevor Sie mit der Widget-Codegenerierung fortfahren. Falls das generierte Widget keine React-Einstiegsdateien enthält (z. B.widgets/src//main.tsxund einer React-Komponentendatei) und Fluent-Importen von@fluentui/react-componentsDie Aufgabe ist unvollständig und muss korrigiert werden, bevor Ergebnisse zurückgegeben werden können.

Aufwärtspassage · L95 ↗

Aufwärtspassage · bash ↗

export ATK_CLI_SKILL=true

Anforderungen und Einrichtung

DevTunnels-Einrichtung

Nur lokale Tests. DevTunnels sind für die Entwicklung und das Testen auf Ihrem Rechner vorgesehen. Bevor Sie den Agenten breiter bereitstellen, müssen Sie sowohl den MCP-Server als auch die Widget-Ressourcen in einer gehosteten Umgebung (z. B. Azure App Service, Azure Static Web Apps oder einem anderen Hosting-Anbieter) bereitstellen und die Agentenmanifest-URLs entsprechend aktualisieren. DevTunnels stellen Ihren lokalen MCP-Server für M bereit.365Copilot verwendet benannte Tunnel für stabile URLs. Siehereferences/devtunnels.mdfür Setup-Skripte, Befehlsreferenz und Fehlerbehebung.

Aufwärtspassage · L372 ↗

Grenzwerte und Qualitätskontrollen

Aus dieser Datei wurde kein separater Grenzwertabschnitt ausgewählt. Dies bedeutet nicht, dass die Anwendung für jede Eingabe oder Umgebung geeignet ist. Überprüfen Sie den vollständigen Quellcode und validieren Sie Ihr Ergebnis selbst.

Beginnen Sie mit einem sicheren Testlauf

Prüfen Sie den unterstützten Host und die Installationsanweisungen für das Repository. Halten Sie das Skill-Verzeichnis und die darin enthaltenen Skripte, Assets und Dokumentationen zusammen;SKILL.mdEine Einzelperson kann Abhängigkeiten außer Acht lassen.
Geben Sie dem Agenten Ihre tatsächlichen Eingaben, die gewünschten Ausgaben und die Akzeptanzkriterien an. Aufrufsyntax und verfügbare Tools hängen vom Hostsystem ab; diese Website geht nicht von einem universellen Installationsbefehl aus.
Testen Sie den Quellworkflow in einem temporären Projekt oder auf einer Kopie. Überprüfen Sie Vorgänge, die Dateien, Remote-Dienste oder abrechnungsfähige Ressourcen ändern, bevor Sie diese zulassen.
Überprüfen Sie die Ausgabe anhand der Quellqualitätsprüfungen und Ihrer eigenen Anforderungen. Ein erfolgreicher Trigger oder eine hohe Anzahl von Sternen im Repository garantiert kein korrektes Ergebnis.

Spezifikation des Kompetenzformats und des Verzeichnisses ↗

Lesen Sie mehr dazu in der Quelle.

Übersetzung und Umfang

Dieser Leseleitfaden wählt Passagen aus dem markierten stromaufwärts gelegenen Abschnitt aus.SKILL.mdDie Übersetzung wurde unterstützt. Es handelt sich weder um ein vollständiges Handbuch noch um eine Garantie für geprüfte Kompatibilität. Lesen Sie vor der Verwendung das Original und die darin referenzierten Dateien.

Diese Einleitung bezieht sich auf die unten angepinnte Version; die aktuelle Repository-Aktivität und der Erfassungszeitpunkt werden separat angezeigt.

Angeheftete Quelle: Lesen Sie das Original ↗
Quelle abgerufen: 2026-10-29T09:32:23Z
Source-Commit: 00d66a64919edca5bca2c673373444e36a4b5461
Quelle SHA-256: b24d0babae9e85054d30765abca0043a2c310ba7dc980d1da258c39b87f8cd12

Zurück zum vollständigen Kompetenzkatalog