TL;DR: sunpeak v0.15 adds a local Claude simulator. Run sunpeak 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 simulator 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 v0.15 ships with first-class Claude support. The old ChatGPTSimulator is now just Simulator, and 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 simulator 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 Simulator 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 to v0.15 and migrate your CSS classes:
sunpeak upgrade
Then run the dev server:
sunpeak dev
Open localhost:3000. You will see a Host dropdown in the simulator sidebar. Select Claude to test your app in the Claude runtime. Select ChatGPT to switch back.
If you are starting fresh:
pnpm add -g sunpeak
sunpeak new
cd my-app && sunpeak dev
The scaffolded project uses the new Simulator 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 simulator 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 { Simulator } from 'sunpeak/simulator';
<Simulator
simulations={simulations}
defaultHost="claude"
/>
The default is chatgpt if you don't specify one.
Migrating from ChatGPTSimulator
If your project uses the old ChatGPTSimulator from sunpeak/chatgpt, it still work as an alias to the new simulator. No migration is required, but the alias will be removed in the near future.
The change is small. In your dev entry point, replace:
// Before
import { ChatGPTSimulator } from 'sunpeak/chatgpt';
<ChatGPTSimulator simulations={simulations} />
with:
// After
import { Simulator } from 'sunpeak/simulator';
<Simulator simulations={simulations} />
Same simulations, same resource components, same test suite. The Simulator just adds the host dropdown and Claude'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 simulator 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 Simulator component or your resource code. Each host registers itself with an id, a label, a conversation component, a theme function, and style variables. The simulator picks up all registered hosts automatically.
For now, Claude and ChatGPT cover the two largest MCP App hosts.
Getting Started
pnpm add -g sunpeak
sunpeak new
cd my-app && sunpeak dev
Open localhost:3000, select Claude from the Host dropdown, and start building.
- How to Build a Claude App covers architecture and code patterns for Claude.
- ChatGPT App Tutorial walks through building a resource from scratch (same steps work for Claude).
- Building One MCP App for ChatGPT and Claude covers the cross-platform story.
- Testing guide covers Vitest and Playwright setup.
- sunpeak documentation has the quickstart and full API reference.
Build once with sunpeak, test locally in both Claude and ChatGPT, and ship to every MCP App host.
Top comments (0)