feat: adding mcp support

Author: jherr

frameworks/react-cra/add-ons/mcp/assets/_dot_gitignore.append

@@ -0,0 +1 @@
+mcp-todos.json

frameworks/react-cra/add-ons/mcp/assets/src/mcp-todos.ts

@@ -0,0 +1,47 @@
+import fs from 'node:fs'
+
+const todosPath = './mcp-todos.json'
+
+// In-memory todos storage
+const todos = fs.existsSync(todosPath)
+  ? JSON.parse(fs.readFileSync(todosPath, 'utf8'))
+  : [
+      {
+        id: 1,
+        title: 'Buy groceries',
+      },
+    ]
+
+// Subscription callbacks per userID
+let subscribers: ((todos: Todo[]) => void)[] = []
+
+export type Todo = {
+  id: number
+  title: string
+}
+
+// Get the todos for a user
+export function getTodos(): Todo[] {
+  return todos
+}
+
+// Add an item to the todos
+export function addTodo(title: string) {
+  todos.push({ id: todos.length + 1, title })
+  fs.writeFileSync(todosPath, JSON.stringify(todos, null, 2))
+  notifySubscribers()
+}
+
+// Subscribe to cart changes for a user
+export function subscribeToTodos(callback: (todos: Todo[]) => void) {
+  subscribers.push(callback)
+  callback(todos)
+  return () => {
+    subscribers = subscribers.filter((cb) => cb !== callback)
+  }
+}
+
+// Notify all subscribers of a user's cart
+function notifySubscribers() {
+  subscribers.forEach((cb) => cb(todos))
+}

frameworks/react-cra/add-ons/mcp/assets/src/routes/api.mcp-todos.ts

@@ -0,0 +1,29 @@
+import { createServerFileRoute } from "@tanstack/react-start/server";
+
+import { addTodo, getTodos, subscribeToTodos } from "@/mcp-todos";
+
+export const ServerRoute = createServerFileRoute("/api/mcp-todos").methods({
+  GET: () => {
+    const stream = new ReadableStream({
+      start(controller) {
+        setInterval(() => {
+          controller.enqueue(`event: ping\n\n`);
+        }, 1000);
+        const unsubscribe = subscribeToTodos((todos) => {
+          controller.enqueue(`data: ${JSON.stringify(todos)}\n\n`);
+        });
+        const todos = getTodos();
+        controller.enqueue(`data: ${JSON.stringify(todos)}\n\n`);
+        return () => unsubscribe();
+      },
+    });
+    return new Response(stream, {
+      headers: { "Content-Type": "text/event-stream" },
+    });
+  },
+  POST: async ({ request }) => {
+    const { title } = await request.json();
+    addTodo(title);
+    return Response.json(getTodos());
+  },
+});

frameworks/react-cra/add-ons/mcp/assets/src/routes/demo.mcp-todos.tsx

