|
| 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 { z } from "zod"; |
| 9 | +import { RESOURCE_URI_META_KEY } from "../../dist/src/app"; |
| 10 | + |
| 11 | +const PORT = process.env.PORT ? parseInt(process.env.PORT, 10) : 3001; |
| 12 | +const DIST_DIR = path.join(import.meta.dirname, "dist"); |
| 13 | + |
| 14 | + |
| 15 | +const server = new McpServer({ |
| 16 | + name: "MCP App Server", |
| 17 | + version: "1.0.0", |
| 18 | +}); |
| 19 | + |
| 20 | + |
| 21 | +// MCP Apps require two-part registration: a tool (what the LLM calls) and a |
| 22 | +// resource (the UI it renders). The `_meta` field on the tool links to the |
| 23 | +// resource URI, telling hosts which UI to display when the tool executes. |
| 24 | +{ |
| 25 | + const resourceUri = "ui://get-time/mcp-app.html"; |
| 26 | + |
| 27 | + server.registerTool( |
| 28 | + "get-time", |
| 29 | + { |
| 30 | + title: "Get Time", |
| 31 | + description: "Returns the current server time as an ISO 8601 string.", |
| 32 | + inputSchema: {}, |
| 33 | + outputSchema: { time: z.string() }, |
| 34 | + _meta: { [RESOURCE_URI_META_KEY]: resourceUri }, |
| 35 | + }, |
| 36 | + async (): Promise<CallToolResult> => { |
| 37 | + const time = new Date().toISOString(); |
| 38 | + return { |
| 39 | + content: [{ type: "text", text: time }], |
| 40 | + structuredContent: { time }, |
| 41 | + }; |
| 42 | + }, |
| 43 | + ); |
| 44 | + |
| 45 | + server.registerResource( |
| 46 | + resourceUri, |
| 47 | + resourceUri, |
| 48 | + {}, |
| 49 | + async (): Promise<ReadResourceResult> => { |
| 50 | + const html = await fs.readFile(path.join(DIST_DIR, "mcp-app.html"), "utf-8"); |
| 51 | + |
| 52 | + return { |
| 53 | + contents: [ |
| 54 | + // Per the MCP App specification, "text/html+mcp" signals to the Host |
| 55 | + // that this resource is indeed for an MCP App UI. |
| 56 | + { uri: resourceUri, mimeType: "text/html+mcp", text: html }, |
| 57 | + ], |
| 58 | + }; |
| 59 | + }, |
| 60 | + ); |
| 61 | +} |
| 62 | + |
| 63 | + |
| 64 | +const app = express(); |
| 65 | +app.use(cors()); |
| 66 | +app.use(express.json()); |
| 67 | + |
| 68 | +app.post("/mcp", async (req: Request, res: Response) => { |
| 69 | + try { |
| 70 | + const transport = new StreamableHTTPServerTransport({ |
| 71 | + sessionIdGenerator: undefined, |
| 72 | + enableJsonResponse: true, |
| 73 | + }); |
| 74 | + res.on("close", () => { transport.close(); }); |
| 75 | + |
| 76 | + await server.connect(transport); |
| 77 | + |
| 78 | + await transport.handleRequest(req, res, req.body); |
| 79 | + } catch (error) { |
| 80 | + console.error("Error handling MCP request:", error); |
| 81 | + if (!res.headersSent) { |
| 82 | + res.status(500).json({ |
| 83 | + jsonrpc: "2.0", |
| 84 | + error: { code: -32603, message: "Internal server error" }, |
| 85 | + id: null, |
| 86 | + }); |
| 87 | + } |
| 88 | + } |
| 89 | +}); |
| 90 | + |
| 91 | +const httpServer = app.listen(PORT, () => { |
| 92 | + console.log(`Server listening on http://localhost:${PORT}/mcp`); |
| 93 | +}); |
| 94 | + |
| 95 | +function shutdown() { |
| 96 | + console.log("\nShutting down..."); |
| 97 | + httpServer.close(() => { |
| 98 | + console.log("Server closed"); |
| 99 | + process.exit(0); |
| 100 | + }); |
| 101 | +} |
| 102 | + |
| 103 | +process.on("SIGINT", shutdown); |
| 104 | +process.on("SIGTERM", shutdown); |
0 commit comments