Official agent skill

UI Widget Developer

by microsoft in microsoft/work-iq

Build MCP servers for Copilot Chat using the OpenAI Apps SDK or MCP Apps SDK widget rendering support (any language).

OfficialCustom licenceAuto-check: notesAgent Workflows

Install UI Widget Developer

skills CLI
$ npx skills add microsoft/work-iq --skill ui-widget-developer -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install microsoft/work-iq ui-widget-developer --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/microsoft/work-iq.git skills-src && mkdir -p .claude/skills && cp -r skills-src/plugins/microsoft-365-agents-toolkit/skills/ui-widget-developer .claude/skills/ui-widget-developer && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
ui-widget-developer
GitHub stars
1k
Token cost
~6.1k tokens
SKILL.md length
2,343 words
Files
7 (incl. references)
Skills in repo
18
Repo updated
First seen
Licence
Custom licence

At a glance

Build MCP servers for Copilot Chat using the OpenAI Apps SDK or MCP Apps SDK widget rendering support (any language).

  • Works in 3 steps: Run /plugin marketplace add… → Run /plugin install mcp-apps@mcp-apps → Confirm the plugin is available, then…
  • Deployment) — use declarative-agent-developer instead
  • SKILL.md covers Telemetry Tagging, 🔀 PATH SELECTION, 📛 PROJECT DETECTION 📛 and Scenario Routing, plus 10 more sections
  • Calls npm, npx and pip; reaches m365.cloud.microsoft

What it does

UI Widget Developer is an agent skill from microsoft/work-iq, published by the product's own GitHub organization. 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…

Its SKILL.md is about 6.1k tokens, which your agent loads only when the skill is triggered. The skill folder holds 7 other files, including reference files (for example `references/best-practices.md`, `references/copilot-widget-protocol.md` and `references/devtunnels.md`).

It sits in Agent Workflows, covering MCP servers and Project scaffolding. It works with Model Context Protocol, OpenAI, Microsoft 365 and Visual Studio Code. The repository describes itself as: MCP Server and CLI for accessing Work IQ.

When your agent uses it

  • Deployment) — use declarative-agent-developer instead
  • Tasks that involve MCP servers
  • Tasks that involve Project scaffolding

Example prompts

  • “MCP server for Copilot”
  • “OpenAI Apps SDK”
  • “Copilot widget”
  • “/ui-widget-developer”

Requirements

  • Node.js

Workflow steps

3 steps, taken from the first numbered list in SKILL.md.

  1. Run /plugin marketplace add modelcontextprotocol/ext-apps
  2. Run /plugin install mcp-apps@mcp-apps
  3. Confirm the plugin is available, then invoke the correct ext-apps skill based on user intent

What it can do on your machine

Read from SKILL.md and the folder at commit 1060873. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    Shell commands in SKILL.md call:

    • npm
    • npx
    • pip
    • python
    • dotnet

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    Hosts in commands or code, which the agent is likely to contact:

    • m365.cloud.microsoft

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

UI Widget Developer loads about 6.1k tokens when it runs, and up to ~22k if it reads all its reference files. Until then it costs about 236 tokens; SKILL.md has 2,343 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~236
When it runs · the whole SKILL.md, loaded when a task matches
~6.1k
With references · SKILL.md plus every file in references/, read only if the agent opens them
~22k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check: notes

The automated check noted patterns worth knowing about, such as sudo or a known installer.

  • NoteMentions a .env fileSKILL.md:195
    ft/chat/?titleId={M365_TITLE_ID from env/.env.local}
  • NoteMentions a .env fileSKILL.md:196
    Other envs: {SHARE_LINK from env/.env.{environment}}
  • NoteMentions a .env fileSKILL.md:289
    └── env/.env.local              # MCP_SERVER_URL, MCP_SERVER_DOMAIN
  • NoteMentions a .env fileSKILL.md:383
    3. Updates `env/.env.local` with `MCP_SERVER_URL` and `MCP_SERVER_DOMAIN` (first run only)

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

