Localized reading guide

ui-widget-developerPurpose, usage and source

Build MCP servers for Copilot Chat using the OpenAI Apps SDK or MCP Apps SDK widget rendering support (any language). Use this skill when: - Creating MCP servers that integrate with M365 Copilot declarative agents - Building rich interactive widgets (React + Fluent UI) that render in Copilot Chat - Implementing tools that return structuredContent for widget rendering - Adapting an existing MCP server to support Copilot widget rendering - Setting up devtunnels for localhost MCP server exposure - Configuring mcpPlugin.json manifests with RemoteMCPServer runtime Do NOT use this skill for general agent development (scaffolding, manifests, deployment) — use declarative-agent-developer instead. This skill is ONLY for MCP server + widget development. Triggers: "MCP server for Copilot", "OpenAI Apps SDK", "Copilot widget", "structuredContent", "MCP plugin", "devtunnels MCP", "OAI app", "widget rendering", "UI widget"

Source retrieved: 2026-10-29

Source repository: microsoft/skills
SKILL.md: .github/plugins/microsoft-365-agents-toolkit/skills/ui-widget-developer/SKILL.md
Repository stars: 3,157
Repository updated: 2026-10-31
Categories: Agent workflows
Last collected: 2026-10-31 10:38 UTC+08:00

License: MIT

Source SKILL.md

Workflow excerpts are reading aids, not executable instructions from Codez. No third-party Skill was run to produce this page.

The purpose and workflow passages below are upstream material, organized and translated for reading. They are distinct from the separately labeled Codez editorial analysis.

What this Skill does

How the upstream workflow works

Quick Start

Terminal 1 - Start MCP Server: Terminal 2 - Start DevTunnel: On first run, provision the agent once the tunnel is up (see AGENT PROVISIONING rule). On subsequent runs the tunnel URL is stable — no re-provisioning needed unless the agent manifest changes.

Upstream passage · L384 ↗

Development Workflow

Start the MCP server (dev mode with hot reload): TypeScript: cd mcp-server && npm install && npm run dev Python: cd mcp-server && pip install -r requirements.txt && python server.py C#: cd mcp-server && dotnet run

Upstream passage · L402 ↗

🚨 CRITICAL EXECUTION RULES 🚨

FLUENT UI ENFORCEMENT (REQUIRED): Widget implementations MUST use React + Fluent UI components. Before writing any widget code, the agent MUST read and follow: references/best-practices.md FLUENT UI PACKAGE REQUIREMENT (REQUIRED): The widget project MUST include Fluent UI dependencies before implementation. At minimum, install and keep these in the widget package dependencies: If any of these packages are missing, install them automatically before continuing with widget code generation. If the generated widget does not include React entry files (for example widgets/src//main.tsx and a React component file) and Fluent imports from @fluentui/react-components, the task is incomplete and MUST be corrected before returning results.

Upstream passage · L95 ↗

Upstream passage · bash ↗

export ATK_CLI_SKILL=true

Requirements and setup

DevTunnels Setup

> Local testing only. DevTunnels are for development and testing on your machine. Before sharing the agent more broadly, deploy both the MCP server and widget assets to a hosted environment (e.g., Azure App Service, Azure Static Web Apps, or another hosting provider) and update the agent manifest URLs accordingly. DevTunnels expose your localhost MCP server to M365 Copilot using named tunnels for stable URLs. See references/devtunnels.md for setup scripts, command reference, and troubleshooting.

Upstream passage · L372 ↗

Limits and quality checks

No separate limits passage was selected from this file. This does not mean the Skill is safe for every input or environment. Review the complete source and validate your own result.

Start with a safe trial

Check the supported host and the repository installation instructions. Keep the Skill directory and its referenced scripts, assets and documentation together; SKILL.md alone may omit dependencies.
Give the agent your real input, desired output and acceptance criteria. Invocation syntax and available tools depend on the host; this site does not assume a universal install command.
Try the source workflow in a disposable project or on a copy. Review operations that change files, remote services or billable resources before allowing them.
Validate the output against the source quality checks and your own requirements. A successful trigger or a high repository Star count does not establish a correct result.

Skill format and directory specification ↗

Read further in the source

Translation and scope

This reading guide selects passages from the pinned upstream SKILL.md. Translation is assisted. It is not a complete manual or a claim of tested compatibility. Read the original and its referenced files before use.

This introduction refers to the pinned version below; current repository activity and collection time are shown separately.

Pinned source: Read the original ↗
Source retrieved: 2026-10-29T09:32:23Z
Source commit: 00d66a64919edca5bca2c673373444e36a4b5461
Source SHA-256: b24d0babae9e85054d30765abca0043a2c310ba7dc980d1da258c39b87f8cd12

Back to the full Skill catalog