Skip to content

Commit 18d0b35

Browse files
Add integration-server example for E2E testing
Add dedicated `integration-server` example (duplicated from `basic-server-react`) to preserve E2E testing capabilities while allowing `basic-server-react` to be simplified as a minimal example. Changes: - Add `examples/integration-server` exercising SDK communication APIs - Update E2E tests to use `integration-server` instead of `basic-server-react` and `basic-server-vanillajs` - Use server name labels instead of indices for more robust test selection - Remove `basic-react.png` and `basic-vanillajs.png` golden snapshots 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
1 parent 6f14cf3 commit 18d0b35

File tree

15 files changed

+553
-62
lines changed

15 files changed

+553
-62
lines changed
Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
# Example: Integration Test Server
2+
3+
An MCP App example used for E2E integration testing.
4+
5+
## Overview
6+
7+
This example demonstrates all App SDK communication APIs and is used by the E2E test suite to verify host-app interactions:
8+
9+
- Tool registration with a linked UI resource
10+
- React UI using the [`useApp()`](https://modelcontextprotocol.github.io/ext-apps/api/functions/_modelcontextprotocol_ext-apps_react.useApp.html) hook
11+
- App communication APIs: [`callServerTool`](https://modelcontextprotocol.github.io/ext-apps/api/classes/app.App.html#callservertool), [`sendMessage`](https://modelcontextprotocol.github.io/ext-apps/api/classes/app.App.html#sendmessage), [`sendLog`](https://modelcontextprotocol.github.io/ext-apps/api/classes/app.App.html#sendlog), [`sendOpenLink`](https://modelcontextprotocol.github.io/ext-apps/api/classes/app.App.html#sendopenlink)
12+
13+
## Key Files
14+
15+
- [`server.ts`](server.ts) - MCP server with tool and resource registration
16+
- [`mcp-app.html`](mcp-app.html) / [`src/mcp-app.tsx`](src/mcp-app.tsx) - React UI using `useApp()` hook
17+
18+
## Getting Started
19+
20+
```bash
21+
npm install
22+
npm run dev
23+
```
24+
25+
## How It Works
26+
27+
1. The server registers a `get-time` tool with metadata linking it to a UI HTML resource (`ui://get-time/mcp-app.html`).
28+
2. When the tool is invoked, the Host renders the UI from the resource.
29+
3. The UI uses the MCP App SDK API to communicate with the host and call server tools.
Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Get Time App</title>
7+
<link rel="stylesheet" href="/src/global.css">
8+
</head>
9+
<body>
10+
<div id="root"></div>
11+
<script type="module" src="/src/mcp-app.tsx"></script>
12+
</body>
13+
</html>
Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
{
2+
"name": "integration-server",
3+
"version": "1.0.0",
4+
"private": true,
5+
"type": "module",
6+
"scripts": {
7+
"build": "INPUT=mcp-app.html vite build",
8+
"watch": "INPUT=mcp-app.html vite build --watch",
9+
"serve": "bun server.ts",
10+
"start": "NODE_ENV=development npm run build && npm run serve",
11+
"dev": "NODE_ENV=development concurrently 'npm run watch' 'npm run serve'"
12+
},
13+
"dependencies": {
14+
"@modelcontextprotocol/ext-apps": "../..",
15+
"@modelcontextprotocol/sdk": "^1.22.0",
16+
"react": "^19.2.0",
17+
"react-dom": "^19.2.0",
18+
"zod": "^4.1.13"
19+
},
20+
"devDependencies": {
21+
"@types/cors": "^2.8.19",
22+
"@types/express": "^5.0.0",
23+
"@types/node": "^22.0.0",
24+
"@types/react": "^19.2.2",
25+
"@types/react-dom": "^19.2.2",
26+
"@vitejs/plugin-react": "^4.3.4",
27+
"bun": "^1.3.2",
28+
"concurrently": "^9.2.1",
29+
"cors": "^2.8.5",
30+
"express": "^5.1.0",
31+
"typescript": "^5.9.3",
32+
"vite": "^6.0.0",
33+
"vite-plugin-singlefile": "^2.3.0"
34+
}
35+
}
Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
import { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js";
2+
import { StdioServerTransport } from "@modelcontextprotocol/sdk/server/stdio.js";
3+
import type {
4+
CallToolResult,
5+
ReadResourceResult,
6+
} from "@modelcontextprotocol/sdk/types.js";
7+
import fs from "node:fs/promises";
8+
import path from "node:path";
9+
import { RESOURCE_MIME_TYPE, RESOURCE_URI_META_KEY } from "../../dist/src/app";
10+
import { startServer } from "../shared/server-utils.js";
11+
12+
const DIST_DIR = path.join(import.meta.dirname, "dist");
13+
const RESOURCE_URI = "ui://get-time/mcp-app.html";
14+
15+
/**
16+
* Creates a new MCP server instance with tools and resources registered.
17+
* Each HTTP session needs its own server instance because McpServer only supports one transport.
18+
*/
19+
function createServer(): McpServer {
20+
const server = new McpServer({
21+
name: "Integration Test Server",
22+
version: "1.0.0",
23+
});
24+
25+
// MCP Apps require two-part registration: a tool (what the LLM calls) and a
26+
// resource (the UI it renders). The `_meta` field on the tool links to the
27+
// resource URI, telling hosts which UI to display when the tool executes.
28+
server.registerTool(
29+
"get-time",
30+
{
31+
title: "Get Time",
32+
description: "Returns the current server time as an ISO 8601 string.",
33+
inputSchema: {},
34+
_meta: { [RESOURCE_URI_META_KEY]: RESOURCE_URI },
35+
},
36+
async (): Promise<CallToolResult> => {
37+
const time = new Date().toISOString();
38+
return {
39+
content: [{ type: "text", text: JSON.stringify({ time }) }],
40+
};
41+
},
42+
);
43+
44+
server.registerResource(
45+
RESOURCE_URI,
46+
RESOURCE_URI,
47+
{ mimeType: RESOURCE_MIME_TYPE },
48+
async (): Promise<ReadResourceResult> => {
49+
const html = await fs.readFile(
50+
path.join(DIST_DIR, "mcp-app.html"),
51+
"utf-8",
52+
);
53+
54+
return {
55+
contents: [
56+
// Per the MCP App specification, "text/html;profile=mcp-app" signals
57+
// to the Host that this resource is indeed for an MCP App UI.
58+
{ uri: RESOURCE_URI, mimeType: RESOURCE_MIME_TYPE, text: html },
59+
],
60+
};
61+
},
62+
);
63+
64+
return server;
65+
}
66+
67+
async function main() {
68+
if (process.argv.includes("--stdio")) {
69+
await createServer().connect(new StdioServerTransport());
70+
} else {
71+
const port = parseInt(process.env.PORT ?? "3101", 10);
72+
await startServer(createServer, { port, name: "Integration Test Server" });
73+
}
74+
}
75+
76+
main().catch((e) => {
77+
console.error(e);
78+
process.exit(1);
79+
});
Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
* {
2+
box-sizing: border-box;
3+
}
4+
5+
html, body {
6+
font-family: system-ui, -apple-system, sans-serif;
7+
font-size: 1rem;
8+
}
9+
10+
code {
11+
font-size: 1em;
12+
}
Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
.main {
2+
--color-primary: #2563eb;
3+
--color-primary-hover: #1d4ed8;
4+
--color-notice-bg: #eff6ff;
5+
6+
width: 100%;
7+
max-width: 425px;
8+
box-sizing: border-box;
9+
10+
> * {
11+
margin-top: 0;
12+
margin-bottom: 0;
13+
}
14+
15+
> * + * {
16+
margin-top: 1.5rem;
17+
}
18+
}
19+
20+
.action {
21+
> * {
22+
margin-top: 0;
23+
margin-bottom: 0;
24+
width: 100%;
25+
}
26+
27+
> * + * {
28+
margin-top: 0.5rem;
29+
}
30+
31+
/* Consistent font for form inputs (inherits from global.css) */
32+
textarea,
33+
input {
34+
font-family: inherit;
35+
font-size: inherit;
36+
}
37+
38+
button {
39+
padding: 0.5rem 1rem;
40+
border: none;
41+
border-radius: 6px;
42+
color: white;
43+
font-weight: bold;
44+
background-color: var(--color-primary);
45+
cursor: pointer;
46+
47+
&:hover,
48+
&:focus-visible {
49+
background-color: var(--color-primary-hover);
50+
}
51+
}
52+
}
53+
54+
.notice {
55+
padding: 0.5rem 0.75rem;
56+
color: var(--color-primary);
57+
text-align: center;
58+
font-style: italic;
59+
background-color: var(--color-notice-bg);
60+
61+
&::before {
62+
content: "ℹ️ ";
63+
font-style: normal;
64+
}
65+
}

0 commit comments

Comments
 (0)