Claude Connectors vs Claude Apps: What Developers Need to Know

TL;DR: Claude Connectors give Claude access to your data. Claude Apps give users interactive UI inside the chat. Both are MCP servers. If you want to build the interactive kind, use sunpeak to build an MCP App that works in Claude, ChatGPT, and other hosts.

Anthropic has shipped two overlapping features in early 2026, and the naming makes them easy to confuse. Claude Connectors and Claude Apps are both built on MCP (Model Context Protocol), both live in the Connectors Directory, and both extend what Claude can do. But they solve different problems.

This post breaks down the differences, explains when you would build each, and shows how they relate to MCP Apps.

Claude Connectors: Data In

Claude Connectors are MCP servers that give Claude access to external data and services. When you install a connector, Claude can read your Google Drive files, search your Slack messages, pull metrics from Amplitude, or look up contacts in your CRM.

The connector handles authentication, fetches the data, and passes it to Claude as context. Claude then reasons over that data and responds to the user. The user sees Claude’s text response, not a custom UI.

Anthropic ships first-party connectors for Google Drive, Google Calendar, Gmail, DocuSign, Notion, Stripe, WordPress, and more. The Connectors Directory at claude.ai has over 200 as of February 2026. Free users can access standard connectors. Paid plans (Pro, Max, Team, Enterprise) can connect custom MCP servers.

From a developer’s perspective, a standard connector is an MCP server that exposes tools. Claude calls your tools, gets structured data back, and uses it in its responses.

Claude Apps: UI Out

Claude Apps are interactive applications that render inside Claude’s chat. When Claude calls a tool, instead of returning text, it can display your HTML (usually a built React component) in a sandboxed iframe. Users interact with your UI directly: clicking, filtering, scrolling, submitting forms.

Figma, Canva, Asana, Slack, Box, Hex, and monday.com all ship Claude Apps. These are full interactive tools embedded in the conversation, not formatted text.

In the Connectors Directory, Claude Apps show up as having “Interactive” capability. They are connectors that include an interactive UI layer.

Technically, a Claude App is an MCP App. It is an MCP server that exposes both tools (backend logic) and resources (frontend React components). The MCP App standard defines how the host passes tool output to the resource and how the resource communicates state back to the model.

The Relationship

Here is the simplest way to think about it:

• All Claude Connectors are MCP servers.
• Claude Apps are Claude Connectors that also include MCP App resources (UI).
• Not all connectors are apps, but all apps are connectors.

If your connector only returns data for Claude to reason over, it is a standard connector. If your connector renders an interactive UI for the user, it is a Claude App.

You can also build a connector that does both: returns data to Claude for reasoning and renders a UI for the user. The data and UI paths are independent. Most of the first-party interactive connectors work this way.

Building a Standard Connector

A standard connector is an MCP server with tools. Here is a minimal example that exposes a single tool:

import { McpServer } from '@modelcontextprotocol/sdk/server/mcp.js';
import { z } from 'zod';

const server = new McpServer({ name: 'my-connector', version: '1.0.0' });

server.tool(
  'get-metrics',
  { timeframe: z.enum(['day', 'week', 'month']) },
  async ({ timeframe }) => {
    const data = await fetchMetrics(timeframe);
    return { content: [{ type: 'text', text: JSON.stringify(data) }] };
  }
);

Claude calls get-metrics, gets JSON back, and weaves it into a text response. No UI.

To distribute this, you submit it to the Connectors Directory. Anthropic reviews it, and users install it from claude.ai.

Building a Claude App (Interactive Connector)

A Claude App adds MCP App resources on top of the MCP server. The resource is a React component that receives the tool output and renders it as UI.

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

export const resource: ResourceConfig = {
  name: 'metrics-dashboard',
  description: 'Display metrics as an interactive dashboard',
};

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

export function MetricsDashboard() {
  const { output } = useToolData<unknown, MetricsData>(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>
  );
}

useToolData receives the tool output. SafeArea handles safe rendering across hosts.

The fastest way to get here is with sunpeak:

pnpm add -g sunpeak
sunpeak new
sunpeak dev

This scaffolds a full MCP App project and starts a local simulator. You can build and test your Claude App without a Claude account. The ChatGPT App tutorial walks through the full process step by step (the same code works in both Claude and ChatGPT because they share the MCP App standard).

Which Should You Build?

Build a standard connector if:

• You want Claude to have access to a data source (database, API, SaaS tool)
• The data is best consumed as text that Claude reasons over
• You don’t need a custom UI beyond Claude’s text responses

Build a Claude App (interactive connector) if:

• You want users to interact with a visual interface inside the chat
• Your data is best shown as a dashboard, form, gallery, map, or other structured UI
• You want to own how your data is presented to the user

Build both if your integration benefits from data access and visual presentation. Many of the first-party connectors do exactly this.

Portability

Standard connectors are MCP servers and work anywhere MCP is supported: Claude, ChatGPT, VS Code, Goose, and others.

Claude Apps are MCP Apps and are equally portable. The useToolData, useAppState, SafeArea, and useDisplayMode APIs are host-agnostic. Build once with sunpeak, and the same component renders in Claude, ChatGPT, and every other MCP App host.

If you need host-specific behavior, sunpeak provides opt-in subpath imports like sunpeak/chatgpt. The core sunpeak import stays portable.

Getting Started

• How to Build a Claude App covers the full architecture and code patterns.
• The ChatGPT App tutorial is a hands-on walkthrough of building an MCP App from scratch.
• The testing guide covers unit and end-to-end testing with Vitest and Playwright.
• The sunpeak documentation has the full API reference.
• Anthropic’s Connectors Directory FAQ covers submission requirements.

Build your connector, add interactive UI with sunpeak, and ship it to Claude, ChatGPT, and every MCP App host.