mcp-app-workflow

name	mcp-app-workflow
description	Complete workflow for creating, building, and registering MCP Apps with interactive UIs. Use when the user wants to build a new MCP App from scratch, needs step-by-step guidance through the full development cycle (setup → code → build → register → test), or asks "how to create an MCP app end-to-end". For SDK-specific patterns and API details, see the create-mcp-app skill.

MCP App Workflow

Complete workflow for creating MCP Apps from project setup to server registration and testing.

Workflow Overview

1. Initialize Project → 2. Implement Server → 3. Build UI → 4. Bundle → 5. Register → 6. Test

Step 1: Project Initialization

Create a new project directory with proper dependencies:

mkdir my-mcp-app && cd my-mcp-app
npm init -y
npm install @modelcontextprotocol/sdk @modelcontextprotocol/ext-apps zod
npm install -D typescript tsx vite vite-plugin-singlefile

Create configuration files:

tsconfig.json:

{
  "compilerOptions": {
    "target": "ES2022",
    "module": "ESNext",
    "moduleResolution": "bundler",
    "esModuleInterop":