Setup

Scaffold a project and run the dev server.

Create Project

npx create-mcp-use-app my-chatgpt-app --template mcp-apps
cd my-chatgpt-app
npm install

Templates:

• --template mcp-apps -- ChatGPT widgets with dual-protocol support (recommended)
• --template starter -- Full-featured with tools, resources, prompts, and widgets
• --template blank -- Minimal starting point

Project Structure

my-chatgpt-app/
├── resources/              # React widgets (auto-registered!)
│   └── weather-display.tsx
├── public/                 # Static assets (images, fonts)
├── index.ts               # MCP server entry point
├── package.json
└── tsconfig.json

Run Dev Server

npm run dev

• Hot reload enabled for both server and widgets
• Inspector at http://localhost:3000/inspector
• MCP endpoint at http://localhost:3000/mcp

Test with Inspector

Open http://localhost:3000/inspector to:

• Execute tools with parameters
• View resources
• Try prompts
• Debug widget rendering and state

Connect to ChatGPT

Prerequisites

• ChatGPT Plus, Pro, Business, or Enterprise plan
• Developer Mode enabled: Settings → Connectors → Advanced → Developer Mode

Steps

1. Expose local server via tunnel:

   mcp-use start --port 3000 --tunnel
   

   Or use ngrok: ngrok http 3000

2. In ChatGPT → Apps Settings → Create App

3. Enter a name and description

4. Paste the tunnel URL: {tunnel-url}/mcp

5. Set Authentication: "No Authentication" (or configure OAuth)

6. Click Create

Testing

• Type @{app-name} in a ChatGPT chat
• Be explicit: "Use the {app-name} connector's {tool-name} tool"
• Disallow alternatives: "Do not use built-in tools, only use my connector"

Connect to Claude

1. Go to Claude Settings → Connectors → Add Custom Connector
2. Enter name and URL: {tunnel-url}/mcp
3. Click Create
4. In Claude chat, click + and select your connector

Deployment

npx mcp-use login
npm run deploy

After deployment:

• Public URL provided
• Auto-scaled and monitored
• HTTPS enabled
• Push updates with npm run deploy