Claude Connector Framework for Building, Testing, and Shipping Connectors
sunpeak is an open-source Claude Connector framework that gives you a local Claude simulator, automated testing, and structured workflows for building interactive Claude Connectors that render UI inside Claude conversations.
pnpm add -g sunpeak && sunpeak new
Definition
A Claude Connector framework provides development infrastructure for building MCP servers that connect external data and services to Claude. It includes project scaffolding, a local Claude simulator, testing utilities, and deployment tooling. Interactive connectors also render UI inside Claude using MCP App resources.
What is a Claude Connector Framework?
Claude Connectors are MCP servers that give Claude access to external data and services. When you add a connector to Claude, Claude can call its tools to query databases, search documents, pull CRM records, or access any service your tool handlers connect to.
A Claude Connector framework handles the complexity of building these connectors: project structure, local development with a Claude simulator, automated testing, and deployment. Interactive connectors go further by rendering UI components (cards, dashboards, forms) directly inside Claude conversations using MCP App resources.
sunpeak is that framework. Build your connector, test it locally against a Claude simulator, and ship it to Claude, ChatGPT, or any MCP-compatible host from one codebase.
Two Types of Claude Connectors
Standard Connector
Returns data that Claude weaves into text responses. The connector provides the data, Claude provides the presentation.
- MCP server with tools
- Returns structured data
- Claude formats the output
Interactive Connector
Built with sunpeakReturns data and renders UI inside Claude. You control the presentation with React components that display cards, charts, forms, and dashboards directly in the conversation.
- MCP server with tools and resources
- React components render in Claude
- "Interactive" badge in Connectors Directory
- Same code also works in ChatGPT
Test Claude Connectors Locally
Use the sunpeak simulator for Claude Connector testing locally and in CI/CD. The simulator replicates the Claude runtime for deterministic UI testing without a paid Claude account.
How sunpeak works
Scaffold a Connector
Run sunpeak new to create a new project with TypeScript, React, Vite, and MCP configuration pre-configured.
Develop Locally
Use the built-in Claude simulator to develop and test your connector without deploying. Hot Module Replacement (HMR) keeps your development loop fast.
Test in Claude
Connect your local MCP server to real Claude via Settings > Connectors > Add custom connector. Use ngrok to expose your localhost. Auto-rebuild and refresh notifications keep your dev loop tight.
Build and Ship
Run sunpeak build to generate production bundles, then sunpeak start to launch a production MCP server. Submit to the Connectors Directory for public distribution.
Core Framework Features
- Local Claude Simulator
A React-based simulator that replicates the Claude runtime for local development and automated testing. No Claude account required.
- MCP App Component Library
Pre-built UI components that work in Claude and ChatGPT, following each host's design guidelines.
- Built-in MCP Server
A development MCP server that serves your resources with mock data and hot module replacement.
- TypeScript-First APIs
Strongly typed hooks and utilities for interacting with the MCP App runtime, host APIs, and state management. See the MCP Apps technical documentation.
- Testing Infrastructure
Vitest and Playwright integration for unit and end-to-end testing of Claude Connectors across host configurations.
- Production Server
Zero-config production server with
sunpeak start, or mount on Express, Cloudflare Workers, and other runtimes.
Who sunpeak is for
Coding Agents
Agents like Claude Code, Codex, and Cursor can scaffold, build, and test Claude Connectors with sunpeak's CLI and structured project conventions. No manual setup required.
React Developers
If you know React, you can build interactive Claude Connectors. sunpeak uses familiar patterns: functional components, hooks, and JSX.
MCP Server Authors
Add interactive UI to your existing MCP server. sunpeak handles the resource bundling, host communication, and Claude-specific behaviors.
Teams Submitting to the Directory
sunpeak projects satisfy the Connectors Directory transport requirement by default. Tool annotations, OAuth, and Streamable HTTP are all supported.
Getting Started
Install sunpeak globally and create a new connector project:
pnpm add -g sunpeak && sunpeak new
This scaffolds a complete project with TypeScript, React, Vite, and the sunpeak runtime
pre-configured. Run sunpeak dev to start the development server with the Claude simulator.
Frequently Asked Questions
What is a Claude Connector framework?
A Claude Connector framework provides the development infrastructure for building, testing, and deploying Claude Connectors. sunpeak is a Claude Connector framework that includes a local Claude simulator, pre-built UI components, testing utilities with Vitest and Playwright, and deployment tooling for building interactive connectors that render UI inside Claude.
What data can Claude access through connectors?
Claude accesses external data through connectors via MCP tools. Each tool defines what data it can read or write. A connector can query databases, call APIs, search documents, pull CRM records, fetch analytics, or access any service your tool handlers connect to. The connector author controls exactly what data Claude can access by defining tool schemas and handlers.
How do I add a custom connector to Claude?
Go to Claude Settings > Connectors > Add custom connector. Enter your MCP server URL (with the /mcp path) and save. For local development, use ngrok to make your localhost server accessible. Free Claude users can add one custom connector. Pro, Max, Team, and Enterprise plans support more.
What is the difference between a standard Claude Connector and an interactive one?
A standard Claude Connector returns data that Claude weaves into text responses. An interactive Claude Connector also includes MCP App resources that render UI (cards, dashboards, forms) inside the chat. Interactive connectors show an "Interactive" badge in the Connectors Directory. Both are MCP servers. sunpeak helps you build the interactive kind.
How do I test Claude Connectors locally?
Run "sunpeak dev" to start the local Claude simulator and MCP dev server at localhost:3000. Select Claude from the Host dropdown to test your connector in a replica of the Claude runtime. No paid Claude account or deployment required. The same simulator also tests ChatGPT rendering.
Do Claude Connectors need auth?
Custom connectors added via Settings > Add custom connector do not require auth during development. For the Connectors Directory, if your connector requires authentication, you must use OAuth. Pure client credentials flow (machine-to-machine without user interaction) is not supported. Provide a test account for Anthropic reviewers.
Can I run Claude Connector tests in CI/CD?
Yes. sunpeak includes Vitest and Playwright integration for automated Claude Connector testing. Create simulation files for deterministic UI states and run "pnpm test" for unit tests or "pnpm test:e2e" for end-to-end tests in your CI/CD pipeline. No Claude account needed.
Does my Claude Connector also work in ChatGPT?
Yes. A connector built with sunpeak is an MCP server that works with any MCP-compatible host. The same MCP App resources render in both Claude and ChatGPT without code changes. Build once, deploy to both.
Open Source & MIT Licensed
sunpeak is free to use, modify, and distribute.
Building for multiple hosts? See the MCP App Framework page. Building specifically for ChatGPT? See the ChatGPT App Framework page.
