Claude Connector Framework for Building, Testing, and Shipping Connectors
sunpeak is an open-source Claude Connector framework that gives you a local Claude inspector, automated testing, and structured workflows for building interactive Claude Connectors that render UI inside Claude conversations.
npx sunpeak new
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 inspector, 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 inspector, 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 inspector for Claude Connector testing locally and in CI/CD. The inspector replicates the Claude runtime for deterministic UI testing without a paid Claude account.
How sunpeak works
Scaffold a Connector
Run npx sunpeak new to create a new project with TypeScript, React, Vite, and MCP configuration pre-configured.
Develop Locally
Use the built-in Claude inspector 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 pnpm build to generate production bundles, then pnpm start to launch a production MCP server. Submit to the Connectors Directory for public distribution.
Core Framework Features
- Local Claude Inspector
A React-based inspector 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
Built-in testing framework for unit, end-to-end, and visual regression testing of Claude Connectors across host configurations. Run
pnpm testfor unit + e2e, or addpnpm test:visualfor visual regression tests. - Production Server
Zero-config production server with
pnpm 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:
npx sunpeak new
This scaffolds a complete project with TypeScript, React, Vite, and the sunpeak runtime
pre-configured. Run pnpm dev to start the development server with the Claude inspector.
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 inspector, pre-built UI components, a built-in testing framework, 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 "pnpm dev" to start the local Claude inspector 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 inspector 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 a built-in testing framework for automated Claude Connector testing. Create simulation files for deterministic UI states and 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, "pnpm test:visual" for visual regression tests, or "pnpm test:eval" for multi-model evals that test tool calling across GPT-4o, Claude, Gemini, and other LLMs. No Claude account needed for inspector tests.
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.
Testing Claude Connectors? See the Testing Framework page.
Building for multiple hosts? See the MCP App Framework page. Building specifically for ChatGPT? See the ChatGPT App Framework page.
