Skip to main content
DevTools is designed to help you test your apps locally in a short feedback loop fashion. It lets you develop and debug widgets without needing to deploy or use external services.
DevTools currently renders widgets using the Apps SDK runtime (mocked window.openai). MCP Apps rendering is not yet supported in DevTools.

​
Quick Start

When you run pnpm dev, DevTools is automatically available at http://localhost:3000/. Skybridge DevTools Overview

​
Automatic Tool Discovery

DevTools automatically discovers all tools registered in your MCP server. Simply start your development server, and all available tools will appear in the sidebar, ready to test.

​
Testing Tools

DevTools generates a form based on each tool’s input schema, making it easy to test your tools with different inputs. Fill in the form and click “Call Tool” to execute the tool and see its output. DevTools Tool Input Form

​
Widget Inspection

When a tool renders a widget, DevTools provides comprehensive inspection capabilities:

​
Apps SDK Environment Inspector

Inspect and edit the Apps SDK environment properties in real-time (mocked window.openai):
  • Display Mode: Switch between inline, fullscreen, and picture-in-picture modes
  • Theme: Toggle between light and dark themes
  • Locale: Change the locale settings
  • User Agent: Modify device type (mobile/desktop) and capabilities (hover/touch)
  • Safe Area: Adjust safe area insets
  • Max Height: Set widget height constraints
Changes are immediately reflected in the widget preview, allowing you to test how your widget behaves under different conditions.
This inspector mocks the Apps SDK runtime (window.openai). For testing MCP Apps-specific behavior, use a MCP Apps Client like Goose or MCPJam.

​
Inspectable Widget State

View and monitor the widget’s state as it changes. The widget state inspector shows the current state object in a JSON tree view, making it easy to debug state management and track state updates.

​
MCP client logs

See all Apps SDK API calls made by your widget in real-time. The logs panel displays:
  • Timestamp of each API call
  • Command name (e.g., setWidgetState, callTool, requestDisplayMode)
  • Arguments passed to each method
  • Response data (when applicable)
This helps you understand how your widget interacts with the MCP client and debug any issues.
These logs show Apps SDK (window.openai) calls. In MCP Apps, widgets use the MCP ext-apps protocol instead. The Skybridge hooks abstract these differences, so your widget code works in both runtimes.
DevTools Widget Inspection Panel

​
Limitations

DevTools uses the Apps SDK runtime (mocked window.openai) but has some differences from production:
  • CSP policies: Some external resources may be blocked in production but allowed locally
  • LLM responses: Follow-up messages don’t trigger actual LLM responses—test these in ChatGPT dev mode or MCP Apps clients
  • MCP Apps runtime: DevTools does not support MCP Apps widget rendering—test MCP Apps widgets in real clients like Goose or Claude

​
Custom Integration

If you’re not using the Skybridge starter template, add DevTools to your server: 
import { devtoolsStaticServer, widgetsDevServer } from "skybridge/server";

if (process.env.NODE_ENV !== "production") {
  app.use(await devtoolsStaticServer());
  app.use(await widgetsDevServer());
}
  • Fast Iteration - Development workflow and concepts
  • Test Your App - Testing in production settings (ChatGPT, Claude, other MCP Apps Clients)