|
| 1 | +import express from 'express'; |
| 2 | +import cors from 'cors'; |
| 3 | +import { McpServer } from '@modelcontextprotocol/sdk/server/mcp.js'; |
| 4 | +import { StreamableHTTPServerTransport } from '@modelcontextprotocol/sdk/server/streamableHttp.js'; |
| 5 | +import { isInitializeRequest } from '@modelcontextprotocol/sdk/types.js'; |
| 6 | +import { createUIResource } from '@mcp-ui/server'; |
| 7 | +import { randomUUID } from 'crypto'; |
| 8 | + |
| 9 | +const app = express(); |
| 10 | +const port = 3000; |
| 11 | + |
| 12 | +app.use(cors({ |
| 13 | + origin: '*', |
| 14 | + exposedHeaders: ['Mcp-Session-Id'], |
| 15 | + allowedHeaders: ['Content-Type', 'mcp-session-id'], |
| 16 | +})); |
| 17 | +app.use(express.json()); |
| 18 | + |
| 19 | +// Map to store transports by session ID, as shown in the documentation. |
| 20 | +const transports: { [sessionId: string]: StreamableHTTPServerTransport } = {}; |
| 21 | + |
| 22 | +// Handle POST requests for client-to-server communication. |
| 23 | +app.post('/mcp', async (req, res) => { |
| 24 | + const sessionId = req.headers['mcp-session-id'] as string | undefined; |
| 25 | + let transport: StreamableHTTPServerTransport; |
| 26 | + |
| 27 | + if (sessionId && transports[sessionId]) { |
| 28 | + // A session already exists; reuse the existing transport. |
| 29 | + transport = transports[sessionId]; |
| 30 | + } else if (!sessionId && isInitializeRequest(req.body)) { |
| 31 | + // This is a new initialization request. Create a new transport. |
| 32 | + transport = new StreamableHTTPServerTransport({ |
| 33 | + sessionIdGenerator: () => randomUUID(), |
| 34 | + onsessioninitialized: (sid) => { |
| 35 | + transports[sid] = transport; |
| 36 | + console.log(`MCP Session initialized: ${sid}`); |
| 37 | + }, |
| 38 | + }); |
| 39 | + |
| 40 | + // Clean up the transport from our map when the session closes. |
| 41 | + transport.onclose = () => { |
| 42 | + if (transport.sessionId) { |
| 43 | + console.log(`MCP Session closed: ${transport.sessionId}`); |
| 44 | + delete transports[transport.sessionId]; |
| 45 | + } |
| 46 | + }; |
| 47 | + |
| 48 | + // Create a new server instance for this specific session. |
| 49 | + const server = new McpServer({ |
| 50 | + name: "typescript-server-demo", |
| 51 | + version: "1.0.0" |
| 52 | + }); |
| 53 | + |
| 54 | + // Register our tool on the new server instance. |
| 55 | + server.registerTool('greet', { |
| 56 | + title: 'Greet', |
| 57 | + description: 'Creates a UI resource displaying an external URL (example.com).', inputSchema: {}, |
| 58 | + }, async () => { |
| 59 | + // Create the UI resource to be returned to the client |
| 60 | + // This is the only MCP-UI specific code in this example |
| 61 | + const uiResource = createUIResource({ |
| 62 | + uri: 'ui://greeting', |
| 63 | + content: { type: 'externalUrl', iframeUrl: 'https://example.com' }, |
| 64 | + encoding: 'text', |
| 65 | + }); |
| 66 | + |
| 67 | + return { |
| 68 | + content: [uiResource], |
| 69 | + }; |
| 70 | + }); |
| 71 | + |
| 72 | + // Connect the server instance to the transport for this session. |
| 73 | + await server.connect(transport); |
| 74 | + } else { |
| 75 | + return res.status(400).json({ |
| 76 | + error: { message: 'Bad Request: No valid session ID provided' }, |
| 77 | + }); |
| 78 | + } |
| 79 | + |
| 80 | + // Handle the client's request using the session's transport. |
| 81 | + await transport.handleRequest(req, res, req.body); |
| 82 | +}); |
| 83 | + |
| 84 | +// A separate, reusable handler for GET and DELETE requests. |
| 85 | +const handleSessionRequest = async (req: express.Request, res: express.Response) => { |
| 86 | + const sessionId = req.headers['mcp-session-id'] as string | undefined; |
| 87 | + console.log('sessionId', sessionId); |
| 88 | + if (!sessionId || !transports[sessionId]) { |
| 89 | + return res.status(404).send('Session not found'); |
| 90 | + } |
| 91 | + |
| 92 | + const transport = transports[sessionId]; |
| 93 | + await transport.handleRequest(req, res); |
| 94 | +}; |
| 95 | + |
| 96 | +// GET handles the long-lived stream for server-to-client messages. |
| 97 | +app.get('/mcp', handleSessionRequest); |
| 98 | + |
| 99 | +// DELETE handles explicit session termination from the client. |
| 100 | +app.delete('/mcp', handleSessionRequest); |
| 101 | + |
| 102 | +app.listen(port, () => { |
| 103 | + console.log(`TypeScript MCP server listening at http://localhost:${port}`); |
| 104 | +}); |
0 commit comments