Its licence (Custom licence) doesn't allow us to republish the file, so here is its outline and opening line. It has 2,343 words (~6,064 tokens).

“Before running any atk CLI commands, set the session environment variable so all CLI invocations are tagged as skill-initiated:”

— opening of SKILL.md by microsoft, Custom licence
name
ui-widget-developer

Read the full SKILL.md on GitHub

Files

SKILL.md and 6 other files (references) in plugins/microsoft-365-agents-toolkit/skills/ui-widget-developer of microsoft/work-iq.

  • SKILL.md
  • references/best-practices.md
  • references/copilot-widget-protocol.md
  • references/devtunnels.md
  • references/mcp-server-pattern.md
  • references/plugin-schema.md
  • references/widget-patterns.md

Open the folder on GitHubat commit 1060873

Used in 1 other repository

We found 1 copy of this SKILL.md (exact, near-identical or edited) in other folders. This page covers the copy in microsoft/work-iq, which our catalogue first saw on October 7, 2026.

Compare with similar skills

UI Widget Developer next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

UI Widget Developer compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
UI Widget Developer this skillmicrosoft/work-iq1k—~6.1kAutomated safety check: NotesCustom licence
Cao MCP Appsawslabs/cli-agent-orchestrator1.4k—~1.9kAutomated safety check: PassApache-2.0
Chatgpt AppsHaohao-end/openagent8071 repos~4.9kAutomated safety check: PassApache-2.0
Chatgpt App Builderalpic-ai/skybridge2.1k—~1kAutomated safety check: PassMIT
MCP App Builderalpic-ai/skybridge2.1k—~906Automated safety check: PassMIT
Skybridgealpic-ai/skybridge2.1k—~923Automated safety check: PassMIT

Similar skills

  • Cao MCP Apps

    awslabs/cli-agent-orchestrator

    Official

    Enable, operate, and extend CAO's MCP Apps surface — the host-rendered fleet dashboard visible inside MCP App hosts (Claude Desktop, ChatGPT, VS Code Copilot, Goose, Postman).

    1.4k GitHub stars~1.9k tokensUpdated today
    Agent WorkflowsAuto-check passed
  • Chatgpt Apps

    Haohao-end/openagent

    Build, scaffold, refactor, and troubleshoot ChatGPT Apps SDK applications that combine an MCP server and widget UI.

    807 GitHub starsUsed in 1 repo~4.9k tokens
    Agent WorkflowsAuto-check passed
  • Chatgpt App Builder

    alpic-ai/skybridge

    Guide developers through creating and updating ChatGPT plugins.

    2.1k GitHub stars~1k tokensUpdated yesterday
    Agent WorkflowsAuto-check passed
  • MCP App Builder

    alpic-ai/skybridge

    Guide developers through creating and updating MCP Apps. An agent skill from alpic-ai/skybridge.

    2.1k GitHub stars~906 tokensUpdated yesterday
    Agent WorkflowsAuto-check passed
  • Skybridge

    alpic-ai/skybridge

    Guide developers through creating and updating ChatGPT plugins and MCP Apps.

    2.1k GitHub stars~923 tokensUpdated yesterday
    Agent WorkflowsAuto-check passed
  • Setup MCP Server

    nesquikm/mcp-rubber-duck

    Add mcp-rubber-duck MCP server to an AI coding tool (Claude Desktop, Cursor, VS Code, Windsurf, etc.)

    178 GitHub stars~1.3k tokensUpdated 2 days ago
    Agent WorkflowsAuto-check: notes

More from microsoft/work-iq

