Claude Inspector for MCP Apps: Test Claude Connectors Locally with sunpeak

TL;DR: sunpeak includes a local Claude inspector. Run pnpm dev, pick Claude from the Host dropdown (or ?host=claude URL Param), and test your MCP App in both Claude and ChatGPT from one dev server.

Until now, sunpeak’s local inspector only replicated the ChatGPT runtime. If you wanted to test how your MCP App looked in Claude, you had to deploy it and connect it manually. That’s fixed.

sunpeak ships with first-class Claude support. Both Claude and ChatGPT are registered as host shells out of the box. Switch between them with a dropdown, a URL param, or a prop.

What Changed

The inspector is now multi-host. Instead of a single ChatGPT-specific component, sunpeak 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 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 doesn’t have additional host APIs today, though sunpeak’s Claude host shell does handle Claude’s rendering quirks. If Claude adds host-specific capabilities in the future, they’ll be built into this shell. Your resource component renders in both, wrapped in each host’s chat UI, so you see exactly what your users will see.

How to Use It

If you already have a sunpeak project, update and run:

sunpeak upgrade

Then run the dev server:

pnpm dev

Open localhost:3000. You will see a Host dropdown in the inspector sidebar. Select Claude to test your app in the Claude runtime. Select ChatGPT to switch back.

If you are starting fresh:

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

The scaffolded project uses the new Inspector component by default. Both hosts are available from the first run.

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 testing certain rendering states automatically.

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.

Inspector Import

The Inspector component is imported from sunpeak/inspector:

import { Inspector } from 'sunpeak/inspector';

<Inspector simulations={simulations} />

Same simulations, same resource components, same test suite. The Inspector includes the host dropdown and each host’s rendering behavior.

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. These work the same in both Claude and ChatGPT.

Where hosts differ is in extras. ChatGPT supports host-specific features like file uploads and downloads that go beyond the MCP App standard. Claude has its own rendering quirks that sunpeak’s host shell accounts for. If Claude adds host-specific APIs later, sunpeak will surface them through the same shell system.

The inspector lets you catch these differences locally instead of deploying to find out.

Extensible Host System

The host shell registry is open. If a new major MCP App host appears, sunpeak can add support without changing the Inspector component or your resource code. 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.

For now, Claude and ChatGPT cover the two largest MCP App hosts.