Claude Inspector for MCP Apps: Test Claude Connectors Locally with sunpeak (April 2026)

TL;DR: sunpeak’s Inspector replicates Claude, ChatGPT, and other host runtimes on localhost. Run pnpm dev, pick Claude from the Host dropdown (or add ?host=claude to the URL), and test your MCP App in every host from a single dev server. No accounts, no credits, no deploying to find out something broke.

MCP Apps now run in Claude, ChatGPT, VS Code, Goose, Postman, and more. Each host has its own conversation chrome, color palette, CSS variables, and rendering behavior. Your resource component needs to look right in all of them, and manually deploying to each host to check is slow and expensive.

The sunpeak Inspector solves this by replicating each host runtime locally. You write your component once, then switch between hosts with a dropdown to see exactly what users will see. And because the Inspector also serves as the runtime for automated E2E tests, you can write tests that run against every host on every commit.

How the Multi-Host Inspector Works

The Inspector uses a pluggable host shell system. Each host registers its own conversation chrome, color palette, and theme behavior. The Inspector component renders whichever host you select.

Two primary hosts ship by default:

• ChatGPT uses the familiar gray/white palette with the ChatGPT conversation layout.
• Claude uses a warm beige/cream palette matching claude.ai, with Claude’s conversation chrome.

Both implement the core MCP App protocol, but each host adds its own extras. ChatGPT supports host-specific features like file uploads and downloads on top of the standard. Claude has its own rendering quirks that sunpeak’s host shell accounts for automatically. Your resource component renders in both, wrapped in each host’s chat UI, so you see exactly what your users will see.

Getting Started

If you already have a sunpeak project:

sunpeak upgrade
pnpm dev

Open localhost:3000. The Host dropdown in the inspector sidebar lets you switch between Claude and ChatGPT at runtime.

Starting from scratch:

npx sunpeak new sunpeak-app
cd sunpeak-app && pnpm dev

Both hosts are available from the first run. No configuration needed.

Host Selection

Three ways to pick a host:

Sidebar dropdown. The Host control appears in the sidebar when multiple hosts are registered. Click it to switch at runtime.

URL parameter. Add ?host=claude or ?host=chatgpt to the inspector URL. This is useful for bookmarking a specific host, linking teammates to a particular test configuration, or running automated checks against a specific runtime.

defaultHost prop. Set the initial host in code:

import { Inspector } from 'sunpeak/inspector';

<Inspector
  simulations={simulations}
  defaultHost="claude"
/>

The default is chatgpt if you don’t specify one.

What Your App Looks Like in Claude

The Claude host shell wraps your resource component in Claude’s conversation UI. The background uses Claude’s warm beige and grey instead of ChatGPT’s white and dark grey. User messages appear in Claude’s bubble style. The toolbar and display mode controls (inline, fullscreen, picture-in-picture) work the same way.

The core data flow is shared across hosts. useToolData receives the tool output. useAppState syncs state back to the host. SafeArea handles safe rendering boundaries. useDisplayMode reads the current display mode. These hooks work the same in Claude and ChatGPT because they target the shared MCP App protocol, not a specific host’s API.

Where hosts differ is in extras and styling. ChatGPT supports host-specific features like file uploads and downloads. Claude uses different CSS variables for theming. The inspector lets you catch these differences locally instead of deploying to find out.

Testing Across Hosts

The Inspector doubles as the test runtime for sunpeak’s testing framework, so the same simulation that drives the visual preview can drive automated tests that run against every host.

E2E Tests with the Inspector Fixture

sunpeak provides a Playwright-based inspector fixture that renders your component in a real browser inside each host runtime. The defineConfig() from sunpeak/test/config creates separate Playwright projects per host, so every test runs on both ChatGPT and Claude automatically:

import { test, expect } from 'sunpeak/test';

test('weather card renders correctly', async ({ inspector }) => {
  const result = await inspector.renderTool('show-weather');
  const app = result.app();

  await expect(app.getByText('Seattle')).toBeVisible();
  await expect(app.getByText(/58°F/)).toBeVisible();
});

This test runs once on ChatGPT and once on Claude. If your component’s layout breaks under Claude’s CSS variables or viewport constraints, the test catches it. No manual checking required.

For the full guide on writing these tests, see E2E testing MCP Apps.

Unit Tests

For faster feedback during development, unit tests let you mock useToolData and render your component with Vitest and happy-dom. These run in milliseconds and are ideal for testing data rendering, error states, and state transitions without spinning up a browser.

Visual Regression and Snapshots

Because hosts use different color palettes and conversation chrome, visual regression tests catch styling issues that text assertions miss. Snapshot tests lock down your component’s DOM structure so unintended changes get flagged in code review.

CI/CD Integration

Run the full test suite on every push with GitHub Actions. sunpeak’s test commands (pnpm test:unit, pnpm test:e2e, pnpm test:visual) work in CI out of the box, so you get cross-host test results on every pull request.

Extensible Host System

The host shell registry is open. Each host registers itself with an id, a label, a conversation component, a theme function, and style variables. The Inspector picks up all registered hosts automatically.

MCP Apps now run on six confirmed hosts: Claude, ChatGPT, VS Code (via GitHub Copilot), Goose (Block’s AI agent), Postman, and MCPJam. The MCP protocol itself is governed by the Agentic AI Foundation under the Linux Foundation, and the ext-apps specification has reached v1.7.0 with stable status and over 2,100 GitHub stars. As more hosts adopt the standard, the Inspector’s pluggable architecture means support can be added without changing your resource code or tests.

Cross-Platform Development Workflow

The Inspector fits into a broader workflow for building MCP Apps that run on both Claude and ChatGPT. The typical cycle looks like this:

1. Write a simulation file with your expected tool data
2. Run pnpm dev and preview in the Inspector, toggling between hosts
3. Write unit tests for component logic and E2E tests for rendering across hosts
4. Run pnpm test to verify everything passes on both runtimes
5. Deploy and connect to real hosts

The entire development and testing loop runs locally. You don’t need paid ChatGPT or Claude accounts, API keys, or AI credits until you’re ready to deploy. This saves time and money because you’re not burning host credits on every code change or paying for testing accounts across multiple platforms.

For a hands-on walkthrough of building a Claude App from scratch, see How to Build a Claude App. For the testing strategy in detail, see the complete testing guide.