Skip to main content

Documentation Index

Fetch the complete documentation index at: https://docs-staging.skybridge.tech/llms.txt

Use this file to discover all available pages before exploring further.

Problem: Testing views in remote MCP Clients (e.g. ChatGPT, Claude, etc.) is slow. It requires HTTP tunneling, manual refreshes, and provides limited debugging feedback. Solution: Skybridge includes DevTools and a Vite HMR plugin that let you develop views 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. Start the tunnel
  4. Go to Claude or ChatGPT dev mode
  5. Trigger the tool manually by chatting
  6. Wait for the view to load
  7. See if your change worked
  8. Repeat
This can take 30-60 seconds per iteration. With complex views, 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 view 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 views
  • Input forms - Test tools with custom inputs
  • View preview - Render views in a mocked Apps SDK (ChatGPT) environment
MCP Apps and DevToolsDevTools uses the Apps SDK runtime (mocked window.openai). MCP Apps view rendering is not yet supported in DevTools. For MCP Apps, use DevTools for tool development and UI logic; validate views 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 view 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 views: 
// vite.config.ts
import { skybridge } from "skybridge/vite";
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

export default defineConfig({
  plugins: [react(), skybridge()],
});
The plugin:
  • Auto-discovers views in src/views/ (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 view 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.

​
View Preview

Renders your view 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.