Skip to main content
Problem: Testing widgets in remote MCP Clients (e.g. ChatGPT, Claude, etc.) is slow. It requires ngrok tunneling, manual refreshes, and provides limited debugging feedback. Solution: Skybridge includes DevTools and a Vite HMR plugin that let you develop widgets entirely on your machine with instant feedback.

​
The Challenge

When building Apps the traditional way, your development loop looks like:
  1. Make a code change
  2. Restart your server
  3. Tunnel with ngrok (if not already running)
  4. Go to Claude or ChatGPT dev mode
  5. Trigger the tool manually by chatting
  6. Wait for the widget to load
  7. See if your change worked
  8. Repeat
This can take 30-60 seconds per iteration. With complex widgets, that adds up fast.

​
The Skybridge Approach

With Skybridge, the loop becomes:
  1. Make a code change
  2. See it instantly in your browser
That’s it. DevTools mocks the Apps SDK (ChatGPT) environment, and Vite’s HMR updates your widget without a full reload.

​
DevTools

When you run pnpm dev, Skybridge starts:
  • Your MCP server at http://localhost:3000/mcp
  • DevTools UI at http://localhost:3000/
The DevTools UI provides:
  • Tool listing - See all registered tools and widgets
  • Input forms - Test tools with custom inputs
  • Widget preview - Render widgets in a mocked Apps SDK (ChatGPT) environment
MCP Apps and DevToolsDevTools uses the Apps SDK runtime (mocked window.openai). MCP Apps widget rendering is not yet supported in DevTools. For MCP Apps, use DevTools for tool development and UI logic; validate widgets in a real client (e.g. Goose, Claude) before shipping. See DevTools Guide and Test Your App.
Full DevTools GuideFor comprehensive documentation on all DevTools features, including widget inspection, MCP client logs, and custom integration, see the DevTools Guide.
Skybridge DevTools

​
HMR with Vite Plugin

Skybridge includes a Vite plugin that enables Hot Module Replacement for widgets: 
// vite.config.ts
import { skybridge } from "skybridge/web";
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

export default defineConfig({
  plugins: [react(), skybridge()],
});
The plugin:
  • Auto-discovers widgets in src/widgets/ (both flat files and directories)
  • Enables HMR so changes appear instantly without page reload
  • Transforms data-llm attributes at build time
  • Configures build output with proper asset paths
Starter template requiredThese features require the Skybridge starter template structure (pnpm create skybridge). If you’re adding Skybridge to an existing app, you’ll need to configure the Vite plugin manually.
When you save a file, only the changed component re-renders. Form inputs, scroll position, and local state are preserved.

​
Automatic Environment Detection

Your widget code works identically in ChatGPT, MCP Apps clients like Claude, and local DevTools. Skybridge detects the environment and uses the appropriate communication layer:
EnvironmentCommunication
ChatGPTwindow.openai API
MCP Apps (Goose, Claude, …)MCP protocol via postMessage
DevToolsMocked Apps SDK (postMessage)
You don’t need to know which is active—just use the hooks.

​
When to Use What

DevTools (90% of development time)
  • Rapid UI iteration
  • Testing tool inputs/outputs
  • Debugging state management
  • Day-to-day development
ChatGPT, Claude, or other MCP Apps clients (10% of development time)
  • Final integration testing
  • Real LLM conversation flow
  • Verifying data-llm context
  • Pre-ship validation
WorkflowBuild locally → validate in ChatGPT or MCP Apps → ship.See Test Your App for detailed testing setup instructions.

​
DevTools Features

The DevTools UI includes:

​
Tool Inspector

See all registered tools and their schemas. Click to fill input forms automatically.

​
Widget Preview

Renders your widget in an iframe with mocked window.openai. Supports:
  • Theme switching (light/dark)
  • Display mode switching (pip/inline/fullscreen)
  • Locale changing

​
Response Inspector

View the full tool response including content, structuredContent, and _meta.