MCP App Studio Starter

What it does

MCP App Studio Starter is a full-featured scaffold for building interactive MCP Apps — UI widgets that render directly inside AI assistants like ChatGPT and Claude. Spin up a local workbench, build your widget with React, and export a self-contained index.html you can deploy anywhere. Supports the standard ui/* MCP bridge plus optional ChatGPT-specific extensions.

Key features

• Local workbench at http://localhost:3002 — simulates an MCP Apps host with hot reload, mock tool responses, and theme diagnostics
• Universal SDK hooks (useToolInput, useCallTool, useTheme, useSendMessage) that work identically across Claude Desktop, ChatGPT, VS Code, and Goose
• Platform detection via useCapabilities() / useFeature() so you can gate ChatGPT-only extensions (widget state, checkout, modals) without breaking other hosts
• Single-file export via npm run export — outputs export/widget/index.html ready to deploy to Vercel, Netlify, S3, or Cloudflare Pages
• MCP server scaffold in server/ for pairing your widget with real tool endpoints
• Built-in TDD workflow via .agent/skills/mcp-app-development/SKILL.md — enforces real tool parity, not mock-only behavior

Installation

Scaffold a new project

npx mcp-app-studio

This downloads the starter automatically. No manual cloning needed.

Claude Desktop

{
  "mcpServers": {
    "my-app": {
      "url": "https://your-deployed-mcp-server.com/mcp"
    }
  }
}

Claude.ai web

Go to Settings → Integrations → Add MCP Server and enter your deployed MCP endpoint URL.

VS Code Copilot

Add to settings.json:

"github.copilot.chat.mcp.servers": {
  "my-app": { "url": "https://your-deployed-mcp-server.com/mcp" }
}

ChatGPT

Register via the ChatGPT Apps dashboard with your deployed widget URL and MCP server endpoint.

Supported hosts

ChatGPT (full extensions support) and Claude Desktop are explicitly supported. The standard ui/* MCP bridge makes it compatible with any MCP Apps-capable host.