Skip to main content
Skybridge provides two ways to test your app: local DevTools for rapid iteration, and production testing in ChatGPT and compatible MCP Apps Clients. Open http://localhost:3000/ in your browser to access DevTools. This is the fastest way to develop:
  • Tool listing - See all registered tools and widgets
  • Input forms - Test tools with custom inputs
  • Widget preview - Render widgets 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 widget code works identically in both environments.
Fast IterationFor full details on DevTools, HMR, and Vite plugin, see Fast Iteration.

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

Testing in ChatGPT

Test with ChatGPT using the Apps SDK runtime

Testing in Claude

Test with Claude using the MCP Apps runtime

Testing in Desktop MCP Clients

Test locally with VSCode, Goose, and other desktop clients

​
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. Use ngrok to expose your local server: 
ngrok http 3000
Copy the forwarding URL (e.g., https://abc123.ngrok-free.app).

​
2. Connect to ChatGPT

  1. In ChatGPT, go to Profile → Apps → Create app
  2. Enter your ngrok URL with /mcp at the end: 
    https://abc123.ngrok-free.app/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

Widget changes in web/src/widgets/ appear instantly without reconnecting. Server changes in server/src/ 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. Use cloudflared to expose your local server: 
cloudflared tunnel --url http://localhost:3000
Copy the generated URL (e.g., https://abc123.trycloudflare.com).

​
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 cloudflared URL with /mcp at the end: 
    https://abc123.trycloudflare.com/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 widget 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 ngrok or a public URL.

​
1. Start your server

Make sure your development server is running: 
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, such as VSCode, Goose, Postman, or MCPJam.

​
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 widgets

​
What’s Next?

Core Concepts

Learn how Skybridge extends the raw APIs with React hooks

Guides

Learn patterns for data fetching, state management, and more