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

# Test Your App

> Test your app locally with DevTools, or in ChatGPT Developer Mode and compatible MCP Clients for integration testing.

Skybridge provides two ways to test your app: **local DevTools** for rapid iteration, and production testing in ChatGPT and compatible MCP Apps Clients.

## Local Development (Recommended)

Open `http://localhost:3000/` in your browser to access DevTools. This is the fastest way to develop:

* **Tool listing** - See all registered tools and views
* **Input forms** - Test tools with custom inputs
* **View preview** - Render views in a mocked Apps SDK environment
* **Theme/locale switching** - Test different display modes

The DevTools mock the Apps SDK and the MCP apps runtimes, so your view code works identically in both environments.

<Tip>
  **Fast Iteration**

  For full details on DevTools, HMR, and Vite plugin, see [Fast Iteration](/concepts/fast-iteration).
</Tip>

## Production Testing

When you're ready to test your AI App with an LLM, you can connect it to ChatGPT, Claude, or other compatible MCP clients.

<CardGroup cols={3}>
  <Card title="Testing in ChatGPT" icon="message" href="#testing-in-chatgpt">
    Test with ChatGPT using the Apps SDK runtime
  </Card>

  <Card title="Testing in Claude" icon="user" href="#testing-in-claude">
    Test with Claude using the MCP Apps runtime
  </Card>

  <Card title="Testing in Desktop MCP Clients" icon="desktop" href="#testing-in-other-mcp-clients">
    Test locally with VSCode, Goose, and other desktop clients
  </Card>
</CardGroup>

### Testing in ChatGPT

ChatGPT uses the Apps SDK runtime and requires a public URL to connect to your app.

#### 1. Expose your server

ChatGPT needs a public URL to access your AI App. Start the dev server with the `--tunnel` flag:

<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 downloads and runs [Alpic tunnel](https://docs.alpic.ai/cli/tunnel) automatically, then prints a public URL (e.g., `https://cool-marmot-fondue-420.alpic.dev/mcp`).

#### 2. Connect to ChatGPT

1. In ChatGPT, go to **Profile → Apps → Create app**
2. Enter the printed `/mcp` URL:
   ```
   https://cool-marmot-fondue-420.alpic.dev/mcp
   ```
3. Click **Create**

#### 3. Test your app

1. Start a new conversation
2. Select your app using the **+** button
3. Prompt the model to trigger your tools

#### Hot Module Reload

View changes in `src/views/` appear instantly without reconnecting.

Server changes in `src/server.ts` require starting a new conversation to take effect.

### Testing in Claude

Claude uses the MCP Apps runtime and requires a public URL to connect to your app.

#### 1. Expose your server

Claude needs a public URL to access your AI App. Start the dev server with the `--tunnel` flag:

<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 downloads and runs [Alpic tunnel](https://docs.alpic.ai/cli/tunnel) automatically, then prints a public URL (e.g., `https://cool-marmot-fondue-420.alpic.dev/mcp`).

#### 2. Connect to Claude

1. In Claude, go to **Settings → Connectors → Add Custom Connector** and configure your MCP server connection
2. Enter your App name and the printed `/mcp` URL:
   ```
   https://cool-marmot-fondue-420.alpic.dev/mcp
   ```
3. Click on **Add**

#### 3. Test your app

1. Start a new conversation in Claude
2. Make sure your Connector is selected in the Connectors dropdown
3. Test view interactions and tool responses

### Testing in other MCP Clients

Desktop MCP clients like VSCode, Goose, and others can connect directly to your local server without needing a HTTP tunnel or a public URL.

#### 1. Start your server

Make sure your development server is running:

```bash theme={null}
npm run dev
```

Your MCP server will be available at `http://localhost:3000/mcp`.

#### 2. Connect to your MCP client

Connect your server to any desktop MCP client that supports the [ext-apps specification](https://github.com/modelcontextprotocol/ext-apps), such as [VSCode](https://code.visualstudio.com/), [Goose](https://block.github.io/goose), [Postman](https://www.postman.com/), or [MCPJam](https://mcpjam.com/).

#### 3. Test your app

1. Configure your MCP client to connect to `http://localhost:3000/mcp`
2. Start a conversation in your MCP client
3. Test your app by invoking tools and interacting with the views

## What's Next?

<CardGroup cols={2}>
  <Card title="Core Concepts" icon="lightbulb" href="/concepts">
    Learn how Skybridge extends the raw APIs with React hooks
  </Card>

  <Card title="Guides" icon="book" href="/guides/fetching-data">
    Learn patterns for data fetching, state management, and more
  </Card>
</CardGroup>