Skip to content
MCP Apps Tool and Widget Generator

MCP Apps Tool and Widget Generator Skill

by Microsoft microsoft/power-platform-skills

Microsoft's official plugin that generates codeful MCP tools — a self-contained JS runtime plus JSON Schema metadata — and single-file HTML widgets to visualise their results.

GitHub Docs
Development
Added to Onei
v1.2.0
MIT

Install

Install with the skills CLI

One command for Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf and dozens of other agents. Needs Node.js; the skill is fetched straight from microsoft/power-platform-skills.

$ npx skills add microsoft/power-platform-skills

Run it in a terminal. The CLI finds the agents installed on your machine, asks which ones to add the skill to, and whether to install it into the folder you ran it from or for all your projects. It also lists the skills in the repository so you can pick MCP Apps Tool and Widget Generator.

Other ways to install

  1. Open the skill on GitHub and download the folder that holds its SKILL.md.
  2. Put it at ~/.claude/skills/microsoft-mcp-apps/, where Claude Code picks it up in every project.

No scripts or references next to it? Saving the SKILL.md alone as ~/.claude/skills/microsoft-mcp-apps/SKILL.md works too.

Using another agent? Its personal skills folder
Codex
~/.agents/skills/
Cursor
~/.cursor/skills/
GitHub Copilot
~/.copilot/skills/
Gemini CLI
~/.gemini/skills/
Windsurf
~/.codeium/windsurf/skills/
OpenCode
~/.config/opencode/skills/
Open folder on GitHub

About

  • Generates a self-contained runTool() JavaScript runtime with no external dependencies
  • Emits a JSON sidecar with MCP annotations, input schema and structured output schema
  • Types Dataverse-backed tools against real table schemas discovered via PAC CLI
  • Builds single-file HTML widgets that embed their runtime for restrictive hosts
  • Optional CDN mode for widgets, opt-in only

The official Microsoft plugin for building MCP Apps: codeful Model Context Protocol tools paired with interactive widgets that render their output. It is a narrow, unusually well-specified generator, and the constraints it enforces are the interesting part.

`/generate-codeful-mcp-tool` produces a matched pair from a description of the tool's purpose, inputs, expected result and any Dataverse data it needs:

  • <tool-name>.tool.js — a self-contained runtime exporting runTool({ toolInput, dataApi }), with no packages, imports, network access, filesystem access, environment variables or persistent state.
  • <tool-name>.tool.json — registration metadata: name, description, MCP behaviour annotations (such as readOnlyHint), input schema and structured output schema.

Keeping registration in a JSON sidecar rather than in executable code is a deliberate separation that makes tools reviewable. For Dataverse-backed tools the skill uses the PAC CLI to discover exact table logical names and generates a temporary RuntimeTypes.ts carrying verified columns, lookup shapes and choice values, deleting it after generation — so the emitted code is typed against the real schema rather than a guess.

`/generate-mcp-app-ui` creates a single-file HTML widget that visualises a tool's result. By default it embeds its runtime inline, so it works on hosts that block public URLs; a CDN mode is available but must be opted into explicitly. Widgets can consume model-visible content, structured output and widget-private metadata, and are built with Fluent UI.

Published by Microsoft under the MIT licence for Claude Code and GitHub Copilot CLI.

SKILL.md

The instructions your agent loads, as published by Microsoft.

SKILL.md

MCP Apps Tool and Widget Generator

Generate JavaScript server runtimes and JSON Schema registration metadata for
codeful MCP tools, plus single-file HTML widgets that visualize their results.

Install

/plugin marketplace add microsoft/power-platform-skills
/plugin install mcp-apps@power-platform-skills

From a local clone:
claude --plugin-dir /path/to/power-platform-skills/plugins/mcp-apps

Skills

/generate-codeful-mcp-tool
Input: the tool's purpose, inputs, expected result, and any Dataverse data.
Output: a matched pair.
<tool-name>.tool.js self-contained runtime
<tool-name>.tool.json registration metadata + MCP annotations

The runtime exports:
export async function runTool({ toolInput, dataApi }) { ... }

It is self-contained: no packages, imports, network access, filesystem
access, environment variables, or persistent state.

For Dataverse-backed tools the skill uses PAC CLI to discover exact table
logical names and generates a temporary RuntimeTypes.ts for verified
columns, lookup shapes and choice values; the type file is removed after
generation.

/generate-mcp-app-ui
Creates a single-file HTML widget. It embeds its runtime by default for
hosts that block public URLs, with an opt-in CDN mode. It can consume
model-visible content, structured output, and widget-private metadata.

Stack: JavaScript codeful tools + HTML widgets using the MCP Apps protocol,
Fluent UI.

Install

Related Skills

See all MCP Apps Tool and Widget Generator alternatives

Skill: Frontend Design

by Anthropic

Guidance for distinctive, intentional UI design — aesthetic direction, typography, and choices that avoid looking like templated defaults.

Design & Creative
Browse all skills →