@@ -0,0 +1,78 @@
+import { useCallback, useState, useEffect } from 'react'
+import { createFileRoute } from '@tanstack/react-router'
+
+type Todo = {
+  id: number
+  title: string
+}
+
+export const Route = createFileRoute('/demo/mcp-todos')({
+  component: ORPCTodos,
+})
+
+function ORPCTodos() {
+  const [todos, setTodos] = useState<Todo[]>([])
+
+  useEffect(() => {
+    const eventSource = new EventSource('/api/mcp-todos')
+    eventSource.onmessage = (event) => {
+      setTodos(JSON.parse(event.data))
+    }
+    return () => eventSource.close()
+  }, [])
+
+  const [todo, setTodo] = useState('')
+
+  const submitTodo = useCallback(async () => {
+    await fetch('/api/mcp-todos', {
+      method: 'POST',
+      body: JSON.stringify({ title: todo }),
+    })
+    setTodo('')
+  }, [todo])
+
+  return (
+    <div
+      className="flex items-center justify-center min-h-screen bg-gradient-to-br from-teal-200 to-emerald-900 p-4 text-white"
+      style={{
+        backgroundImage:
+          'radial-gradient(70% 70% at 20% 20%, #07A798 0%, #045C4B 60%, #01251F 100%)',
+      }}
+    >
+      <div className="w-full max-w-2xl p-8 rounded-xl backdrop-blur-md bg-black/50 shadow-xl border-8 border-black/10">
+        <h1 className="text-2xl mb-4">MCP Todos list</h1>
+        <ul className="mb-4 space-y-2">
+          {todos?.map((t) => (
+            <li
+              key={t.id}
+              className="bg-white/10 border border-white/20 rounded-lg p-3 backdrop-blur-sm shadow-md"
+            >
+              <span className="text-lg text-white">{t.title}</span>
+            </li>
+          ))}
+        </ul>
+        <div className="flex flex-col gap-2">
+          <input
+            type="text"
+            value={todo}
+            onChange={(e) => setTodo(e.target.value)}
+            onKeyDown={(e) => {
+              if (e.key === 'Enter') {
+                submitTodo()
+              }
+            }}
+            placeholder="Enter a new todo..."
+            className="w-full px-4 py-3 rounded-lg border border-white/20 bg-white/10 backdrop-blur-sm text-white placeholder-white/60 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-transparent"
+          />
+          <button
+            disabled={todo.trim().length === 0}
+            onClick={submitTodo}
+            className="bg-blue-500 hover:bg-blue-600 disabled:bg-blue-500/50 disabled:cursor-not-allowed text-white font-bold py-3 px-4 rounded-lg transition-colors"
+          >
+            Add todo
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}

frameworks/react-cra/add-ons/mcp/assets/src/routes/mcp.ts

@@ -0,0 +1,49 @@
+import { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js";
+import { createServerFileRoute } from "@tanstack/react-start/server";
+import z from "zod";
+
+import { handleMcpRequest } from "@/utils/mcp-handler";
+
+import { addTodo } from "@/mcp-todos";
+
+const server = new McpServer({
+  name: "start-server",
+  version: "1.0.0",
+});
+
+server.registerTool(
+  "addTodo",
+  {
+    title: "Tool to add a todo to a list of todos",
+    description: "Add a todo to a list of todos",
+    inputSchema: {
+      title: z.string().describe("The title of the todo"),
+    },
+  },
+  ({ title }) => ({
+    content: [{ type: "text", text: String(addTodo(title)) }],
+  })
+);
+
+// server.registerResource(
+//   "counter-value",
+//   "count://",
+//   {
+//     title: "Counter Resource",
+//     description: "Returns the current value of the counter",
+//   },
+//   async (uri) => {
+//     return {
+//       contents: [
+//         {
+//           uri: uri.href,
+//           text: `The counter is at 20!`,
+//         },
+//       ],
+//     };
+//   }
+// );
+
+export const ServerRoute = createServerFileRoute("/mcp").methods({
+  POST: async ({ request }) => handleMcpRequest(request, server),
+});

frameworks/react-cra/add-ons/mcp/assets/src/utils/mcp-handler.ts

@@ -0,0 +1,61 @@
+import { StreamableHTTPServerTransport } from "@modelcontextprotocol/sdk/server/streamableHttp.js";
+import { getEvent } from "@tanstack/react-start/server";
+import type { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js";
+
+export async function handleMcpRequest(request: Request, server: McpServer) {
+  const body = await request.json();
+  const event = getEvent();
+  const res = event.node.res;
+  const req = event.node.req;
+
+  return new Promise<Response>((resolve, reject) => {
+    const transport = new StreamableHTTPServerTransport({
+      sessionIdGenerator: undefined,
+    });
+
+    const cleanup = () => {
+      transport.close();
+      server.close();
+    };
+
+    let settled = false;
+    const safeResolve = (response: Response) => {
+      if (!settled) {
+        settled = true;
+        cleanup();
+        resolve(response);
+      }
+    };
+
+    const safeReject = (error: any) => {
+      if (!settled) {
+        settled = true;
+        cleanup();
+        reject(error);
+      }
+    };
+
+    res.on("finish", () => safeResolve(new Response(null, { status: 200 })));
+    res.on("close", () => safeResolve(new Response(null, { status: 200 })));
+    res.on("error", safeReject);
+
+    server
+      .connect(transport)
+      .then(() => transport.handleRequest(req, res, body))
+      .catch((error) => {
+        console.error("Transport error:", error);
+        cleanup();
+        if (!res.headersSent) {
+          res.writeHead(500, { "Content-Type": "application/json" });
+          res.end(
+            JSON.stringify({
+              jsonrpc: "2.0",
+              error: { code: -32603, message: "Internal server error" },
+              id: null,
+            })
+          );
+        }
+        safeReject(error);
+      });
+  });
+}

frameworks/react-cra/add-ons/mcp/info.json

@@ -0,0 +1,18 @@
+{
+  "name": "MCP",
+  "phase": "setup",
+  "description": "Add Model Context Protocol (MCP) support.",
+  "link": "https://mcp.dev",
+  "modes": ["file-router"],
+  "type": "add-on",
+  "warning": "MCP is still in development and may change significantly or not be compatible with other add-ons.\nThe MCP implementation does not support authentication.",
+  "routes": [
+    {
+      "url": "/demo/mcp-todos",
+      "name": "MCP",
+      "path": "src/routes/demo.mcp-todos.tsx",
+      "jsName": "MCPTodosDemo"
+    }
+  ],
+  "dependsOn": ["start"]
+}

frameworks/react-cra/add-ons/mcp/package.json

@@ -0,0 +1,6 @@
+{
+  "dependencies": {
+    "@modelcontextprotocol/sdk": "^1.17.0",
+    "zod": "3.25.76"
+  }
+}

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

@@ -234,7 +234,7 @@ Use the following commands to start your app:
       getPackageManagerScriptCommand(options.packageManager, ['dev']),
     )}
 
-Please check the README.md for information on testing, styling, adding routes, etc.${errorStatement}`,
+Please read the README.md for information on testing, styling, adding routes, etc.${errorStatement}`,
   )
 }