Skip to main content

​
Quickstart

No installation required. Point the inspector at any running MCP server: 
npx sunpeak inspect --server http://localhost:8000/mcp
For stdio servers, pass the command directly: 
npx sunpeak inspect --server "python my_server.py"
npx sunpeak inspect --server "go run ./cmd/server"
This opens the inspector at http://localhost:3000. See sunpeak inspect CLI Reference for all options.
In sunpeak framework projects, the inspector is built into sunpeak dev automatically.
MCP App Inspector

​
What it does

The inspector replicates the ChatGPT and Claude MCP App runtimes on your machine. Your MCP server’s tools and resources render in the same iframe sandbox that production hosts use, with the same PostMessage protocol, the same CSS variables, and the same host context values.
  • Instant feedback — HMR means changes appear immediately. No cache issues, no reloading the host.
  • Every host, theme, and device — toggle ChatGPT/Claude, light/dark, mobile/tablet/desktop, inline/PiP/fullscreen from the sidebar.
  • No deployment needed — no tunnel, no host account, no API credits.
  • Test runtime — the inspector powers E2E tests. Load simulations via URL, assert with Playwright.

​
Simulations

Simulations are JSON fixtures that define reproducible tool states for the inspector — tool input, tool result, and server tool mocks. 
// tests/simulations/show-example.json
{
  "tool": "show-example",
  "userMessage": "Show me an example",
  "toolInput": { "query": "example" },
  "toolResult": {
    "structuredContent": { "items": [] }
  }
}
The inspector loads simulations from tests/simulations/ automatically. Select a simulation from the sidebar dropdown to render your resource with that mock data. Select “None (call server)” to call the real tool handler instead. See Simulations API Reference for the complete JSON schema and conventions. The inspector sidebars let you configure: Selecting a backend-only tool shows Tool does not render a UI in the preview, but the tool can still be called from the sidebar and its result is still shown. Most runtime settings are reflected in the URL, making them shareable and usable in automated tests via createInspectorUrl. Sidebar preferences like host context, width adjustments, Prod Resources, and Model Chat provider/model are saved locally so they persist across refreshes.

​
Using the Inspector in Tests

The inspector doubles as the test runtime for automated E2E tests. See MCP Testing Framework for the full testing story. 
import { createInspectorUrl } from 'sunpeak/inspector';

test('renders in dark mode on Claude', async ({ page }) => {
  await page.goto(
    createInspectorUrl({
      simulation: 'show-albums',
      theme: 'dark',
      host: 'claude',
    })
  );
  // assert against the rendered resource
});

​
Dive Deeper

sunpeak inspect

Inspect any MCP server (standalone, no project needed).

Simulations API Reference

JSON schema, conventions, and auto-discovery.

Inspector API Reference

Full component documentation and configuration options.