add-app-tool

Create App tool and UI resource scaffolds for MCP server tooling.

148|28|Updated Mar 20, 2025
One-click install
npx skills add https://github.com/cyanheads/mcp-ts-core --skill add-app-tool
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: add-app-tool
Source: https://github.com/cyanheads/mcp-ts-core/tree/main/skills/add-app-tool
Command: npx skills add https://github.com/cyanheads/mcp-ts-core --skill add-app-tool

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Automates scaffold creation for MCP App tools and their UI resources, ensuring consistent builders, URIs, and registration steps.

Core Features & Use Cases

  • Scaffold both an App Tool and its App Resource, including a matching UI resource, with proper metadata and URIs.
  • Validate configuration via linter steps and ensure registration in createApp().
  • Use-case examples: building modular MCP apps with UI.

Quick Start

Run the generator to create the app-tool and UI-resource scaffold and integrate them into your project.

Frequently Asked Questions about add-app-tool

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I scaffold an MCP app tool and its matching UI resource?

To scaffold an MCP app tool and its UI resource, run the generator to automatically create the paired files with proper metadata, correct resource URIs, and CSP configuration included.

What is the standard pattern for adding interactive tools with UI to an MCP server?

The standard pattern for adding interactive MCP tools with UI involves creating a paired App Tool and App Resource, ensuring correct builder usage and registering them within the createApp() function.

How do I validate MCP app tool registration and configuration after scaffolding?

You validate MCP app tool registration and configuration by running linter steps to check builders and executing a smoke-test workflow via the bun run devcheck command to ensure proper integration.

Does the MCP app tool scaffolding process handle CSP metadata and resource URIs?

Yes, the MCP app tool scaffolding process handles CSP metadata and resource URIs automatically, ensuring your interactive tool and its matching UI resource are configured correctly from the start.

Can I use this scaffolding pattern to build modular MCP apps with TypeScript?

Yes, you can use this scaffolding pattern to build modular MCP apps with TypeScript, applying a repeatable structure to add interactive tools with UI and integrate them into your project.