Skip to content

Commit 8acec0e

Browse files
Add basic-server-* examples for Vue, Svelte, Preact, and Solid (#141)
* Add basic-server-vue example Demonstrates MCP App SDK usage with Vue 3, providing framework parity alongside the existing React and vanilla JS examples. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com> * Add basic-server-svelte example Demonstrates MCP App SDK usage with Svelte, providing parity with the existing basic-server-react and basic-server-vue examples. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com> * Add basic-server-preact example Demonstrates MCP App SDK usage with Preact, providing another lightweight framework option alongside the existing React, Vue, and Svelte examples. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com> * Add basic-server-solid example Demonstrates MCP App SDK usage with Solid.js, providing another reactive framework option alongside the existing React, Vue, Svelte, and Preact examples. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com> * Add framework GitHub links to README Link each framework name to its official GitHub repo in basic examples list. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com> --------- Co-authored-by: Claude Opus 4.5 <noreply@anthropic.com>
1 parent 79670b4 commit 8acec0e

52 files changed

Lines changed: 3115 additions & 963 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

.prettierignore

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,4 @@
11
examples/basic-host/**/*.ts
22
examples/basic-host/**/*.tsx
3-
examples/basic-server-react/**/*.ts
4-
examples/basic-server-react/**/*.tsx
5-
examples/basic-server-vanillajs/**/*.ts
6-
examples/basic-server-vanillajs/**/*.tsx
3+
examples/basic-server-*/**/*.ts
4+
examples/basic-server-*/**/*.tsx

README.md

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -47,9 +47,13 @@ Or edit your `package.json` manually:
4747

4848
Start with these foundational examples to learn the SDK:
4949

50-
- [`examples/basic-server-vanillajs`](https://github.com/modelcontextprotocol/ext-apps/tree/main/examples/basic-server-vanillajs) — Example MCP server with tools that return UI Apps (vanilla JS)
51-
- [`examples/basic-server-react`](https://github.com/modelcontextprotocol/ext-apps/tree/main/examples/basic-server-react) — Example MCP server with tools that return UI Apps (React)
52-
- [`examples/basic-host`](https://github.com/modelcontextprotocol/ext-apps/tree/main/examples/basic-host) — Bare-bones example of hosting MCP Apps
50+
- [`examples/basic-server-vanillajs`](https://github.com/modelcontextprotocol/ext-apps/tree/main/examples/basic-server-vanillajs) — MCP server + MCP App using vanilla JS
51+
- [`examples/basic-server-react`](https://github.com/modelcontextprotocol/ext-apps/tree/main/examples/basic-server-react) — MCP server + MCP App using [React](https://github.com/facebook/react)
52+
- [`examples/basic-server-vue`](https://github.com/modelcontextprotocol/ext-apps/tree/main/examples/basic-server-vue) — MCP server + MCP App using [Vue](https://github.com/vuejs/vue)
53+
- [`examples/basic-server-svelte`](https://github.com/modelcontextprotocol/ext-apps/tree/main/examples/basic-server-svelte) — MCP server + MCP App using [Svelte](https://github.com/sveltejs/svelte)
54+
- [`examples/basic-server-preact`](https://github.com/modelcontextprotocol/ext-apps/tree/main/examples/basic-server-preact) — MCP server + MCP App using [Preact](https://github.com/preactjs/preact)
55+
- [`examples/basic-server-solid`](https://github.com/modelcontextprotocol/ext-apps/tree/main/examples/basic-server-solid) — MCP server + MCP App using [Solid](https://github.com/solidjs/solid)
56+
- [`examples/basic-host`](https://github.com/modelcontextprotocol/ext-apps/tree/main/examples/basic-host) — MCP host application supporting MCP Apps
5357

5458
The [`examples/`](https://github.com/modelcontextprotocol/ext-apps/tree/main/examples) directory contains additional demo apps showcasing real-world use cases.
5559

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
# Example: Basic Server (Preact)
2+
3+
An MCP App example with a Preact UI.
4+
5+
> [!TIP]
6+
> Looking for a vanilla JavaScript example? See [`basic-server-vanillajs`](https://github.com/modelcontextprotocol/ext-apps/tree/main/examples/basic-server-vanillajs)!
7+
8+
## Overview
9+
10+
- Tool registration with a linked UI resource
11+
- Preact UI using the [`App`](https://modelcontextprotocol.github.io/ext-apps/api/classes/app.App.html) class
12+
- 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), [`openLink`](https://modelcontextprotocol.github.io/ext-apps/api/classes/app.App.html#openlink)
13+
14+
## Key Files
15+
16+
- [`server.ts`](server.ts) - MCP server with tool and resource registration
17+
- [`mcp-app.html`](mcp-app.html) / [`src/mcp-app.tsx`](src/mcp-app.tsx) - Preact UI using `App` class
18+
19+
## Getting Started
20+
21+
```bash
22+
npm install
23+
npm run dev
24+
```
25+
26+
## How It Works
27+
28+
1. The server registers a `get-time` tool with metadata linking it to a UI HTML resource (`ui://get-time/mcp-app.html`).
29+
2. When the tool is invoked, the Host renders the UI from the resource.
30+
3. The UI uses the MCP App SDK API to communicate with the host and call server tools.
Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
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+
<meta name="color-scheme" content="light dark">
7+
<title>Get Time App</title>
8+
<link rel="stylesheet" href="/src/global.css">
9+
</head>
10+
<body>
11+
<div id="root"></div>
12+
<script type="module" src="/src/mcp-app.tsx"></script>
13+
</body>
14+
</html>
Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
{
2+
"name": "basic-server-preact",
3+
"version": "1.0.0",
4+
"private": true,
5+
"type": "module",
6+
"scripts": {
7+
"build": "tsc --noEmit && cross-env INPUT=mcp-app.html vite build",
8+
"watch": "cross-env INPUT=mcp-app.html vite build --watch",
9+
"serve": "bun server.ts",
10+
"start": "cross-env NODE_ENV=development npm run build && npm run serve",
11+
"dev": "cross-env NODE_ENV=development concurrently 'npm run watch' 'npm run serve'"
12+
},
13+
"dependencies": {
14+
"@modelcontextprotocol/ext-apps": "../..",
15+
"@modelcontextprotocol/sdk": "^1.24.0",
16+
"preact": "^10.0.0",
17+
"zod": "^4.1.13"
18+
},
19+
"devDependencies": {
20+
"@preact/preset-vite": "^2.0.0",
21+
"@types/cors": "^2.8.19",
22+
"@types/express": "^5.0.0",
23+
"@types/node": "^22.0.0",
24+
"concurrently": "^9.2.1",
25+
"cors": "^2.8.5",
26+
"cross-env": "^7.0.3",
27+
"express": "^5.1.0",
28+
"typescript": "^5.9.3",
29+
"vite": "^6.0.0",
30+
"vite-plugin-singlefile": "^2.3.0"
31+
}
32+
}
Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
import { registerAppResource, registerAppTool, RESOURCE_MIME_TYPE } from "@modelcontextprotocol/ext-apps/server";
2+
import { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js";
3+
import type { CallToolResult, ReadResourceResult } from "@modelcontextprotocol/sdk/types.js";
4+
import fs from "node:fs/promises";
5+
import path from "node:path";
6+
import { startServer } from "./src/server-utils.js";
7+
8+
const DIST_DIR = path.join(import.meta.dirname, "dist");
9+
10+
/**
11+
* Creates a new MCP server instance with tools and resources registered.
12+
*/
13+
function createServer(): McpServer {
14+
const server = new McpServer({
15+
name: "Basic MCP App Server (Preact)",
16+
version: "1.0.0",
17+
});
18+
19+
// Two-part registration: tool + resource, tied together by the resource URI.
20+
const resourceUri = "ui://get-time/mcp-app.html";
21+
22+
// Register a tool with UI metadata. When the host calls this tool, it reads
23+
// `_meta.ui.resourceUri` to know which resource to fetch and render as an
24+
// interactive UI.
25+
registerAppTool(server,
26+
"get-time",
27+
{
28+
title: "Get Time",
29+
description: "Returns the current server time as an ISO 8601 string.",
30+
inputSchema: {},
31+
_meta: { ui: { resourceUri } },
32+
},
33+
async (): Promise<CallToolResult> => {
34+
const time = new Date().toISOString();
35+
return { content: [{ type: "text", text: time }] };
36+
},
37+
);
38+
39+
// Register the resource, which returns the bundled HTML/JavaScript for the UI.
40+
registerAppResource(server,
41+
resourceUri,
42+
resourceUri,
43+
{ mimeType: RESOURCE_MIME_TYPE },
44+
async (): Promise<ReadResourceResult> => {
45+
const html = await fs.readFile(path.join(DIST_DIR, "mcp-app.html"), "utf-8");
46+
47+
return {
48+
contents: [
49+
{ uri: resourceUri, mimeType: RESOURCE_MIME_TYPE, text: html },
50+
],
51+
};
52+
},
53+
);
54+
55+
return server;
56+
}
57+
58+
startServer(createServer);
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)