Thanks to visit codestin.com
Credit goes to docs.skybridge.tech

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 views without needing to deploy or use external services.
DevTools currently renders views 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

​
View Inspection

When a tool renders a view, 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 view height constraints
Changes are immediately reflected in the view preview, allowing you to test how your view 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 View State

View and monitor the view’s state as it changes. The view 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 view in real-time. The logs panel displays:
  • Timestamp of each API call
  • Command name (e.g., setViewState, callTool, requestDisplayMode)
  • Arguments passed to each method
  • Response data (when applicable)
This helps you understand how your view interacts with the MCP client and debug any issues.
These logs show Apps SDK (window.openai) calls. In MCP Apps, views use the MCP ext-apps protocol instead. The Skybridge hooks abstract these differences, so your view code works in both runtimes.
DevTools View Inspection Panel

​
Authenticated servers

When your MCP server requires OAuth, DevTools registers itself as an OAuth client via Dynamic Client Registration on first connect and walks the full PKCE flow. The resulting client_id and access token are cached in browser localStorage so subsequent sessions reconnect silently. If you ever see invalid_client or other authorization errors after switching servers, rotating credentials on the auth server, or otherwise leaving DevTools holding stale state, click Sign out in the header to clear the cache and trigger a fresh registration on the next connect.

​
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 view rendering—test MCP Apps views 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, viewsDevServer } from "skybridge/server";

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