Skip to content
MCP Apps Tool and Widget Generator

MCP Apps Tool and Widget GeneratorSkill

by Microsoft
Added to Onei
1 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: Use Railway

by Railway

New

Railway's official agent skill: create projects, provision databases and buckets, deploy, manage variables and domains, and read build failures back — from the CLI, API or MCP server.

Development
1 views

Skill: NVIDIA Warp Gradient Debugging

by NVIDIA

New

Diagnoses wrong gradients in differentiable NVIDIA Warp programs by measuring first — comparing autodiff against finite differences on a shrunk reproduction before proposing any fix.

Development
4 views

Skill: Google Workspace CLI (gws)

by Google Workspace

New

Google's official skill for the gws CLI — drive Gmail, Drive, Calendar, Sheets, Docs, Chat and Admin APIs from an agent, with Model Armor screening.

Development
6 views 1 copies

Skill: Netlify Database

by Netlify

New

Netlify's official skill for zero-config managed Postgres — querying from Functions, Drizzle setup, migrations and per-preview database branches.

Development
4 views
Browse all skills →