All 18 skills in this repo
  • Official

    Create, build, deploy, and localize declarative agents for M365 Copilot and Teams.

    1k GitHub stars~3.2k tokensUpdated today
    Auto-check passed
  • M365 Agent Evaluator

    microsoft/work-iq

    Official

    A skill your agent uses when a user wants to create, run, or analyze evaluation suites for Microsoft 365 Copilot declarative agents with the public @microsoft/m365-copilot-eval CLI.

    1k GitHub stars~2k tokensUpdated today
    Auto-check: notes
  • Install Atk

    microsoft/work-iq

    Official

    Install or update the M365 Agents Toolkit (ATK) CLI and VS Code extension.

    1k GitHub stars~668 tokensUpdated today
    Auto-check passed
  • Teams App Developer

    microsoft/work-iq

    Official

    Build, test, and deploy code-based Teams apps using the M365 Agents Toolkit CLI.

    1k GitHub stars~1.8k tokensUpdated today
    Auto-check: notes
  • Workiq

    microsoft/work-iq

    Official

    WorkIQ tools for Microsoft 365 workplace data and actions. An agent skill from microsoft/work-iq.

    1k GitHub stars~15k tokensUpdated today
    Auto-check passed
  • Slack To Teams

    microsoft/work-iq

    Official

    Sub-skill of microsoft-365-agents-toolkit. An agent skill from microsoft/work-iq.

    1k GitHub starsUsed in 1 repo~2.3k tokens
    Auto-check passed

Categories

Questions about UI Widget Developer

What does UI Widget Developer do?

Build MCP servers for Copilot Chat using the OpenAI Apps SDK or MCP Apps SDK widget rendering support (any language). UI Widget Developer is an agent skill from microsoft/work-iq, published by the product's own GitHub organization. Build MCP servers for Copilot Chat using the OpenAI Apps SDK or MCP Apps SDK widget rendering support (any language).

When should I use UI Widget Developer?

UI Widget Developer fits situations like: deployment) — use declarative-agent-developer instead; tasks that involve MCP servers; tasks that involve Project scaffolding.

How do I install UI Widget Developer in Claude Code?

Run `npx skills add microsoft/work-iq --skill ui-widget-developer -a claude-code`. Or copy the skill folder (plugins/microsoft-365-agents-toolkit/skills/ui-widget-developer in microsoft/work-iq) into .claude/skills/ui-widget-developer in your project. Claude Code loads it when a task matches its description.

How do I install UI Widget Developer in Codex?

Run `npx skills add microsoft/work-iq --skill ui-widget-developer -a codex`. Or copy the skill folder (plugins/microsoft-365-agents-toolkit/skills/ui-widget-developer in microsoft/work-iq) into .agents/skills/ui-widget-developer in your project. Codex loads it when a task matches its description.

Can I use UI Widget Developer in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add microsoft/work-iq --skill ui-widget-developer -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/ui-widget-developer, .gemini/skills/ui-widget-developer, .github/skills/ui-widget-developer and .opencode/skills/ui-widget-developer in your project.

What does UI Widget Developer need to run?

Going by SKILL.md and its folder, UI Widget Developer needs the command-line tools its instructions call (npm, npx, pip, python and dotnet). Our summary lists: Node.js.

Does UI Widget Developer access the network?

SKILL.md names 1 domain. In commands or code: m365.cloud.microsoft; the agent is likely to contact it when it follows the instructions. This is read from the text; nothing was executed.

Is UI Widget Developer safe to install?

Our automated static check of SKILL.md found notes only (mentions a .env file), nothing it rates as a warning. It is not a guarantee. Review the folder before installing.

What licence does UI Widget Developer use?

UI Widget Developer has a licence file (the repository's licence) that doesn't match a standard licence. Read it on GitHub before reusing the skill.

How many tokens does UI Widget Developer use?

About 6.1k tokens (SKILL.md is roughly 24k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 16k tokens, read only when the agent opens those files.

What are the alternatives to UI Widget Developer?

Skills that share tags, products or a category with UI Widget Developer: Cao MCP Apps (awslabs/cli-agent-orchestrator, 1.4k stars), Chatgpt Apps (Haohao-end/openagent, 807 stars), Chatgpt App Builder (alpic-ai/skybridge, 2.1k stars) and MCP App Builder (alpic-ai/skybridge, 2.1k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains UI Widget Developer?

microsoft (a GitHub organization, an official publisher) maintains it in microsoft/work-iq, which has 1,027 GitHub stars. The repository holds 18 skills in this directory. The repository was last updated on October 7, 2026.

Source: microsoft/work-iq on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.