fix: adding MCP SSE support to tanchat

Author: jherr

packages/cta-engine/src/create-app.ts

@@ -799,6 +799,6 @@ Use the following commands to start your app:
 % cd ${options.projectName}
 % ${startCommand}
 
-Please read the README.md for more information on testing, styling, adding routes, react-query, etc.${errorStatement}`)
+Please check the README.md for more information on testing, styling, adding routes, react-query, etc.${errorStatement}`)
   }
 }

packages/cta-engine/templates/react/example/tanchat/assets/src/routes/api.messages.ts

@@ -0,0 +1,24 @@
+import { createAPIFileRoute } from "@tanstack/react-start/api";
+import { getEvent } from "vinxi/http";
+
+import { transports } from "@/utils/demo.sse";
+
+export const APIRoute = createAPIFileRoute("/api/messages")({
+  // @ts-ignore
+  POST: async ({ request, params }) => {
+    const body = await request.json();
+    const url = new URL(request.url);
+    const sessionId = url.searchParams.get("sessionId") as string;
+    const transport = transports[sessionId];
+    if (transport) {
+      try {
+        getEvent().node.res.statusCode = 200;
+        await transport.handleMessage(body);
+      } catch (error) {
+        getEvent().node.res.send("Error handling message");
+      }
+    } else {
+      getEvent().node.res.send("No transport found for sessionId");
+    }
+  },
+});

packages/cta-engine/templates/react/example/tanchat/assets/src/routes/api.sse.ts

@@ -0,0 +1,23 @@
+import { createAPIFileRoute } from '@tanstack/react-start/api'
+import { getEvent } from 'vinxi/http'
+import { SSEServerTransport } from '@modelcontextprotocol/sdk/server/sse.js'
+
+import { transports, server } from '@/utils/demo.sse'
+
+export const APIRoute = createAPIFileRoute('/api/sse')({
+  // @ts-ignore
+  GET: async ({}) => {
+    const transport = new SSEServerTransport(
+      '/api/messages',
+      getEvent().node.res,
+    )
+    transports[transport.sessionId] = transport
+    transport.onerror = (error) => {
+      console.error(error)
+    }
+    getEvent().node.res.on('close', () => {
+      delete transports[transport.sessionId]
+    })
+    await server.connect(transport)
+  },
+})

packages/cta-engine/templates/react/example/tanchat/assets/src/utils/demo.sse.ts

@@ -0,0 +1,31 @@
+import { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js";
+import { SSEServerTransport } from "@modelcontextprotocol/sdk/server/sse.js";
+import { getWebRequest } from "vinxi/http";
+
+import guitars from "@/data/example-guitars";
+
+export const server = new McpServer({
+  name: "guitar-server",
+  version: "1.0.0",
+});
+export const transports: { [sessionId: string]: SSEServerTransport } = {};
+
+server.tool("getGuitars", {}, async ({}) => {
+  const port = new URL(getWebRequest().url).port;
+  return {
+    content: [
+      {
+        type: "text",
+        text: JSON.stringify(
+          guitars.map((guitar) => ({
+            id: guitar.id,
+            name: guitar.name,
+            description: guitar.description,
+            price: guitar.price,
+            image: `http://localhost:${port}${guitar.image}`,
+          }))
+        ),
+      },
+    ],
+  };
+});

packages/cta-engine/templates/react/example/tanchat/package.json

@@ -2,6 +2,7 @@
   "dependencies": {
     "@ai-sdk/anthropic": "^1.1.17",
     "@ai-sdk/react": "^1.1.23",
+    "@modelcontextprotocol/sdk": "^1.8.0",
     "ai": "^4.1.65",
     "highlight.js": "^11.11.1",
     "react-markdown": "^9.0.1",