Connect to Hosts

Tunnel your local server to ChatGPT and Claude

ChatGPT and Claude connect to MCP servers over the internet, and your dev server lives on localhost. The tunnel bridges the two: it exposes your local server on a public URL, so real hosts run your app while it keeps reloading on every file save.

Desktop MCP clients (VSCode, Goose, Postman, MCPJam) connect directly to http://localhost:3000/mcp: no tunnel needed.

Start the Tunnel

Pass the --tunnel flag to the dev server, or toggle Tunnel in the DevTools header:

npm

npm run dev -- --tunnel

Skybridge runs an Alpic tunnel, then prints your public URL (e.g., https://cool-marmot-fondue-420.alpic.dev/mcp).

Connect to Hosts

ChatGPT

1. Go to Profile → Apps → Create app
2. Enter the printed /mcp URL
3. Click Create, then select your app with the + button in a new conversation

Creating apps requires developer mode to be enabled: Settings → Apps → Advanced settings → Developer mode.

Claude

1. Go to Customize → Connectors → Add custom connector
2. Enter your app name and the printed /mcp URL
3. Click Add, then enable the connector in a new conversation

Iterate Without Reconnecting

The Alpic tunnel URL is stable across restarts: register the app or connector once. Hot reload works through it too: view edits show up in the host on save, on desktop and mobile alike.

Read View Logs on Mobile or Desktop Apps

When your app runs in the ChatGPT or Claude desktop or mobile app, there’s no console to open, so the view’s logs are out of reach. Vite’s forwardConsole prints them in the terminal running your dev server. The scaffold limits it to errors: add the levels you want to logLevels in vite.config.ts.

vite.config.ts

server: {
  forwardConsole: {
    unhandledErrors: true,
    logLevels: ["error"], 
    logLevels: ["error", "warn", "log"], 
  },
},

A log placed in a component’s render body appears twice per render: views run under React StrictMode in development, which invokes each render twice.

Limitation

ChatGPT and Claude cache your tool definitions at registration. When the server schema changes (a tool added or renamed, an input schema edited), refresh the app or connector in the host so the model sees the new definitions.

Go Further

DevTools

Call tools and render views locally, without a host

Playground

Chat with a real model running your app

Audit

Catch spec and platform issues before submission