How to Build a Claude App

TL;DR: Claude Apps are MCP Apps that run inside Claude. You build them with React, test them locally with sunpeak’s simulator, and deploy them to Claude, ChatGPT, or any MCP host from one codebase.

Since January 2026, Claude renders interactive applications directly in the chat. Figma, Canva, Asana, and Slack already ship Claude Apps. If you have been building for the web with React, you can build one too.

This post covers what Claude Apps are, how they work under the hood, and how to build one from scratch using sunpeak, an open-source MCP App framework.

What Is a Claude App?

A Claude App is an interactive web application that renders inside Claude’s UI. When Claude calls a tool, instead of returning the result as text, it can render your app in a sandboxed iframe. Your app receives the tool’s structured data and displays it as real UI: cards, charts, forms, maps, whatever you build with React.

This works on both Claude web and Claude Desktop. It is available on Free, Pro, Max, Team, and Enterprise plans.

The underlying technology is MCP Apps. MCP (Model Context Protocol) is the open standard Anthropic created for tool and app communication between AI models and external systems. A “Claude App” is just an MCP App running inside Claude. The same app runs in ChatGPT, Goose, VS Code, and any other host that implements the standard.

How Claude Apps Work

A Claude App has two parts: a tool (backend) and a resource (frontend).

The tool is an MCP server that Claude calls when a user asks for something. It runs your backend logic, fetches data, or computes a result. The resource is an HTML page (a built React component for sunpeak) that receives the tool’s output and renders it as UI.

Here is the data flow:

1. A user asks Claude something (“Show me the Q4 dashboard”).
2. Claude decides to call your tool. Your MCP server executes it and returns structured data.
3. Claude passes that data to your resource component via structuredContent.
4. Your React component receives it through useToolData and renders it in an iframe inside the chat.

The resource is pure frontend. It does not call APIs or run server logic directly. Claude handles the reasoning, your tool handles the data, and your resource handles the presentation.

import { useToolData, SafeArea } from 'sunpeak';
import type { ResourceConfig } from 'sunpeak';

export const resource: ResourceConfig = {
  name: 'dashboard',
  description: 'Display a metrics dashboard',
};

interface DashboardData {
  title: string;
  metrics: { label: string; value: string; change: string }[];
}

export function DashboardResource() {
  const { output } = useToolData<unknown, DashboardData>(undefined, undefined);

  if (!output) return null;

  return (
    <SafeArea className="p-4 font-sans">
      <h1 className="text-xl font-bold mb-4">{output.title}</h1>
      <div className="grid grid-cols-3 gap-4">
        {output.metrics.map((m) => (
          <div key={m.label} className="p-3 bg-gray-50 rounded-lg">
            <div className="text-sm text-gray-500">{m.label}</div>
            <div className="text-2xl font-bold">{m.value}</div>
            <div className="text-sm text-green-600">{m.change}</div>
          </div>
        ))}
      </div>
    </SafeArea>
  );
}

That component works in Claude and ChatGPT without changes. The useToolData hook, SafeArea component, and ResourceConfig type are all part of the MCP App standard that sunpeak implements. Nothing in this code is host-specific.

Building Your First Claude App

The fastest way to build a Claude App is with sunpeak:

pnpm add -g sunpeak
sunpeak new
sunpeak dev

This scaffolds a project, installs dependencies, and starts a local simulator at localhost:3000. The simulator replicates both Claude and ChatGPT’s app runtime so you can build and test without any account.

Your app code goes in src/resources/. Each resource is a React component paired with a config object. Sunpeak auto-discovers resources by directory convention: any file at src/resources/{name}/{name}-resource.tsx becomes a resource.

Mock data goes in tests/simulations/. These are JSON files that describe what the user said, what tool Claude called, and what data came back. The simulator loads them so you can develop against realistic scenarios without connecting to a live Claude session.

For a full walkthrough of building a resource from scratch, adding simulation data, and running the simulator, see the ChatGPT App tutorial. The steps are identical because both hosts use the same MCP App standard. The tutorial builds a recipe card, but the same patterns apply to any Claude App.

Why Portability Matters

Claude and ChatGPT both implement MCP Apps. So do Goose, VS Code Insiders, and a growing list of hosts. When you build with sunpeak’s core API, your app works across all of them.

This is not an abstraction layer hiding host differences. The MCP App protocol itself is the standard. useToolData, useAppState, useDisplayMode, SafeArea, and the rest of the core API map directly to the protocol. Your app talks MCP, and any host that speaks MCP can render it.

If you do want host-specific features, sunpeak provides opt-in subpath imports. The sunpeak/chatgpt subpath exports ChatGPT-specific utilities. The core sunpeak import stays portable.

For most apps, you will never need host-specific code. The same resource component, the same simulation files, and the same test suite work everywhere.

What You Can Build

Claude Apps are not limited to simple cards. Because they run in iframes with full HTML/CSS/JS, you can build anything a web app can do:

• Data dashboards with charts and filters
• Document review interfaces with inline annotations
• Multi-step forms and wizards
• Map-based UIs with location pins
• Media galleries with lightbox viewers
• Code diff viewers with syntax highlighting

The first-party Claude Apps from Figma, Canva, Asana, and Slack demonstrate the range. These are full interactive tools rendered inside the chat, not just formatted text.

Sunpeak’s built-in UI components give you a head start with common patterns (carousels, cards, safe area layouts), and you can use any React library or CSS framework alongside them.

Getting Started

Three commands to a running Claude App:

pnpm add -g sunpeak
sunpeak new
sunpeak dev

From there:

• The ChatGPT App tutorial walks through building a resource from scratch (same steps for Claude Apps).
• The testing guide covers unit tests and end-to-end tests with Vitest and Playwright.
• The display mode reference documents how apps render inline, fullscreen, and picture-in-picture.
• The sunpeak documentation has the full API reference.

Build once, run on Claude, ChatGPT, and every MCP App host.