Skip to content

Commit 163b09e

Browse files
ochafikclaude
ochafik
and
claude
committed
feat: add server helpers and optional connect() transport
Add `src/server/` with convenience functions for registering MCP App tools and resources: - `registerAppTool(server, name, config, handler)` - `registerAppResource(server, name, uri, config, callback)` The `transport` parameter in `App.connect()` is now optional, defaulting to `PostMessageTransport(window.parent)`. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
1 parent 31e05d3 commit 163b09e

File tree

14 files changed

+399
-31
lines changed

14 files changed

+399
-31
lines changed

‎examples/basic-server-react/server.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { StdioServerTransport } from "@modelcontextprotocol/sdk/server/stdio.js"
33
import type { CallToolResult, ReadResourceResult } from "@modelcontextprotocol/sdk/types.js";
44
import fs from "node:fs/promises";
55
import path from "node:path";
6-
import { RESOURCE_MIME_TYPE, RESOURCE_URI_META_KEY } from "../../dist/src/app";
6+
import { registerAppTool, registerAppResource, RESOURCE_MIME_TYPE, RESOURCE_URI_META_KEY } from "@modelcontextprotocol/ext-apps/server";
77
import { startServer } from "../shared/server-utils.js";
88

99
const DIST_DIR = path.join(import.meta.dirname, "dist");
@@ -22,7 +22,7 @@ function createServer(): McpServer {
2222
// MCP Apps require two-part registration: a tool (what the LLM calls) and a
2323
// resource (the UI it renders). The `_meta` field on the tool links to the
2424
// resource URI, telling hosts which UI to display when the tool executes.
25-
server.registerTool(
25+
registerAppTool(server,
2626
"get-time",
2727
{
2828
title: "Get Time",
@@ -38,7 +38,7 @@ function createServer(): McpServer {
3838
},
3939
);
4040

41-
server.registerResource(
41+
registerAppResource(server,
4242
RESOURCE_URI,
4343
RESOURCE_URI,
4444
{ mimeType: RESOURCE_MIME_TYPE },

‎examples/basic-server-vanillajs/server.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { StdioServerTransport } from "@modelcontextprotocol/sdk/server/stdio.js"
33
import type { CallToolResult, ReadResourceResult } from "@modelcontextprotocol/sdk/types.js";
44
import fs from "node:fs/promises";
55
import path from "node:path";
6-
import { RESOURCE_MIME_TYPE, RESOURCE_URI_META_KEY } from "../../dist/src/app";
6+
import { registerAppTool, registerAppResource, RESOURCE_MIME_TYPE, RESOURCE_URI_META_KEY } from "@modelcontextprotocol/ext-apps/server";
77
import { startServer } from "../shared/server-utils.js";
88

99
const DIST_DIR = path.join(import.meta.dirname, "dist");
@@ -22,7 +22,7 @@ function createServer(): McpServer {
2222
// MCP Apps require two-part registration: a tool (what the LLM calls) and a
2323
// resource (the UI it renders). The `_meta` field on the tool links to the
2424
// resource URI, telling hosts which UI to display when the tool executes.
25-
server.registerTool(
25+
registerAppTool(server,
2626
"get-time",
2727
{
2828
title: "Get Time",
@@ -38,7 +38,7 @@ function createServer(): McpServer {
3838
},
3939
);
4040

41-
server.registerResource(
41+
registerAppResource(server,
4242
RESOURCE_URI,
4343
RESOURCE_URI,
4444
{ mimeType: RESOURCE_MIME_TYPE },

‎examples/basic-server-vanillajs/src/mcp-app.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
/**
22
* @file App that demonstrates a few features using MCP Apps SDK with vanilla JS.
33
*/
4-
import { App, PostMessageTransport } from "@modelcontextprotocol/ext-apps";
4+
import { App } from "@modelcontextprotocol/ext-apps";
55
import type { CallToolResult } from "@modelcontextprotocol/sdk/types.js";
66
import "./global.css";
77
import "./mcp-app.css";
@@ -98,4 +98,4 @@ openLinkBtn.addEventListener("click", async () => {
9898

9999

100100
// Connect to host
101-
app.connect(new PostMessageTransport(window.parent));
101+
app.connect();

‎examples/budget-allocator-server/server.ts‎

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,10 @@ import type {
1313
import fs from "node:fs/promises";
1414
import path from "node:path";
1515
import { z } from "zod";
16-
import { RESOURCE_MIME_TYPE, RESOURCE_URI_META_KEY } from "../../dist/src/app";
16+
import {
17+
RESOURCE_MIME_TYPE,
18+
RESOURCE_URI_META_KEY,
19+
} from "@modelcontextprotocol/ext-apps/server";
1720
import { startServer } from "../shared/server-utils.js";
1821

1922
const DIST_DIR = path.join(import.meta.dirname, "dist");
@@ -235,7 +238,8 @@ function createServer(): McpServer {
235238
version: "1.0.0",
236239
});
237240

238-
server.registerTool(
241+
registerAppTool(
242+
server,
239243
"get-budget-data",
240244
{
241245
title: "Get Budget Data",
@@ -277,7 +281,8 @@ function createServer(): McpServer {
277281
},
278282
);
279283

280-
server.registerResource(
284+
registerAppResource(
285+
server,
281286
resourceUri,
282287
resourceUri,
283288
{

‎examples/cohort-heatmap-server/server.ts‎

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,10 @@ import type { ReadResourceResult } from "@modelcontextprotocol/sdk/types.js";
44
import fs from "node:fs/promises";
55
import path from "node:path";
66
import { z } from "zod";
7-
import { RESOURCE_MIME_TYPE, RESOURCE_URI_META_KEY } from "../../dist/src/app";
7+
import {
8+
RESOURCE_MIME_TYPE,
9+
RESOURCE_URI_META_KEY,
10+
} from "@modelcontextprotocol/ext-apps/server";
811
import { startServer } from "../shared/server-utils.js";
912

1013
const DIST_DIR = path.join(import.meta.dirname, "dist");
@@ -156,7 +159,8 @@ function createServer(): McpServer {
156159
// Register tool and resource
157160
const resourceUri = "ui://get-cohort-data/mcp-app.html";
158161

159-
server.registerTool(
162+
registerAppTool(
163+
server,
160164
"get-cohort-data",
161165
{
162166
title: "Get Cohort Retention Data",
@@ -179,7 +183,8 @@ function createServer(): McpServer {
179183
},
180184
);
181185

182-
server.registerResource(
186+
registerAppResource(
187+
server,
183188
resourceUri,
184189
resourceUri,
185190
{ mimeType: RESOURCE_MIME_TYPE },

‎examples/customer-segmentation-server/server.ts‎

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,10 @@ import type {
77
import fs from "node:fs/promises";
88
import path from "node:path";
99
import { z } from "zod";
10-
import { RESOURCE_MIME_TYPE, RESOURCE_URI_META_KEY } from "../../dist/src/app";
10+
import {
11+
RESOURCE_MIME_TYPE,
12+
RESOURCE_URI_META_KEY,
13+
} from "@modelcontextprotocol/ext-apps/server";
1114
import { startServer } from "../shared/server-utils.js";
1215
import {
1316
generateCustomers,
@@ -65,7 +68,8 @@ function createServer(): McpServer {
6568
{
6669
const resourceUri = "ui://customer-segmentation/mcp-app.html";
6770

68-
server.registerTool(
71+
registerAppTool(
72+
server,
6973
"get-customer-data",
7074
{
7175
title: "Get Customer Data",
@@ -83,7 +87,8 @@ function createServer(): McpServer {
8387
},
8488
);
8589

86-
server.registerResource(
90+
registerAppResource(
91+
server,
8792
resourceUri,
8893
resourceUri,
8994
{

‎examples/scenario-modeler-server/server.ts‎

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,10 @@ import type {
77
import fs from "node:fs/promises";
88
import path from "node:path";
99
import { z } from "zod";
10-
import { RESOURCE_MIME_TYPE, RESOURCE_URI_META_KEY } from "../../dist/src/app";
10+
import {
11+
RESOURCE_MIME_TYPE,
12+
RESOURCE_URI_META_KEY,
13+
} from "@modelcontextprotocol/ext-apps/server";
1114
import { startServer } from "../shared/server-utils.js";
1215

1316
const DIST_DIR = path.join(import.meta.dirname, "dist");
@@ -256,7 +259,8 @@ function createServer(): McpServer {
256259
{
257260
const resourceUri = "ui://scenario-modeler/mcp-app.html";
258261

259-
server.registerTool(
262+
registerAppTool(
263+
server,
260264
"get-scenario-data",
261265
{
262266
title: "Get Scenario Data",
@@ -288,7 +292,8 @@ function createServer(): McpServer {
288292
},
289293
);
290294

291-
server.registerResource(
295+
registerAppResource(
296+
server,
292297
resourceUri,
293298
resourceUri,
294299
{ mimeType: RESOURCE_MIME_TYPE, description: "SaaS Scenario Modeler UI" },

‎examples/system-monitor-server/server.ts‎

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,10 @@ import os from "node:os";
99
import path from "node:path";
1010
import si from "systeminformation";
1111
import { z } from "zod";
12-
import { RESOURCE_MIME_TYPE, RESOURCE_URI_META_KEY } from "../../dist/src/app";
12+
import {
13+
RESOURCE_MIME_TYPE,
14+
RESOURCE_URI_META_KEY,
15+
} from "@modelcontextprotocol/ext-apps/server";
1316
import { startServer } from "../shared/server-utils.js";
1417

1518
// Schemas - types are derived from these using z.infer
@@ -111,7 +114,8 @@ function createServer(): McpServer {
111114
// Register the get-system-stats tool and its associated UI resource
112115
const resourceUri = "ui://system-monitor/mcp-app.html";
113116

114-
server.registerTool(
117+
registerAppTool(
118+
server,
115119
"get-system-stats",
116120
{
117121
title: "Get System Stats",
@@ -149,7 +153,8 @@ function createServer(): McpServer {
149153
},
150154
);
151155

152-
server.registerResource(
156+
registerAppResource(
157+
server,
153158
resourceUri,
154159
resourceUri,
155160
{ mimeType: RESOURCE_MIME_TYPE, description: "System Monitor UI" },

‎examples/threejs-server/server.ts‎

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,10 @@ import type { ReadResourceResult } from "@modelcontextprotocol/sdk/types.js";
99
import fs from "node:fs/promises";
1010
import path from "node:path";
1111
import { z } from "zod";
12-
import { RESOURCE_MIME_TYPE, RESOURCE_URI_META_KEY } from "../../dist/src/app";
12+
import {
13+
RESOURCE_MIME_TYPE,
14+
RESOURCE_URI_META_KEY,
15+
} from "@modelcontextprotocol/ext-apps/server";
1316
import { startServer } from "../shared/server-utils.js";
1417

1518
const DIST_DIR = path.join(import.meta.dirname, "dist");
@@ -142,7 +145,8 @@ function createServer(): McpServer {
142145
});
143146

144147
// Tool 1: show_threejs_scene
145-
server.registerTool(
148+
registerAppTool(
149+
server,
146150
"show_threejs_scene",
147151
{
148152
title: "Show Three.js Scene",
@@ -175,7 +179,8 @@ function createServer(): McpServer {
175179
);
176180

177181
// Tool 2: learn_threejs
178-
server.registerTool(
182+
registerAppTool(
183+
server,
179184
"learn_threejs",
180185
{
181186
title: "Learn Three.js",
@@ -191,7 +196,8 @@ function createServer(): McpServer {
191196
);
192197

193198
// Resource registration
194-
server.registerResource(
199+
registerAppResource(
200+
server,
195201
resourceUri,
196202
resourceUri,
197203
{ mimeType: RESOURCE_MIME_TYPE, description: "Three.js Widget UI" },

‎examples/wiki-explorer-server/server.ts‎

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,10 @@ import * as cheerio from "cheerio";
88
import fs from "node:fs/promises";
99
import path from "node:path";
1010
import { z } from "zod";
11-
import { RESOURCE_MIME_TYPE, RESOURCE_URI_META_KEY } from "../../dist/src/app";
11+
import {
12+
RESOURCE_MIME_TYPE,
13+
RESOURCE_URI_META_KEY,
14+
} from "@modelcontextprotocol/ext-apps/server";
1215
import { startServer } from "../shared/server-utils.js";
1316

1417
const DIST_DIR = path.join(import.meta.dirname, "dist");
@@ -76,7 +79,8 @@ function createServer(): McpServer {
7679
// Register the get-first-degree-links tool and its associated UI resource
7780
const resourceUri = "ui://wiki-explorer/mcp-app.html";
7881

79-
server.registerTool(
82+
registerAppTool(
83+
server,
8084
"get-first-degree-links",
8185
{
8286
title: "Get First-Degree Links",
@@ -124,7 +128,8 @@ function createServer(): McpServer {
124128
},
125129
);
126130

127-
server.registerResource(
131+
registerAppResource(
132+
server,
128133
resourceUri,
129134
resourceUri,
130135
{ mimeType: RESOURCE_MIME_TYPE },

0 commit comments

Comments
 (0)