Skip to content
MCP Apps Tool and Widget Generator

MCP Apps Tool and Widget GeneratorSkill

by Microsoft
Added to Onei
5 views
v1.2.0
MIT
Repository Docs
markdown Development

Summary

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.

Features

  • 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

Install This Skill

Add this skill to your favorite AI agent in a few steps.

Any AI agent

This skill is plain instructions — it works with any assistant that accepts custom instructions or system prompts.

  1. Copy the skill content with the button below.
  2. Paste it into your agent's instruction file or system prompt (for example AGENTS.md, .cursorrules, or a custom instructions field).
  3. Ask the agent to apply the skill whenever the task matches.

Skill Content

Markdown Content

Copy this content and use it with your preferred AI agent

# 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.

Usage Instructions

Learn how to use this skill with different AI agents.

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

Description

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.

Related Skills

Skill: Local AI Use (Lemonade routing)

by AMD

New

AMD's official meta-skill: permanently reroutes an agent's image generation, text-to-speech and speech-to-text to a local Lemonade Server instead of a paid cloud API.

Development
17 views 1 copies

Skill: Trail of Bits Static Analysis

by Trail of Bits

Featured

CodeQL, Semgrep and SARIF static-analysis toolkit from Trail of Bits: taint tracking, fast pattern scans and merged, deduplicated security findings for coding agents.

Development
13 views

Skill: Playwright CLI

by Microsoft

Featured

Microsoft's official Playwright skill — drives a real browser from the command line using accessibility snapshots and element refs, and plans, generates and heals Playwright tests.

Development
9 views 1 copies

Skill: Google Maps Platform

by Google Maps Platform

Featured

Google's official agent skill for writing production Maps Platform code — grounded in freshly fetched docs, with a demo key path that needs no billing account.

Development
21 views
Browse all skills →