Copilot MCP Widget Builder
Build interactive React widgets and MCP servers for Microsoft 365 Copilot Chat.
The documentation promotes caller-supplied data, origin allowlisting, path-traversal guards, React escaping, and non-destructive tool annotations, and it discloses DevTunnel and CSP data flows. However, its RemoteMCPServer example uses auth None, the DevTunnel guidance includes anonymous access, and the automation guidance does not sufficiently define authentication, sensitive-data handling, user confirmation, isolation, or rollback. Points are deducted for those gaps.
The skill covers MCP sessions, resource registration, structured output, partial-data normalization, and unknown-tool handling, making the happy path plausible. However, the main server example does not include the asset route until a later add-on snippet, while JSON parsing, dependency failures, authentication failures, network errors, and process cleanup have limited diagnostic handling. Static-review limits also require a conservative score.
Triggers, audience, scenarios, OAI Apps versus MCP Apps routing, and the boundary against general agent development are reasonably clear. Evidence is limited for language variations, client differences, offline use, and mainland-China network reachability; the core workflow depends on external DevTunnel, npm, and Copilot services. Points are deducted for those environment uncertainties.
The material has strong layered documentation with path selection, architecture, protocol guidance, examples, troubleshooting, dependencies, version bumping, license metadata, and official repository provenance. Maintenance ownership, changelog practice, compatibility matrices, dependency version policy, and security-update paths remain incomplete, and requirements are distributed across several references. Points are deducted accordingly.
The skill supplies reusable patterns for MCP servers, React/Fluent UI widgets, resource-tool binding, and local tunneling, so the core task value is clear. However, there are no committed executed outputs or execution results for this skill, and the TypeScript examples still require integration and environment-specific correction. The static calibration therefore limits the score.
The files contain concrete protocol shapes, commands, checklists, reference implementations, and auditable repository CI/test signals. They do not contain executed results, committed key-path tests, or independent reproduction records for this skill, and the CI evidence does not establish coverage of the selected path. The score is therefore kept within the static-review ceiling.
- Do not use auth None or anonymous DevTunnels by default in production; define authentication, least privilege, sensitive-data boundaries, user confirmation, and revocation or rollback.
- The primary server example and the later asset-serving snippet must be integrated and validated; no executed evidence is provided for the skill's key paths.
- The OAI Apps description claims ChatGPT support, while the protocol examples primarily allowlist m365.cloud.microsoft origins; client-specific origins should be added and verified.
- The workflow depends on npm, DevTunnels, remote Copilot services, and external plugin installation; mainland-China network, proxy, and offline compatibility is unverified.
What does this skill do, and when should you use it?
This skill guides development of MCP servers and rendered widgets for Microsoft 365 Copilot Chat using the OpenAI Apps SDK or MCP Apps Extension. It covers Streamable HTTP, structured content, MCP resources, CSP metadata, Fluent UI widgets, devtunnels, and mcpPlugin.json configuration. Widgets are required to use React and Fluent UI, with MCP resources connecting tool output to rendered UI. The skill does not cover general agent development, agent scaffolding, manifest lifecycle, or deployment design.
It guides creation or adaptation of MCP servers in TypeScript, Python, C#, or other MCP-capable languages; implementation of /mcp, /health, /widgets, and /assets routes; responses containing content, structuredContent, and widget metadata; registration of ui://widget/<name>.html resources; React and Fluent UI widget development using FluentProvider and window.openai.toolOutput; RemoteMCPServer configuration; MCP Inspector-based tool-definition extraction and end-to-end verification; and devtunnel setup for exposing a local server.
- A developer adding an MCP server and interactive widgets to an existing Microsoft 365 Copilot declarative agent.
- A team adapting an existing MCP server for Copilot Chat widget rendering.
- A frontend engineer building structured-data views with React and Fluent UI inside Copilot Chat.
- A developer exposing a localhost MCP server through a devtunnel for Copilot testing.
- A team keeping mcpPlugin.json tool definitions synchronized with a running MCP server through MCP Inspector.
What are this skill's strengths and limitations?
- Covers the full integration path from MCP server and resources to tool metadata, React widgets, and Copilot testing.
- Provides explicit requirements for Fluent UI, structuredContent, MCP Inspector, and end-to-end verification.
- Supports TypeScript, Python, C#, and other languages that implement MCP.
- Documents local devtunnel testing and the conditions for reprovisioning an agent.
- Scoped to MCP server and Copilot widget development rather than general agent scaffolding or deployment.
- Requires React, React DOM, and Fluent UI by default, so it is not aimed at raw HTML widgets.
- Requires shell access, the Node.js ecosystem, devtunnel, MCP Inspector, and network connectivity.
- The README identifies the repository as under active development; the supplied material does not provide test coverage for this individual skill.
How do you install this skill?
In Copilot CLI, run:
npx skills add microsoft/skills- Select
ui-widget-developerin the installation wizard.
The repository also supports installing the broader collection through the plugin marketplace with /plugin marketplace add microsoft/skills and the relevant plugin command. The source does not provide a dedicated installation command for this individual skill.
How do you use this skill?
Use a trigger such as Build an MCP server for Copilot with a React widget, Add a Copilot widget to my MCP server, or Configure structuredContent for widget rendering. Before implementation, choose between OAI Apps and the MCP Apps Extension: OAI Apps are described as battle-tested for ChatGPT and Microsoft 365 Copilot, while MCP Apps is the newer official MCP standard targeting Microsoft 365 Copilot, ChatGPT, VS Code, and more. For MCP Apps, the source gives these commands: /plugin marketplace add modelcontextprotocol/ext-apps and /plugin install mcp-apps@mcp-apps.
How does this skill compare with similar options?
The skill explicitly compares OAI Apps with the MCP Apps Extension. OAI Apps are OpenAI-specific, described as production-ready, and work in ChatGPT and Microsoft 365 Copilot. MCP Apps is described as a newer official MCP standard intended to work across Microsoft 365 Copilot, ChatGPT, VS Code, and more.