MCP Server Demo

This demonstrates a Model Context Protocol server implementation with SSE transport on Val Town.

\n \n

\n \n \n {connected && (\n

Session ID: {sessionId || 'Waiting for session...'}

\n \n \n

\n )}\n

\n \n

Server Logs

\n {logs.map((log, index) => (\n

\n {new Date(log.timestamp).toLocaleTimeString()}\n {log.message}\n

\n ))}\n

\n \n

\n \n View Source\n \n

\n );\n}\n\n// Client-side initialization\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n}\n\nif (typeof document !== \"undefined\") { client(); }\n\n// Server-side code\nexport default async function server(request: Request): Promise {\n const { pathname } = new URL(request.url);\n const { sqlite } = await import(\"https://esm.town/v/stevekrouse/sqlite\");\n const KEY = \"mcp_sse_server\";\n \n // Initialize logs table\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS ${KEY}_logs (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n timestamp TEXT NOT NULL,\n message TEXT NOT NULL\n )\n `);\n \n // Function to add a log entry\n async function addLog(message: string) {\n await sqlite.execute(\n `INSERT INTO ${KEY}_logs (timestamp, message) VALUES (?, ?)`,\n [new Date().toISOString(), message]\n );\n }\n \n // Function to get recent logs\n async function getLogs() {\n return (await sqlite.execute(\n `SELECT timestamp, message FROM ${KEY}_logs ORDER BY id DESC LIMIT 50`\n )).rows;\n }\n \n // Handle different routes\n if (pathname === '/logs') {\n // Return recent logs\n return new Response(JSON.stringify(await getLogs()), {\n headers: { 'Content-Type': 'application/json' }\n });\n }\n \n // Static transports lookup (not production-ready, but works for demo)\n // In production, you'd use a more robust session management system\n const transports: { [sessionId: string]: SSEServerTransport } = {};\n \n if (pathname === '/sse') {\n // Set up SSE endpoint\n const headers = new Headers({\n 'Content-Type': 'text/event-stream',\n 'Cache-Control': 'no-cache',\n 'Connection': 'keep-alive',\n });\n \n const stream = new TransformStream();\n const writer = stream.writable.getWriter();\n \n // Create an MCP server instance\n const server = new McpServer({\n name: \"ValTown MCP Demo\",\n version: \"1.0.0\"\n });\n \n // Add calculator tool\n server.tool(\"add\",\n { a: z.number(), b: z.number() },\n async ({ a, b }) => {\n await addLog(`Tool 'add' called with a=${a}, b=${b}`);\n return {\n content: [{ type: \"text\", text: `${a} + ${b} = ${a + b}` }]\n };\n }\n );\n \n // Add greeting resource\n server.resource(\n \"greeting\",\n new ResourceTemplate(\"greeting://{name}\", { list: undefined }),\n async (uri, { name }) => {\n await addLog(`Resource 'greeting' accessed with name=${name}`);\n return {\n contents: [{\n uri: uri.href,\n text: `Hello, ${name}! Welcome to MCP on Val Town.`\n }]\n };\n }\n );\n \n // Create SSE transport\n const transport = new SSEServerTransport('/messages', {\n write: async (data) => {\n try {\n // Send data through SSE stream\n await writer.write(`data: ${JSON.stringify(data)}\\n\\n`);\n await addLog(`Sent message to client: ${JSON.stringify(data).substring(0, 100)}...`);\n } catch (error) {\n console.error('Error writing to SSE stream:', error);\n }\n },\n close: async () => {\n try {\n await writer.close();\n delete transports[transport.sessionId];\n await addLog(`Closed SSE connection for session ${transport.sessionId}`);\n } catch (error) {\n console.error('Error closing SSE stream:', error);\n }\n },\n sessionId: crypto.randomUUID(),\n });\n \n // Send initial message with session ID\n await writer.write(`data: ${JSON.stringify({ sessionId: transport.sessionId })}\\n\\n`);\n \n // Store transport for message handling\n transports[transport.sessionId] = transport;\n \n // Connect server to transport\n await addLog(`New SSE connection established with session ID ${transport.sessionId}`);\n await server.connect(transport);\n \n return new Response(stream.readable, { headers });\n }\n \n if (pathname === '/messages' && request.method === 'POST') {\n // Handle incoming MCP messages\n const sessionId = new URL(request.url).searchParams.get('sessionId');\n if (!sessionId || !transports[sessionId]) {\n return new Response(JSON.stringify({ error: 'Invalid or missing session ID' }), {\n status: 400,\n headers: { 'Content-Type': 'application/json' }\n });\n }\n \n const transport = transports[sessionId];\n const body = await request.json();\n \n await addLog(`Received message from client: ${JSON.stringify(body).substring(0, 100)}...`);\n \n // Forward message to the MCP server\n const result = await transport.receiveMessage(body);\n return new Response(JSON.stringify(result), {\n headers: { 'Content-Type': 'application/json' }\n });\n }\n \n // Default: render HTML page\n return new Response(`\n \n \n MCP Server Demo\n \n \n \n

\n \n \n \n \n `,\n {\n headers: {\n \"content-type\": \"text/html\",\n },\n });\n}\n\nconst css = `\nbody {\n font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n margin: 0;\n padding: 0;\n background-color: #f5f5f5;\n color: #333;\n line-height: 1.6;\n}\n\n.container {\n max-width: 800px;\n margin: 0 auto;\n padding: 20px;\n}\n\nh1 {\n color: #2c3e50;\n margin-bottom: 10px;\n}\n\nh2 {\n color: #3498db;\n font-size: 1.3rem;\n margin-top: 20px;\n margin-bottom: 10px;\n}\n\nbutton {\n background-color: #3498db;\n color: white;\n border: none;\n padding: 8px 16px;\n margin-right: 10px;\n margin-bottom: 10px;\n border-radius: 4px;\n cursor: pointer;\n font-size: 14px;\n transition: background-color 0.2s;\n}\n\nbutton:hover {\n background-color: #2980b9;\n}\n\nbutton:disabled {\n background-color: #95a5a6;\n cursor: not-allowed;\n}\n\n.controls {\n background-color: #ecf0f1;\n padding: 15px;\n border-radius: 5px;\n margin-bottom: 20px;\n}\n\n.actions {\n margin-top: 15px;\n padding-top: 15px;\n border-top: 1px solid #bdc3c7;\n}\n\n.logs {\n background-color: #2c3e50;\n color: #ecf0f1;\n padding: 15px;\n border-radius: 5px;\n max-height: 300px;\n overflow-y: auto;\n}\n\n.log-container {\n font-family: monospace;\n font-size: 13px;\n}\n\n.log-entry {\n padding: 4px 0;\n border-bottom: 1px solid #34495e;\n}\n\n.timestamp {\n color: #e74c3c;\n margin-right: 10px;\n}\n\n.footer {\n margin-top: 30px;\n text-align: center;\n font-size: 14px;\n color: #7f8c8d;\n}\n\n.footer a {\n color: #3498db;\n text-decoration: none;\n}\n\n.footer a:hover {\n text-decoration: underline;\n}\n`;\n","deleted","label",[98],"permalink","https://www.val.town/x/dcm31/mcp_sse_server/code/main.tsx","extension","actionData","errors"]