sunpeak logo sun

sunpeak

MCP App framework. ChatGPT App framework. MCP testing framework. Claude Connector framework. MCP App Inspector with a ChatGPT & Claude runtime.

sunpeak is an open-source MCP App framework, MCP testing framework, and inspector for MCP servers and MCP Apps.

npx sunpeak new

What is sunpeak?

sunpeak sunpeak

MCP Apps are interactive UIs that run inside AI hosts like ChatGPT and Claude via the Model Context Protocol. ChatGPT Apps and Claude Connectors are MCP Apps rendered inside their respective hosts. sunpeak provides the complete framework for all of them.

sunpeak is an open-source (MIT) MCP App framework, MCP testing framework, and inspector for MCP servers and MCP Apps. Build, test, and ship ChatGPT Apps and Claude Connectors from one codebase.

Testing Framework

Playwright E2E tests and live tests against real ChatGPT

MCP App Inspector

Inspect MCP Apps in replicated ChatGPT and Claude runtimes

MCP Dev Server

Hot reloading MCP server with mock data

MCP App UI Components

Pre-built UI components for MCP Apps

MCP App APIs

20+ typed React hooks for the MCP App runtime

CLI Tools

Scaffold, build, test, and ship apps

MCP App Framework, ChatGPT App Framework, & Claude Connector Framework

Why use an MCP App framework?

Building an MCP App from scratch means wiring up an MCP server, handling protocol message routing, managing resource HTML bundles, and setting up a dev environment with hot reload.

Each host has different capabilities and CSS variables, so you end up writing platform-specific code without a clear structure.

sunpeak gives you a convention-over-configuration framework with the inspector and testing built in.

npx sunpeak new
sunpeak-app/
├── src/
   ├── resources/
   └── review/
       └── review.tsx          # UI component (React)
   ├── tools/
   ├── review-diff.ts          # Tool handler + schema + resource link
   └── review.ts               # Backend-only tool (no UI)
   └── server.ts                   # Optional: auth, server config
├── tests/
   ├── simulations/
   └── review-diff.json        # Mock data for the inspector
   ├── e2e/
   └── review.spec.ts          # Playwright tests against the inspector
   └── evals/
       └── review.eval.ts          # Multi-model tool calling evals
└── package.json
  • Convention-over-configuration: tools, resources, and simulations are auto-discovered from the file system
  • 20+ typed React hooks (useToolData, useAppState, useTheme, useDisplayMode) for cross-platform MCP App development
  • MCP dev server with HMR in ChatGPT and automatic rebuild notifications in Claude
  • Write your app once and deploy across ChatGPT, Claude, and future MCP-compatible hosts
  • Pre-built MCP App UI components that follow ChatGPT and Claude design guidelines

MCP Apps → | ChatGPT Apps → | Claude Connectors →

Test MCP Apps, ChatGPT Apps & Claude Connectors in CI/CD

Why use an MCP testing framework?

MCP Apps render inside host iframes with host-specific themes, display modes, and capabilities. Standard browser testing can't replicate this because the runtime environment only exists inside ChatGPT and Claude.

sunpeak replicates these host runtimes and provides simulation fixtures so you can test every combination of host, theme, and data in CI without accounts or API credits.

npx sunpeak test init
--server http://localhost:8000/mcp
  • Playwright E2E tests against the inspector with fixtures for iframe traversal and host switching
  • Visual regression testing with screenshot comparison across hosts and themes
  • Live host tests against real ChatGPT and multi-model evals for response quality
  • Runs in GitHub Actions and any CI/CD pipeline with no paid accounts or API credits
my-app.test.ts
import { test, expect } from 'sunpeak/test';

test('search tool returns results', async ({ mcp }) => {
  const result = await mcp.callTool('search', { query: 'headphones' });
  expect(result.isError).toBeFalsy();
});

test('album cards render', async ({ inspector }) => {
  const result = await inspector.renderTool('show-albums');
  await expect(result.app().locator('button:has-text("Summer Slice")')).toBeVisible();
});

Testing framework →

Inspect MCP Apps, ChatGPT Apps & Claude Connectors Locally

Why the sunpeak inspector?

MCP servers are opaque. You can't see how your app looks inside ChatGPT or Claude without deploying to each host, setting up a tunnel, paying for accounts, and manually refreshing on every code change.

The sunpeak inspector replicates the ChatGPT and Claude app runtimes locally so you can see your tools and resources rendered exactly as they appear in production.

npx sunpeak inspect
--server http://localhost:8000/mcp
localhost:3000 - Try Me!
  • Toggle between ChatGPT and Claude hosts, light and dark themes, display modes, and device types
  • Changes reflect instantly via HMR in ChatGPT and automatic rebuild notifications in Claude
  • Works with any MCP server in any language: Python, Go, TypeScript, Rust, Java

Inspector →

Frequently Asked Questions

Key Facts

Product
sunpeak
Category
MCP App framework, ChatGPT App framework, Claude Connector framework, and MCP testing framework
License
MIT (open source)
Package
sunpeak (npm)
Includes
Local ChatGPT & Claude inspector, MCP dev & production servers, UI components, testing framework (sunpeak test), CLI

What is an MCP App?

An MCP App is an interactive application built on the Model Context Protocol (MCP) that runs inside AI hosts like ChatGPT and Claude. MCP Apps consist of Resources (UI views) and Tools (API actions), enabling rich UI experiences like forms, charts, and interactive components directly in chat. ChatGPT Apps are MCP Apps rendered inside ChatGPT. Interactive Claude Connectors are MCP Apps rendered inside Claude.

What is an MCP App framework?

An MCP App framework provides the development infrastructure for building interactive applications that run inside AI hosts via the Model Context Protocol. sunpeak is an MCP App framework, ChatGPT App framework, Claude Connector framework, and MCP testing framework that includes a local inspector, pre-built UI components, testing utilities, and deployment tooling for building ChatGPT Apps and Claude Connectors.

What is a ChatGPT App framework?

A ChatGPT App framework is a development framework for building MCP Apps that run inside ChatGPT. sunpeak is a ChatGPT App framework that provides a local ChatGPT inspector, MCP App UI components, a built-in testing framework, and deployment tooling.

What is a Claude Connector framework?

A Claude Connector framework is a development framework for building MCP servers that integrate with Claude. sunpeak is a Claude Connector framework that provides a local Claude inspector, MCP App UI components, automated testing, and deployment tooling. Build interactive Claude Connectors that render UI directly in Claude conversations.

How do I test an MCP App locally?

Use sunpeak's built-in inspector. Run "pnpm dev" to start a local development server at localhost:3000 with hot reloading, or "npx sunpeak inspect --server URL" to inspect any existing MCP server. The inspector replicates the ChatGPT and Claude runtimes so you can test all display modes, themes, and tool invocations without a paid ChatGPT or Claude account.

Does sunpeak support MCP App testing in CI?

Yes. sunpeak includes a built-in testing framework for automated MCP App testing, ChatGPT App testing, and Claude Connector testing. Create deterministic UI states with simulation files, then run "pnpm test" in your CI/CD pipeline. It runs both unit and e2e tests. Use "pnpm test:unit" or "pnpm test:e2e" to run them separately, or "pnpm test:visual" for visual regression tests.

Open Source & MIT Licensed

npx sunpeak new
Documentation →