> ## Documentation Index
> Fetch the complete documentation index at: https://docs.skybridge.tech/llms.txt
> Use this file to discover all available pages before exploring further.

# 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.

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

## Start the Tunnel

Pass the `--tunnel` flag to the dev server, or toggle **Tunnel** in the [DevTools](/test/devtools) header:

<CodeGroup>
  ```bash npm theme={null}
  npm run dev -- --tunnel
  ```

  ```bash pnpm theme={null}
  pnpm dev --tunnel
  ```

  ```bash yarn theme={null}
  yarn dev --tunnel
  ```

  ```bash bun theme={null}
  bun dev --tunnel
  ```

  ```bash deno theme={null}
  deno task dev --tunnel
  ```
</CodeGroup>

Skybridge runs an [Alpic tunnel](https://docs.alpic.ai/cli/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

<Info>
  Creating apps requires developer mode to be enabled: **Settings → Apps → Advanced settings → Developer mode**.
</Info>

### 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.

## Limitation

ChatGPT and Claude cache your tool definitions at registration. When the server schema changes (a [tool](/build/tools) added or renamed, an [input schema](/api-reference/register-tool#inputschema-outputschema) edited), refresh the app or connector in the host so the model sees the new definitions.

## Go Further

<Columns cols={3}>
  <Card title="DevTools" icon="square-dashed-mouse-pointer" href="/test/devtools">
    Call tools and render views locally, without a host
  </Card>

  <Card title="Playground" icon="message-circle" href="/test/playground">
    Chat with a real model running your app
  </Card>

  <Card title="Audit" icon="clipboard-check" href="/test/audit">
    Catch spec and platform issues before submission
  </Card>
</Columns>