ui-widget-developer
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 genera
Profile →npx skills add microsoft/skills --skill ui-widget-developer --agent copilot
Same command for any agent — swap --agent for claude-code, codex, cursor.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
What it does
Guides a developer to build MCP servers for Copilot Chat and render rich interactive widgets using React + Fluent UI. It covers selecting between OpenAI Apps SDK (OAI apps) or MCP Apps Extension paths, plus steps for devtunnels, mcpPlugin.json manifests, and widget/resource setup. It emphasizes widget rendering via structuredContent and integrating with Copilot widgets.
How it works
- It instructs setting an environment variable ATK_CLI_SKILL=true before running atk CLI commands.
- It requires using AskUserQuestion to choose between OAI Apps (OpenAI Apps SDK) or MCP Apps Extension before coding or executing commands.
- It provides commands to install and verify the MCP Apps extension plugin when MCP Apps is chosen, and lists reference commands for plugin installation and skill handoffs.
- It mandates that all widget implementations use React + Fluent UI and includes a minimum dependency set: @fluentui/react-components, react, and react-dom, with automatic installation if missing.
- It describes background process handling for MCP server and devtunnel, including platform-specific guidance (Windows, Linux/Mac) and logging/pid management.
- It outlines extensive widget/resource deployment workflow, including creating widget shells, defining URI constants, and adding MCP resources and output templates, with a strong emphasis on produced assets via MCP server at /assets and proper resources/read handlers.
- It enforces a full automation expectation: install tools, authenticate, start services, run E2E checks, and provision the agent if needed, with explicit steps for testing widgets locally and providing test links.
- It includes a detailed project structure example and an architecture diagram showing the flow from Copilot to mcpPlugin.json to MCP Server to widgets.
When to use it
Use when you are building MCP servers that integrate with M365 Copilot declarative agents and rendering widgets, or when adapting existing MCP servers to support Copilot widget rendering, establishing devtunnels, and configuring mcpPlugin.json for RemoteMCPServer runtime. It is not for general agent scaffolding or deployment.
What it can touch
- It instructs interactions with the OpenAI Apps SDK or MCP Apps SDK and widget rendering tooling.
- It references the MCP Apps extension plugin commands for MCP Apps path, including:
- /plugin marketplace add modelcontextprotocol/ext-apps
- /plugin install mcp-apps@mcp-apps
- It requires the developer to implement widget shells and resources under specified widget directories (e.g., widgets/ and widgets/src/<widget-name>/) and to configure resources in the MCP server setup.
- It prescribes using devtunnel and MCP server processes as separate OS processes (background) with appropriate logging and PID handling.
Caveats
- The skill explicitly states to use the OAI Apps path unless the user selects MCP Apps; it warns not to use this skill for general agent development and to use declarative-agent-developer for scaffold/deployment tasks.
- It requires Fluent UI usage and package presence; if dependencies are missing, it instructs automatic installation.
- It emphasizes automation standards: do not require manual user command steps; the agent must handle installation, startup, and verification autonomously.
- It enforces a pre-implementation path question via AskUserQuestion and a handoff to MCP Apps skills if the user chooses that path.
# Copilot MCP Server Development ## Telemetry Tagging Before running any `atk` CLI commands, set the session environment variable so all CLI invocations are tagged as skill-initiated: ```bash export ATK_CLI_SKILL=true ``` Run this once at the start of the session. All subsequent `atk` commands in the same terminal will inherit it. ## 🔀 PATH SELECTION **Before proceeding, ask the user which path t
What does the ui-widget-developer skill do?
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 genera
How do I install it?
Run `npx skills add microsoft/skills --skill ui-widget-developer --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From microsoft/skills, a repository with 2,860 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.