ChatGPT MCP App TypeScript Template

What it does

Full-featured MCP App starter template that lets you ship interactive React widgets directly inside AI chat interfaces. Built by the Pomerium team, it wires together an MCP server, React widget build pipeline, and all the plumbing needed to get UI rendering inside ChatGPT, Claude, VS Code Copilot, and other MCP Apps-capable hosts in under 5 minutes.

Key features

• Echo tool with interactive widget — working end-to-end example: tool invocation → React UI rendered inline in chat
• Display mode switching — inline, picture-in-picture, and fullscreen with runtime toggling via requestDisplayMode()
• UI capability negotiation — server auto-detects host capabilities and falls back to plain text for non-UI clients
• Inline widget assets — self-contained HTML mode for sandboxed iframe hosts (Claude.ai)
• Pomerium SSH tunnel — one command (ssh -R 0 pom.run) exposes local dev server publicly for ChatGPT testing
• Full test setup — Vitest for server + widgets, Storybook with a11y addon, mock App helper for isolated component testing

Installation

Claude Desktop

This template runs as your own hosted server. Clone, build, deploy, then add to claude_desktop_config.json:

{
  "mcpServers": {
    "my-app": {
      "command": "node",
      "args": ["/path/to/your-app/server/dist/server.js"]
    }
  }
}

VS Code Copilot / ChatGPT (HTTP)

git clone https://github.com/pomerium/chatgpt-app-typescript-template your-app
cd your-app && npm install && npm run dev
# Expose: ssh -R 0 pom.run
# Add https://<tunnel-url>/mcp as connector

Claude.ai web

Run with npm run dev:inline, expose via tunnel, then add the /mcp URL in Claude.ai Settings → Integrations.

Supported hosts

ChatGPT (primary), Claude Desktop, Claude.ai, VS Code Copilot, Goose, Cursor — any MCP Apps-capable client.