Insights, tutorials, and updates about MCP Apps and ChatGPT Apps.
Run automated Playwright tests against real ChatGPT sessions to validate your Claude Connector or MCP App end-to-end. sunpeak handles auth, MCP server refresh, and iframe access so you only write assertions.
sunpeak now includes a local Claude inspector alongside ChatGPT. Test your MCP Apps in both hosts from a single dev server, switch between them with a dropdown, and ship to Claude and ChatGPT from one codebase.
Learn the MCP concepts behind MCP Apps: hosts, servers, Tools, and Resources, and how they combine to render interactive UI inside AI conversations on ChatGPT, Claude, and other hosts.
A testing checklist for MCP Apps before submitting to the ChatGPT App Store or Claude Connectors Directory. Covers tool annotation validation, test credentials, privacy compliance, display mode testing, cross-host rendering, error handling, and CSP configuration.
A concrete guide to building MCP Apps that work across ChatGPT, Claude, Goose, and VS Code. Covers the cross-host architecture decisions, what to keep portable, when to add host-specific code, interactive state management, and the build order that gets you there.
How to write end-to-end tests for MCP Apps that render in simulated ChatGPT and Claude runtimes. Covers the inspector fixture, renderTool, cross-host testing, display mode and theme testing, simulation files, interactions, debugging, and organizing E2E tests.
A concrete proposal for building a ChatGPT App from scratch: architecture, stack, local development, testing strategy, deployment, and the build order that gets you to production fastest.
MCP Apps and A2UI both solve agent UI problems, but in completely different ways. MCP Apps are coded web applications that run in AI conversations. A2UI is a declarative JSON protocol for agent-generated interfaces. Here is how to choose.
Custom GPTs and ChatGPT Apps both run inside ChatGPT, but they solve different problems. Custom GPTs are no-code text assistants. ChatGPT Apps are coded applications with interactive UI built on the Model Context Protocol.
A practical guide to unit testing MCP App resource components and tool handlers with Vitest. Covers mocking sunpeak hooks, testing loading and error states, validating tool handler logic, and organizing unit tests for ChatGPT Apps and Claude Connectors.
MCP Apps are interactive UIs that run inside AI conversations on ChatGPT, Claude, and other hosts. Learn how MCP Apps work, how they differ from MCP servers, and how to build one with a working code example.
MCP Apps run inside ChatGPT, Claude, VS Code, and other AI hosts. The MCP App framework you pick determines how fast you ship, how well you test, and whether your app works across hosts. Here is what to evaluate.
sunpeak is an MCP-App-first framework: its core APIs target the MCP App standard while layering in ChatGPT and Claude-specific functionality as first-class extensions. MCP Apps now run in ChatGPT, Claude, VS Code, Goose, and more.
How to performance test MCP Apps by measuring tool call latency, cold start time, bundle size, and rendering speed. Covers benchmarking with the mcp fixture, tracking regressions in CI, and optimizing what matters inside host iframes.
Debug ChatGPT Apps and MCP Apps with practical techniques: fixing blank screens, resource caching, tool input/output mismatches, display mode bugs, theme issues, and MCP protocol errors. Includes local debugging with the sunpeak inspector and integration tests.
How to write integration tests for MCP Apps that verify tool handlers, resource components, and MCP protocol behavior work together. Covers the mcp fixture, callTool, listTools, contract testing, and testing multi-tool workflows.
ChatGPT Apps are interactive UIs built on MCP that render inside ChatGPT conversations. Building them from scratch means solving infrastructure problems every time. A ChatGPT App framework like sunpeak handles local testing, components, multi-host portability, and CI/CD so you can focus on your product.
A practical guide to minimizing AI-era tech debt through context window management, smaller teams, and open-source protocols like MCP, MCP Apps, ChatGPT Apps, and Claude Connectors. Adapted from a talk at the Austin CTO Club.
You don't need a ChatGPT Plus subscription to build ChatGPT Apps. ChatGPT Apps are MCP Apps built on the Model Context Protocol. Here is how to develop and test locally with the sunpeak Inspector, no account required.
Catch pixel-level UI regressions in your MCP App across ChatGPT and Claude hosts. Learn how to set up visual regression tests with screenshot baselines, configure thresholds, handle cross-host differences, and run visual tests in CI/CD.
A step-by-step guide to developing and testing ChatGPT Apps on your local machine. Covers project setup, the sunpeak Inspector, display modes, automated testing, connecting to ChatGPT via tunneling, and production deployment. No paid ChatGPT account required.
MCP has mass adoption, but the consumer experience still lags behind the web. Discovery, connection, and use all need browser-like simplicity. MCP Apps from ChatGPT, Claude, and VS Code are getting us there.
Build, test, and deploy a ChatGPT App with just two commands using sunpeak. A complete quick-start guide covering project setup, local testing with the Inspector, connecting to ChatGPT via tunneling, and production deployment.
How to use Vitest snapshot testing to catch unexpected changes in MCP App resource components, tool handler output, and structured content. Covers toMatchSnapshot, toMatchInlineSnapshot, and snapshot best practices.
A complete breakdown of ChatGPT App and MCP App display behavior across all display modes and screen widths. Exact HTML, CSS, and height constraints for inline, fullscreen, and picture-in-picture modes.
Learn how to test ChatGPT Apps and MCP Apps with unit tests, end-to-end tests, visual regression tests, multi-model evals, and simulation files. Covers the sunpeak testing framework, the inspector fixture, evals, and CI/CD integration.
Set up a GitHub Actions workflow that runs unit tests, end-to-end tests, and multi-model evals for your MCP App on every push, using sunpeak test with the inspector fixture. No paid AI host accounts, no credits burned, no manual clicking.
A practical guide to testing Claude Connectors at every stage. Covers unit testing tool handlers with Vitest, local testing with the sunpeak inspector, simulation files, e2e tests with the inspector fixture, multi-model evals, and running Claude Connector tests in GitHub Actions CI/CD.
A practical guide to building ChatGPT Apps (MCP Apps) based on real-world experience. Learn about MCP architecture, the migration from window.openai to MCP Apps, caching strategies, and undocumented runtime APIs.
How to mock tool calls, stub external APIs, and use simulation files to test MCP Apps, ChatGPT Apps, and Claude Connectors without paid accounts or live services.
A complete guide to building ChatGPT Apps using the MCP Apps protocol. Covers official resources, project setup, architecture basics, display modes, testing, submission to the ChatGPT App Directory, and cross-host development.
How to format data returned from Claude Connector tools so Claude reasons about it correctly. Covers text content vs structured content, pagination, large datasets, and response formatting patterns for both standard and interactive connectors.
A technical deep dive into how Claude Connectors work under the hood. Covers the request lifecycle, Streamable HTTP transport, OAuth 2.1 authentication, tool response formatting, interactive UI rendering, and known limits like the 25,000 token cap and 5-minute timeout.
Practical Claude Connector examples covering read-only data connectors, interactive UI connectors, CRUD connectors, API wrappers, and multi-resource connectors. Code patterns for each type with tool definitions, handlers, and resource components.
SSE transport is deprecated in the MCP spec. Learn how to migrate your Claude Connector from HTTP+SSE to Streamable HTTP, with code examples for the TypeScript SDK, Python SDK, and common hosting platforms.
How to deploy a Claude Connector to production. Covers hosting options (Cloudflare Workers, Vercel, Railway, VPS), HTTPS requirements, OAuth callback URLs, health checks, and going from local development to a live Claude integration.
Your Claude Connector is not working. Here is how to diagnose and fix the most common issues: connection failures, tools not called, UI not rendering, OAuth errors, token limits, and timeouts.
How to design MCP tools for your Claude Connector so Claude calls them correctly. Covers tool descriptions, Zod schemas, return types, granularity patterns, annotations, and common mistakes.
A developer guide to submitting your Claude Connector to the Connectors Directory. Covers tool annotations (the #1 rejection reason), privacy policies, OAuth callback URLs, documentation requirements, and how to test before you submit.
MCP App resources run in sandboxed iframes with no external connections by default. Learn the difference between connectDomains, resourceDomains, and frameDomains in your resource CSP, and when to use each one.
Learn how TypeScript types flow through an MCP App from the Zod schema in your tool file to the useToolData generics in your React resource component. Covers Args inference, structuredContent typing, shared type files, inputPartial for streaming, and Vitest tool tests.
Step-by-step guide to deploying an MCP App to production with sunpeak. Covers building, starting the production server, authentication, environment variables, hosting options, and connecting your live server to ChatGPT and Claude.
MCP Apps can request their own display mode changes using useApp and requestDisplayMode. Learn how to add Expand, Pop Out, and Close buttons to your resources, handle the PiP-to-fullscreen fallback on mobile, and test every transition locally.
A developer guide to OAuth authentication for Claude Connectors. Learn when auth is required, how the OAuth flow works with Claude, how to configure callback URLs, and what the Connectors Directory submission requires.
Claude Connectors give Claude access to external data through MCP. Learn what data Claude can access, how authentication works, how to add custom connectors, and how to troubleshoot common issues like "could not load connectors directory."
The MCP Apps protocol sends tool-result, tool-cancelled, and tool-input notifications to your resource. Learn how to handle loading, error, and cancelled states in MCP App resources using sunpeak's useToolData hook, with complete UI patterns and simulation file examples for testing each state.
ChatGPT and Claude each have their own visual style. Use the host-provided CSS variables and useTheme to build MCP Apps that look native in any host, in both light and dark mode.
Most MCP App tutorials show read-only cards. useAppState lets you build interactive UIs where user actions sync back to the AI model. Here is how it works and when to use it.
Build an interactive Claude Connector from scratch. Learn the architecture, create tools and UI resources, test locally, connect to a real Claude session with ngrok, and submit to the Connectors Directory.
Build a working MCP App from scratch with sunpeak. This hands-on tutorial walks through creating a resource, writing a tool, adding test data, and running the multi-host inspector locally.
Claude Connectors connect Claude to external data sources. Claude Apps render interactive UI inside Claude. Both are built on MCP, but they solve different problems. Here is how they differ and how to build each.
ChatGPT and Claude both support MCP Apps. You can build a single React component that runs on both hosts without code changes. Here is how the cross-platform story works in practice.
Claude Apps are interactive applications that run inside Claude. They are MCP Apps built with React, rendered in sandboxed iframes, and portable across AI hosts. Here is how to build one.
Build a working ChatGPT App from scratch using sunpeak. This hands-on tutorial walks through creating a recipe card, adding mock data, and testing locally without a paid ChatGPT account.
