Skip to content

Commit e09b5e6

Browse files
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>
1 parent 6278542 commit e09b5e6

File tree

12 files changed

+648
-0
lines changed

12 files changed

+648
-0
lines changed

README.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -52,6 +52,7 @@ Start with these foundational examples to learn the SDK:
5252
- [`examples/basic-server-vue`](https://github.com/modelcontextprotocol/ext-apps/tree/main/examples/basic-server-vue) — MCP server + MCP App using Vue
5353
- [`examples/basic-server-svelte`](https://github.com/modelcontextprotocol/ext-apps/tree/main/examples/basic-server-svelte) — MCP server + MCP App using Svelte
5454
- [`examples/basic-server-preact`](https://github.com/modelcontextprotocol/ext-apps/tree/main/examples/basic-server-preact) — MCP server + MCP App using Preact
55+
- [`examples/basic-server-solid`](https://github.com/modelcontextprotocol/ext-apps/tree/main/examples/basic-server-solid) — MCP server + MCP App using Solid
5556
- [`examples/basic-host`](https://github.com/modelcontextprotocol/ext-apps/tree/main/examples/basic-host) — MCP host application supporting MCP Apps
5657

5758
The [`examples/`](https://github.com/modelcontextprotocol/ext-apps/tree/main/examples) directory contains additional demo apps showcasing real-world use cases.
Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
# Example: Basic Server (Solid)
2+
3+
An MCP App example with a Solid 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+
- Solid 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), [`sendOpenLink`](https://modelcontextprotocol.github.io/ext-apps/api/classes/app.App.html#sendopenlink)
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) - Solid 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: 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: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
{
2+
"name": "basic-server-solid",
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+
"solid-js": "^1.9.0",
17+
"zod": "^3.25.0"
18+
},
19+
"devDependencies": {
20+
"@types/cors": "^2.8.19",
21+
"@types/express": "^5.0.0",
22+
"@types/node": "^22.0.0",
23+
"bun": "^1.3.2",
24+
"concurrently": "^9.2.1",
25+
"cors": "^2.8.5",
26+
"express": "^5.1.0",
27+
"typescript": "^5.9.3",
28+
"vite": "^6.0.0",
29+
"vite-plugin-singlefile": "^2.3.0",
30+
"vite-plugin-solid": "^2.0.0"
31+
}
32+
}
Lines changed: 105 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,105 @@
1+
import { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js";
2+
import { StreamableHTTPServerTransport } from "@modelcontextprotocol/sdk/server/streamableHttp.js";
3+
import type { CallToolResult, ReadResourceResult } from "@modelcontextprotocol/sdk/types.js";
4+
import cors from "cors";
5+
import express, { type Request, type Response } from "express";
6+
import fs from "node:fs/promises";
7+
import path from "node:path";
8+
import { RESOURCE_MIME_TYPE, RESOURCE_URI_META_KEY } from "../../dist/src/app";
9+
10+
const PORT = process.env.PORT ? parseInt(process.env.PORT, 10) : 3001;
11+
const DIST_DIR = path.join(import.meta.dirname, "dist");
12+
13+
14+
const server = new McpServer({
15+
name: "Basic MCP App Server (Solid)",
16+
version: "1.0.0",
17+
});
18+
19+
20+
// MCP Apps require two-part registration: a tool (what the LLM calls) and a
21+
// resource (the UI it renders). The `_meta` field on the tool links to the
22+
// resource URI, telling hosts which UI to display when the tool executes.
23+
{
24+
const resourceUri = "ui://get-time/mcp-app.html";
25+
26+
server.registerTool(
27+
"get-time",
28+
{
29+
title: "Get Time",
30+
description: "Returns the current server time as an ISO 8601 string.",
31+
inputSchema: {},
32+
_meta: { [RESOURCE_URI_META_KEY]: resourceUri },
33+
},
34+
async (): Promise<CallToolResult> => {
35+
const time = new Date().toISOString();
36+
return {
37+
content: [{ type: "text", text: JSON.stringify({ time }) }],
38+
};
39+
},
40+
);
41+
42+
server.registerResource(
43+
resourceUri,
44+
resourceUri,
45+
{},
46+
async (): Promise<ReadResourceResult> => {
47+
const html = await fs.readFile(path.join(DIST_DIR, "mcp-app.html"), "utf-8");
48+
49+
return {
50+
contents: [
51+
// Per the MCP App specification, "text/html;profile=mcp-app" signals
52+
// to the Host that this resource is indeed for an MCP App UI.
53+
{ uri: resourceUri, mimeType: RESOURCE_MIME_TYPE, text: html },
54+
],
55+
};
56+
},
57+
);
58+
}
59+
60+
61+
const app = express();
62+
app.use(cors());
63+
app.use(express.json());
64+
65+
app.post("/mcp", async (req: Request, res: Response) => {
66+
try {
67+
const transport = new StreamableHTTPServerTransport({
68+
sessionIdGenerator: undefined,
69+
enableJsonResponse: true,
70+
});
71+
res.on("close", () => { transport.close(); });
72+
73+
await server.connect(transport);
74+
75+
await transport.handleRequest(req, res, req.body);
76+
} catch (error) {
77+
console.error("Error handling MCP request:", error);
78+
if (!res.headersSent) {
79+
res.status(500).json({
80+
jsonrpc: "2.0",
81+
error: { code: -32603, message: "Internal server error" },
82+
id: null,
83+
});
84+
}
85+
}
86+
});
87+
88+
const httpServer = app.listen(PORT, (err) => {
89+
if (err) {
90+
console.error("Error starting server:", err);
91+
process.exit(1);
92+
}
93+
console.log(`Server listening on http://localhost:${PORT}/mcp`);
94+
});
95+
96+
function shutdown() {
97+
console.log("\nShutting down...");
98+
httpServer.close(() => {
99+
console.log("Server closed");
100+
process.exit(0);
101+
});
102+
}
103+
104+
process.on("SIGINT", shutdown);
105+
process.on("SIGTERM", shutdown);
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: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
.main {
2+
--color-primary: #2563eb;
3+
--color-primary-hover: #1d4ed8;
4+
--color-notice-bg: #eff6ff;
5+
6+
min-width: 425px;
7+
8+
> * {
9+
margin-top: 0;
10+
margin-bottom: 0;
11+
}
12+
13+
> * + * {
14+
margin-top: 1.5rem;
15+
}
16+
}
17+
18+
.action {
19+
> * {
20+
margin-top: 0;
21+
margin-bottom: 0;
22+
width: 100%;
23+
}
24+
25+
> * + * {
26+
margin-top: 0.5rem;
27+
}
28+
29+
/* Consistent font for form inputs (inherits from global.css) */
30+
textarea,
31+
input {
32+
font-family: inherit;
33+
font-size: inherit;
34+
}
35+
36+
button {
37+
padding: 0.5rem 1rem;
38+
border: none;
39+
border-radius: 6px;
40+
color: white;
41+
font-weight: bold;
42+
background-color: var(--color-primary);
43+
cursor: pointer;
44+
45+
&:hover,
46+
&:focus-visible {
47+
background-color: var(--color-primary-hover);
48+
}
49+
}
50+
}
51+
52+
.notice {
53+
padding: 0.5rem 0.75rem;
54+
color: var(--color-primary);
55+
text-align: center;
56+
font-style: italic;
57+
background-color: var(--color-notice-bg);
58+
59+
&::before {
60+
content: "ℹ️ ";
61+
font-style: normal;
62+
}
63+
}

0 commit comments

Comments
 (0)