mcp-tool-generator

name: mcp-tool-generator description: "Generate a TypeScript MCP server with frontend tools for each discovered application feature. Uses @modelcontextprotocol/ext-apps for tool registration and @mcp-ui/server for UI content. Reads feature maps from feature-mapper and optionally code maps from code-correlator. Use when asked to: generate MCP tools, create frontend MCP, build MCP server, create tools for this app, generate mcp-ui tools, build tool server."

MCP Tool Generator

Overview

This skill generates a complete TypeScript MCP server from feature documentation created by feature-mapper. It uses @modelcontextprotocol/ext-apps for tool and resource registration and @mcp-ui/server for UI content generation. The output contains one tool per discovered feature, with content limited to rawHtml and externalUrl.

Prerequisites

• Feature map exists at .claude/artifacts/feature-map-*/ (required).
• Code map exists at .claude/artifacts/code-map-*/ (optional enrichment).
• Node.js + TypeScript environment is available for generated server validation.
• Pipeline 1 -> 2 -> 4 is supported (you can skip code-correlator).

Generation Workflow

Step 1: Read Input

• Load feature map JSON from .claude/artifacts/feature-map-*/.
• If no feature map is found, stop and instruct the user to run feature-mapper first.
• If available, load code map JSON from .claude/artifacts/code-map-*/.
• If code map is missing, continue without code references.

Step 2: Categorize Features

• Group features by behavior type:
  • form submission
  • navigation
  • data display
  • action trigger

Step 3: Determine Content Types

• Apply mapping rules from references/input-format.md:
  • dashboard / reporting -> externalUrl
  • form / crud / settings -> rawHtml
  • navigation / search -> externalUrl
  • other -> externalUrl (safe default)

Step 4: Generate Tool Definitions

• For each feature, generate:
  • tool name from feature.id
  • tool description from feature name + description
  • inputSchema from feature.actions
  • handler definition with selected content type
• Enforce a hard cap of 50 tools per generated server.

Step 5: Generate Server Scaffold

• Copy scaffold files from assets/mcp-server-template/.
• Inject generated registrations into src/index.ts.
• Follow patterns in references/server-scaffold.md.

Step 6: Generate Tool Handlers

• Generate one handler per tool using references/tool-templates.md.
• Use registerAppTool() and registerAppResource() for each feature UI.
• Use createUIResource() with only:
  • rawHtml
  • externalUrl

Step 7: Validate

• Run tsc --noEmit against generated output.
• Ensure imports resolve and generated types are valid.

Step 8: Save Output

• Write generated server into:
  • .claude/artifacts/mcp-server-{timestamp}/

API Overview

• McpServer from @modelcontextprotocol/sdk: base MCP server instance.
• registerAppTool() from @modelcontextprotocol/ext-apps: registers tool definitions with app-aware metadata.
• registerAppResource() from @modelcontextprotocol/ext-apps: registers UI resources for host retrieval.
• createUIResource() from @mcp-ui/server: constructs UI resources from allowed content types.

For full signatures and examples, read references/mcp-ui-api.md.

Content Types

• rawHtml
  • Inline HTML rendered in chat.
  • Use for form confirmations, action status, compact tables, and small result panes.
• externalUrl
  • iframe-based URL rendering.
  • Use for dashboards, full-page workflows, and complex interactive views.
• remoteDom is not used by this skill.

Chrome MCP Integration

When feature handlers need browser interaction (form fill, click, navigation), generate compatibility-safe Chrome MCP calls. Do not hardcode tool prefixes. Use references/chrome-mcp-compat.md for runtime mapping across available Chrome MCP variants.

Output

Generated MCP server output is written to .claude/artifacts/mcp-server-{timestamp}/.