Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion CLAUDE.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
# MCP AppsKit Development Guidelines

A TypeScript framework for building interactive MCP applications that work with both **MCP Apps (Claude Desktop)** and **ChatGPT (OpenAI Apps SDK)** from a single codebase.
A TypeScript framework for building interactive MCP applications that work with both **MCP Apps** and **ChatGPT (OpenAI Apps SDK)** from a single codebase.

## Project Structure

Expand Down
6 changes: 3 additions & 3 deletions docs/quickstart.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
# Quickstart

Build interactive MCP applications with rich UIs that work on both **Claude Desktop** and **ChatGPT** from a single codebase.
Build interactive MCP applications with rich UIs that work on both **MCP Apps** and **ChatGPT** from a single codebase.

## Installation

Expand Down Expand Up @@ -321,8 +321,8 @@ tools: {

MCP Apps Kit automatically handles protocol differences:

| Feature | Claude Desktop | ChatGPT |
|---------|---------------|---------|
| Feature | MCP Apps | ChatGPT |
|---------|----------|---------|
| Tool execution | MCP protocol | OpenAI Apps SDK |
| UI rendering | iframe | Widget runtime |
| Theme support | Auto-detected | Auto-detected |
Expand Down
18 changes: 4 additions & 14 deletions examples/minimal/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -49,22 +49,12 @@ curl -X POST http://localhost:3000/v2/mcp \
-d '{"jsonrpc":"2.0","method":"tools/call","params":{"name":"greet","arguments":{"name":"John","surname":"Doe"}},"id":1}'
```

## Connecting to Claude Desktop
## Connecting to an MCP Apps Host

Add to your Claude Desktop config (`~/Library/Application Support/Claude/claude_desktop_config.json`):
Configure your MCP Apps-compatible host to connect to one or both API versions:

```json
{
"mcpServers": {
"minimal-app-v1": {
"url": "http://localhost:3000/v1/mcp"
},
"minimal-app-v2": {
"url": "http://localhost:3000/v2/mcp"
}
}
}
```
- **v1 endpoint**: `http://localhost:3000/v1/mcp`
- **v2 endpoint**: `http://localhost:3000/v2/mcp`

## Testing

Expand Down
2 changes: 1 addition & 1 deletion examples/minimal/src/ui/GreetingWidgetV1.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
*
* This version demonstrates the debug logging via MCP tool transport:
* - Logs are sent via the log_debug MCP tool
* - Default behavior for MCP adapter (Claude Desktop, etc.)
* - Default behavior for MCP adapter
*/

import { useEffect, useState } from "react";
Expand Down
25 changes: 12 additions & 13 deletions examples/restaurant-finder/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -69,17 +69,16 @@ Get mood-based restaurant recommendations.

- `mood`: One of "quick", "romantic", "family", "business"

## Connecting to Claude Desktop

Add to your Claude Desktop config:

```json
{
"mcpServers": {
"restaurant-finder": {
"command": "npx",
"args": ["tsx", "path/to/examples/restaurant-finder/src/index.ts"]
}
}
}
## Connecting to an MCP Apps Host

Configure your MCP Apps-compatible host to connect to the server:

**HTTP mode (default):**

- Endpoint: `http://localhost:3000/mcp`

**Stdio mode (for hosts that support it):**

```bash
npx tsx path/to/examples/restaurant-finder/src/index.ts
```
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
"version": "0.3.0",
"private": true,
"type": "module",
"description": "Unified MCP Apps Builder SDK - Build MCP apps for Claude Desktop and ChatGPT from a single codebase",
"description": "Unified MCP Apps Builder SDK - Build MCP apps for any MCP Apps-compatible host from a single codebase",
"scripts": {
"build": "nx run-many --target=build",
"test": "nx run-many --target=test",
Expand Down
2 changes: 1 addition & 1 deletion packages/core/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@

Server-side framework for building MCP applications.

MCP AppsKit Core is the server runtime for defining tools, validating inputs and outputs with Zod, and binding UI resources. It targets both MCP Apps (Claude Desktop) and ChatGPT (OpenAI Apps SDK) from the same definitions.
MCP AppsKit Core is the server runtime for defining tools, validating inputs and outputs with Zod, and binding UI resources. It targets both MCP Apps and ChatGPT (OpenAI Apps SDK) from the same definitions.

## Table of Contents

Expand Down
2 changes: 1 addition & 1 deletion packages/core/src/adapters/mcp.ts
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
/**
* MCP Protocol Adapter
*
* Handles metadata generation for MCP Apps protocol (Claude Desktop, etc.).
* Handles metadata generation for MCP Apps protocol.
* Uses camelCase naming and _meta.ui.* namespace.
*/

Expand Down
2 changes: 1 addition & 1 deletion packages/core/src/adapters/types.ts
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ export interface UIResourceMetaResult {
* Protocol adapter interface
*
* Implementations handle protocol-specific metadata generation for:
* - MCP Apps (Claude Desktop, etc.)
* - MCP Apps
* - OpenAI/ChatGPT Apps
*
* This allows server/index.ts to remain protocol-agnostic.
Expand Down
4 changes: 2 additions & 2 deletions packages/core/src/types/config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ import type { UIDefs } from "./ui";
/**
* Target protocol for metadata generation
*
* - `"mcp"`: MCP Apps protocol (Claude Desktop, etc.) - uses camelCase metadata
* - `"mcp"`: MCP Apps protocol - uses camelCase metadata
* - `"openai"`: OpenAI/ChatGPT Apps protocol - uses snake_case metadata with openai/ prefixes
*
* @internal
Expand Down Expand Up @@ -239,7 +239,7 @@ export interface GlobalConfig {
/**
* Target protocol for metadata generation.
*
* - `"mcp"` (default): MCP Apps protocol for Claude Desktop, etc.
* - `"mcp"` (default): MCP Apps protocol.
* Uses camelCase metadata format (e.g., `_meta.ui.csp.connectDomains`)
*
* - `"openai"`: OpenAI/ChatGPT Apps protocol.
Expand Down
2 changes: 1 addition & 1 deletion packages/core/src/types/tools.ts
Original file line number Diff line number Diff line change
Expand Up @@ -73,7 +73,7 @@ export interface UserLocation {
/**
* Context provided by the client during tool invocation
*
* Contains metadata hints from the host platform (ChatGPT, Claude Desktop, etc.).
* Contains metadata hints from the host platform (ChatGPT, MCP Apps hosts, etc.).
* All fields are optional as availability depends on the client.
*
* @example
Expand Down
4 changes: 2 additions & 2 deletions packages/core/tests/unit/context.test.ts
Original file line number Diff line number Diff line change
Expand Up @@ -166,11 +166,11 @@ describe("ToolContext", () => {

it("should have correct type for userAgent", () => {
const context: ToolContext = {
userAgent: "Claude Desktop/1.0",
userAgent: "MCP Host/1.0",
raw: {},
};

expect(context.userAgent).toBe("Claude Desktop/1.0");
expect(context.userAgent).toBe("MCP Host/1.0");
});

it("should have correct type for userLocation", () => {
Expand Down
38 changes: 16 additions & 22 deletions packages/create-app/src/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -417,19 +417,16 @@ ${packageManager} run dev
${packageManager} run build
\`\`\`

## Connecting to Claude Desktop
## Connecting to an MCP Apps Host

Add to your Claude Desktop config:
Configure your MCP Apps-compatible host to connect to the server:

\`\`\`json
{
"mcpServers": {
"${name}": {
"command": "npx",
"args": ["tsx", "path/to/${name}/server/index.ts"]
}
}
}
**HTTP mode (default):**
- Endpoint: \`http://localhost:3000/mcp\`

**Stdio mode (for hosts that support it):**
\`\`\`bash
npx tsx path/to/${name}/server/index.ts
\`\`\`
${
vercel
Expand Down Expand Up @@ -804,19 +801,16 @@ ${packageManager} run dev
${packageManager} run build
\`\`\`

## Connecting to Claude Desktop
## Connecting to an MCP Apps Host

Add to your Claude Desktop config:
Configure your MCP Apps-compatible host to connect to the server:

\`\`\`json
{
"mcpServers": {
"${name}": {
"command": "npx",
"args": ["tsx", "path/to/${name}/server/index.ts"]
}
}
}
**HTTP mode (default):**
- Endpoint: \`http://localhost:3000/mcp\`

**Stdio mode (for hosts that support it):**
\`\`\`bash
npx tsx path/to/${name}/server/index.ts
\`\`\`
${
vercel
Expand Down
2 changes: 1 addition & 1 deletion packages/testing/src/ui/mock-host.ts
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ import { uiLogger } from "../debug";
* Create a mock host environment for testing UI components
*
* This creates a standalone mock host that can be used to test UI widgets
* without requiring an actual host platform (like Claude Desktop or ChatGPT).
* without requiring an actual host platform (like an MCP Apps host or ChatGPT).
*
* @param options - Mock host configuration
* @returns Mock host instance
Expand Down
18 changes: 9 additions & 9 deletions packages/ui-react-builder/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@

Build tool for React-based MCP application UIs.

`@mcp-apps-kit/ui-react-builder` allows you to define UI resources using React components instead of pre-built HTML files. The framework handles bundling React, ReactDOM, and `@mcp-apps-kit/ui-react` into self-contained HTML that works with both MCP Apps (Claude Desktop) and ChatGPT.
`@mcp-apps-kit/ui-react-builder` allows you to define UI resources using React components instead of pre-built HTML files. The framework handles bundling React, ReactDOM, and `@mcp-apps-kit/ui-react` into self-contained HTML that works with both MCP Apps and ChatGPT.

## Table of Contents

Expand Down Expand Up @@ -193,14 +193,14 @@ If you need patterns not supported by auto-discovery, use `defineUI({ html: "...

#### `defineReactUI` Options

| Option | Type | Default | Description |
| --------------- | --------------- | ---------- | ------------------------------------------------------------------------------------------------------------ |
| `component` | `ComponentType` | (required) | React component to render |
| `name` | `string` | (required) | Display name for the UI |
| `description` | `string` | - | Description of the UI widget |
| `prefersBorder` | `boolean` | - | Hint to the host whether a border should be drawn |
| `autoResize` | `boolean` | `true` | Enable automatic size change notifications. Only supported in MCP Apps (Claude Desktop); ignored in ChatGPT. |
| `csp` | `CSPConfig` | - | Content Security Policy configuration (ChatGPT only) |
| Option | Type | Default | Description |
| --------------- | --------------- | ---------- | ------------------------------------------------------------------------------------------- |
| `component` | `ComponentType` | (required) | React component to render |
| `name` | `string` | (required) | Display name for the UI |
| `description` | `string` | - | Description of the UI widget |
| `prefersBorder` | `boolean` | - | Hint to the host whether a border should be drawn |
| `autoResize` | `boolean` | `true` | Enable automatic size change notifications. Only supported in MCP Apps; ignored in ChatGPT. |
| `csp` | `CSPConfig` | - | Content Security Policy configuration (ChatGPT only) |

### Types

Expand Down
2 changes: 1 addition & 1 deletion packages/ui-react-builder/src/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
* This package allows you to define UI resources using React components
* instead of pre-built HTML files. The framework handles bundling React,
* ReactDOM, and @mcp-apps-kit/ui-react into self-contained HTML that works
* with both MCP Apps (Claude Desktop) and ChatGPT.
* with both MCP Apps and ChatGPT.
*
* @example Basic usage
* ```typescript
Expand Down
6 changes: 3 additions & 3 deletions packages/ui-react/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -119,7 +119,7 @@ export function App() {

### Automatic size notifications

By default, the MCP adapter automatically reports UI size changes to the host using a ResizeObserver. This feature is **only supported in MCP Apps (Claude Desktop)** and is silently ignored in ChatGPT.
By default, the MCP adapter automatically reports UI size changes to the host using a ResizeObserver. This feature is **only supported in MCP Apps** and is silently ignored in ChatGPT.

To disable automatic resizing:

Expand Down Expand Up @@ -166,7 +166,7 @@ export type AppClientTools = ClientToolsFromCore<typeof app.tools>;
- `AppsProvider` - Context wrapper for all hooks
- `client?` - Pre-initialized client instance (optional)
- `forceAdapter?` - Force a specific adapter ("mcp" | "openai" | "mock")
- `autoResize?` - Enable/disable automatic size change notifications (default: `true`). Only supported in MCP Apps (Claude Desktop); ignored in ChatGPT. Note: changing this prop after initial mount has no effect.
- `autoResize?` - Enable/disable automatic size change notifications (default: `true`). Only supported in MCP Apps; ignored in ChatGPT. Note: changing this prop after initial mount has no effect.
- `fallback?` - Component to show while client initializes
- `errorFallback?` - Component to show on initialization error

Expand Down Expand Up @@ -225,7 +225,7 @@ function Widget() {
const hasFileUpload = !!capabilities?.fileUpload;

// Host version (MCP Apps only)
// { name: "Claude Desktop", version: "1.0.0" }
// { name: "MCP Host", version: "1.0.0" }
return <div>Host: {version?.name}</div>;
}
```
Expand Down
2 changes: 1 addition & 1 deletion packages/ui/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -203,7 +203,7 @@ capabilities?.views; // {} if supported

```ts
const version = client.getHostVersion();
// { name: "Claude Desktop", version: "1.0.0" } (MCP Apps only)
// { name: "MCP Host", version: "1.0.0" } (MCP Apps only)
```

### Theme & Style Utilities
Expand Down
6 changes: 3 additions & 3 deletions packages/ui/src/adapters/mcp.ts
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
/**
* MCP Apps adapter for Claude Desktop
* MCP Apps adapter
*
* Implements the ProtocolAdapter interface for MCP Apps running in Claude Desktop.
* Implements the ProtocolAdapter interface for MCP Apps hosts.
* Uses @modelcontextprotocol/ext-apps (JSON-RPC over postMessage + ui/initialize).
*
* @internal
Expand Down Expand Up @@ -63,7 +63,7 @@ export type McpAdapterOptions = {
};

/**
* Adapter for MCP Apps (Claude Desktop)
* Adapter for MCP Apps hosts
*
* @internal
*
Expand Down
2 changes: 1 addition & 1 deletion packages/ui/src/adapters/types.ts
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ import type { LogEntry } from "../debug/logger";
* Internal interface for protocol adapters
*
* Implemented by:
* - McpAppsAdapter: For Claude Desktop (MCP Apps)
* - McpAppsAdapter: For MCP Apps hosts
* - ChatGptAppsAdapter: For ChatGPT (OpenAI Apps SDK)
* - MockAdapter: For development/testing
*
Expand Down
4 changes: 2 additions & 2 deletions packages/ui/src/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
* ```typescript
* import { createClient } from "@mcp-apps-kit/ui";
*
* // Auto-detects platform (Claude Desktop vs ChatGPT)
* // Auto-detects platform (MCP Apps vs ChatGPT)
* const client = await createClient();
*
* // Type-safe tool calls
Expand Down Expand Up @@ -148,7 +148,7 @@ function createAdapter(
/**
* Create a unified client for UI code
*
* Automatically detects the host platform (Claude Desktop vs ChatGPT)
* Automatically detects the host platform (MCP Apps vs ChatGPT)
* and returns a client with the appropriate adapter.
*
* @param options - Optional configuration
Expand Down
4 changes: 2 additions & 2 deletions packages/ui/src/types.ts
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@ export interface HostCapabilities {
};

// ===========================================================================
// MCP Apps specific capabilities (Claude Desktop)
// MCP Apps specific capabilities
// ===========================================================================

/** Host can proxy resource reads to MCP server (MCP Apps only) */
Expand Down Expand Up @@ -106,7 +106,7 @@ export interface HostCapabilities {
* @internal
*/
export interface HostVersion {
/** Host application name (e.g., "Claude Desktop") */
/** Host application name (e.g., "MCP Host") */
name: string;
/** Host application version */
version: string;
Expand Down
2 changes: 1 addition & 1 deletion packages/ui/tests/unit/detection.test.ts
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
* Unit tests for protocol detection
*
* Tests the detectProtocol() function that auto-detects
* whether the UI is running in Claude Desktop, ChatGPT, or development mode.
* whether the UI is running in an MCP Apps host, ChatGPT, or development mode.
*
* @vitest-environment jsdom
*/
Expand Down
2 changes: 1 addition & 1 deletion packages/ui/tests/unit/mcp-adapter.test.ts
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
/**
* Unit tests for MCP adapter
*
* Tests the McpAdapter implementation for Claude Desktop (MCP Apps).
* Tests the McpAdapter implementation for MCP Apps hosts.
*/

import { describe, it, expect, vi, beforeEach } from "vitest";
Expand Down