From 71bb89ddf220b7937f1ed8e70ebdf0d62ac06a3d Mon Sep 17 00:00:00 2001 From: Nathan Arseneau Date: Tue, 1 Apr 2025 18:02:29 -0400 Subject: [PATCH 01/10] create sampling response form --- client/src/components/DynamicJsonForm.tsx | 18 +- client/src/components/SamplingRequest.tsx | 162 ++++++++++++++++++ client/src/components/SamplingTab.tsx | 37 +--- client/src/components/Sidebar.tsx | 4 +- .../__tests__/samplingRequest.test.tsx | 73 ++++++++ .../components/__tests__/samplingTab.test.tsx | 55 ++++++ 6 files changed, 316 insertions(+), 33 deletions(-) create mode 100644 client/src/components/SamplingRequest.tsx create mode 100644 client/src/components/__tests__/samplingRequest.test.tsx create mode 100644 client/src/components/__tests__/samplingTab.test.tsx diff --git a/client/src/components/DynamicJsonForm.tsx b/client/src/components/DynamicJsonForm.tsx index f5b0d63..c4caf0d 100644 --- a/client/src/components/DynamicJsonForm.tsx +++ b/client/src/components/DynamicJsonForm.tsx @@ -36,6 +36,7 @@ interface DynamicJsonFormProps { value: JsonValue; onChange: (value: JsonValue) => void; maxDepth?: number; + defaultIsJsonMode?: boolean; } const DynamicJsonForm = ({ @@ -43,8 +44,9 @@ const DynamicJsonForm = ({ value, onChange, maxDepth = 3, + defaultIsJsonMode = false, }: DynamicJsonFormProps) => { - const [isJsonMode, setIsJsonMode] = useState(false); + const [isJsonMode, setIsJsonMode] = useState(defaultIsJsonMode); const [jsonError, setJsonError] = useState(); // Store the raw JSON string to allow immediate feedback during typing // while deferring parsing until the user stops typing @@ -370,11 +372,21 @@ const DynamicJsonForm = ({
{isJsonMode && ( - )} -
diff --git a/client/src/components/SamplingRequest.tsx b/client/src/components/SamplingRequest.tsx new file mode 100644 index 0000000..84c6172 --- /dev/null +++ b/client/src/components/SamplingRequest.tsx @@ -0,0 +1,162 @@ +import { Button } from "@/components/ui/button"; +import JsonView from "./JsonView"; +import { useMemo, useState } from "react"; +import { + CreateMessageResult, + CreateMessageResultSchema, +} from "@modelcontextprotocol/sdk/types.js"; +import { PendingRequest } from "./SamplingTab"; +import DynamicJsonForm, { JsonSchemaType, JsonValue } from "./DynamicJsonForm"; +import { useToast } from "@/hooks/use-toast"; + +export type SamplingRequestProps = { + request: PendingRequest; + onApprove: (id: number, result: CreateMessageResult) => void; + onReject: (id: number) => void; +}; + +const SamplingRequest = ({ + onApprove, + request, + onReject, +}: SamplingRequestProps) => { + const { toast } = useToast(); + + const [messageResult, setMessageResult] = useState({ + model: "GPT-4o", + stopReason: "endTurn", + role: "assistant", + content: { + type: "text", + text: "", + }, + }); + + const s = useMemo(() => { + const schema: JsonSchemaType = { + type: "object", + description: "Message result", + properties: { + model: { + type: "string", + default: "GPT-4o", + description: "model name", + }, + stopReason: { + type: "string", + default: "endTurn", + description: "Stop reason", + }, + role: { + type: "string", + default: "endTurn", + description: "Role of the model", + }, + content: { + type: "object", + properties: { + type: { + type: "string", + default: "text", + description: "Type of content", + }, + }, + }, + }, + }; + + const contentType = (messageResult as any)?.content?.type; + if (contentType === "text" && schema.properties) { + schema.properties.content.properties = { + ...schema.properties.content.properties, + text: { + type: "string", + default: "", + description: "text content", + }, + }; + setMessageResult((prev) => ({ + ...(prev as { [key: string]: JsonValue }), + content: { + type: contentType, + text: "", + }, + })); + } else if (contentType === "image" && schema.properties) { + schema.properties.content.properties = { + ...schema.properties.content.properties, + data: { + type: "string", + default: "", + description: "Base64 encoded image data", + }, + mimeType: { + type: "string", + default: "", + description: "Mime type of the image", + }, + }; + setMessageResult((prev) => ({ + ...(prev as { [key: string]: JsonValue }), + content: { + type: contentType, + data: "", + mimeType: "", + }, + })); + } + + return schema; + }, [(messageResult as any)?.content?.type]); + + const handleApprove = (id: number) => { + const validationResult = CreateMessageResultSchema.safeParse(messageResult); + if (!validationResult.success) { + toast({ + title: "Error", + description: `There was an error validating the message result: ${validationResult.error.message}`, + variant: "destructive", + }); + return; + } + + onApprove(id, validationResult.data); + }; + + return ( +
+
+ +
+
+
+ { + setMessageResult(newValue); + }} + /> +
+
+ + +
+
+
+ ); +}; + +export default SamplingRequest; diff --git a/client/src/components/SamplingTab.tsx b/client/src/components/SamplingTab.tsx index a72ea7d..19ed4a3 100644 --- a/client/src/components/SamplingTab.tsx +++ b/client/src/components/SamplingTab.tsx @@ -1,11 +1,10 @@ import { Alert, AlertDescription } from "@/components/ui/alert"; -import { Button } from "@/components/ui/button"; import { TabsContent } from "@/components/ui/tabs"; import { CreateMessageRequest, CreateMessageResult, } from "@modelcontextprotocol/sdk/types.js"; -import JsonView from "./JsonView"; +import SamplingRequest from "./SamplingRequest"; export type PendingRequest = { id: number; @@ -19,21 +18,8 @@ export type Props = { }; const SamplingTab = ({ pendingRequests, onApprove, onReject }: Props) => { - const handleApprove = (id: number) => { - // For now, just return a stub response - onApprove(id, { - model: "stub-model", - stopReason: "endTurn", - role: "assistant", - content: { - type: "text", - text: "This is a stub response.", - }, - }); - }; - return ( - + When the server requests LLM sampling, requests will appear here for @@ -43,19 +29,12 @@ const SamplingTab = ({ pendingRequests, onApprove, onReject }: Props) => {

Recent Requests

{pendingRequests.map((request) => ( -
- - -
- - -
-
+ ))} {pendingRequests.length === 0 && (

No pending requests

diff --git a/client/src/components/Sidebar.tsx b/client/src/components/Sidebar.tsx index 19f8020..8b40bb7 100644 --- a/client/src/components/Sidebar.tsx +++ b/client/src/components/Sidebar.tsx @@ -460,7 +460,9 @@ const Sidebar = ({ {Object.values(LoggingLevelSchema.enum).map((level) => ( - {level} + + {level} + ))} diff --git a/client/src/components/__tests__/samplingRequest.test.tsx b/client/src/components/__tests__/samplingRequest.test.tsx new file mode 100644 index 0000000..402c2441 --- /dev/null +++ b/client/src/components/__tests__/samplingRequest.test.tsx @@ -0,0 +1,73 @@ +import { render, screen, fireEvent } from "@testing-library/react"; +import SamplingRequest from "../SamplingRequest"; +import { PendingRequest } from "../SamplingTab"; + +const mockRequest: PendingRequest = { + id: 1, + request: { + method: "sampling/createMessage", + params: { + messages: [ + { + role: "user", + content: { + type: "text", + text: "What files are in the current directory?", + }, + }, + ], + systemPrompt: "You are a helpful file system assistant.", + includeContext: "thisServer", + maxTokens: 100, + }, + }, +}; + +describe("Form to handle sampling response", () => { + const mockOnApprove = jest.fn(); + const mockOnReject = jest.fn(); + + afterEach(() => { + jest.clearAllMocks(); + }); + + it("should call onApprove with correct text content when Approve button is clicked", () => { + render( + , + ); + + // Click the Approve button + fireEvent.click(screen.getByRole("button", { name: /approve/i })); + + // Assert that onApprove is called with the correct arguments + expect(mockOnApprove).toHaveBeenCalledWith(mockRequest.id, { + model: "GPT-4o", + stopReason: "endTurn", + role: "assistant", + content: { + type: "text", + text: "", + }, + }); + }); + + it("should call onReject with correct request id when Reject button is clicked", () => { + render( + , + ); + + // Click the Approve button + fireEvent.click(screen.getByRole("button", { name: /Reject/i })); + + // Assert that onApprove is called with the correct arguments + expect(mockOnReject).toHaveBeenCalledWith(mockRequest.id); + }); +}); diff --git a/client/src/components/__tests__/samplingTab.test.tsx b/client/src/components/__tests__/samplingTab.test.tsx new file mode 100644 index 0000000..3e72121 --- /dev/null +++ b/client/src/components/__tests__/samplingTab.test.tsx @@ -0,0 +1,55 @@ +import { render, screen } from "@testing-library/react"; +import { Tabs } from "@/components/ui/tabs"; +import SamplingTab, { PendingRequest } from "../SamplingTab"; + +describe("Sampling tab", () => { + const mockOnApprove = jest.fn(); + const mockOnReject = jest.fn(); + + const renderSamplingTab = (pendingRequests: PendingRequest[]) => + render( + + + , + ); + + it("should render 'No pending requests' when there are no pending requests", () => { + renderSamplingTab([]); + expect( + screen.getByText( + "When the server requests LLM sampling, requests will appear here for approval.", + ), + ).toBeTruthy(); + expect(screen.findByText("No pending requests")).toBeTruthy(); + }); + + it("should render the correct number of requests", () => { + renderSamplingTab( + Array.from({ length: 5 }, (_, i) => ({ + id: i, + request: { + method: "sampling/createMessage", + params: { + messages: [ + { + role: "user", + content: { + type: "text", + text: "What files are in the current directory?", + }, + }, + ], + systemPrompt: "You are a helpful file system assistant.", + includeContext: "thisServer", + maxTokens: 100, + }, + }, + })), + ); + expect(screen.getAllByTestId("sampling-request").length).toBe(5); + }); +}); From 6b57f7ce117900e6252ff54ddf0c510fd37aa2a6 Mon Sep 17 00:00:00 2001 From: Nathan Arseneau Date: Tue, 15 Apr 2025 21:58:03 -0400 Subject: [PATCH 02/10] feat: test ci linter From c843ac6e4931834a521a10467dd1a39d954208e2 Mon Sep 17 00:00:00 2001 From: KavyapriyaJG Date: Mon, 21 Apr 2025 10:00:40 +0530 Subject: [PATCH 03/10] fix - Reset Prompt results on selection --- client/src/App.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/client/src/App.tsx b/client/src/App.tsx index a2dc8f0..7880b2a 100644 --- a/client/src/App.tsx +++ b/client/src/App.tsx @@ -647,6 +647,7 @@ const App = () => { setSelectedPrompt={(prompt) => { clearError("prompts"); setSelectedPrompt(prompt); + setPromptContent(""); }} handleCompletion={handleCompletion} completionsSupported={completionsSupported} From e5f6524eb621de4fbee94bffb60ed16910c1d102 Mon Sep 17 00:00:00 2001 From: cliffhall Date: Mon, 21 Apr 2025 11:34:55 -0400 Subject: [PATCH 04/10] Fix support for streamable-http connections. * In server/index.js - add get/post handlers for /mcp - amend console log on SSE connect, with deprecation message - add /stdio GET handler and refactored /sse GET handler to not also do stdio. Each transport has its own handler now - add appropriate headers to streamable-http request * In /client/src/lib/hooks/useConnection.ts - in connect function - create server url properly based on new transport type. --- client/src/lib/hooks/useConnection.ts | 29 ++++-- server/src/index.ts | 125 ++++++++++++++++++++++++-- 2 files changed, 137 insertions(+), 17 deletions(-) diff --git a/client/src/lib/hooks/useConnection.ts b/client/src/lib/hooks/useConnection.ts index abbeb7c..2577a41 100644 --- a/client/src/lib/hooks/useConnection.ts +++ b/client/src/lib/hooks/useConnection.ts @@ -278,15 +278,26 @@ export function useConnection({ setConnectionStatus("error-connecting-to-proxy"); return; } - const mcpProxyServerUrl = new URL(`${getMCPProxyAddress(config)}/sse`); - mcpProxyServerUrl.searchParams.append("transportType", transportType); - if (transportType === "stdio") { - mcpProxyServerUrl.searchParams.append("command", command); - mcpProxyServerUrl.searchParams.append("args", args); - mcpProxyServerUrl.searchParams.append("env", JSON.stringify(env)); - } else { - mcpProxyServerUrl.searchParams.append("url", sseUrl); + let mcpProxyServerUrl; + switch (transportType) { + case "stdio": + mcpProxyServerUrl = new URL(`${getMCPProxyAddress(config)}/stdio`); + mcpProxyServerUrl.searchParams.append("command", command); + mcpProxyServerUrl.searchParams.append("args", args); + mcpProxyServerUrl.searchParams.append("env", JSON.stringify(env)); + break; + case "sse": + mcpProxyServerUrl = new URL(`${getMCPProxyAddress(config)}/sse`); + mcpProxyServerUrl.searchParams.append("url", sseUrl); + break; + + case "streamable-http": + mcpProxyServerUrl = new URL(`${getMCPProxyAddress(config)}/mcp`); + mcpProxyServerUrl.searchParams.append("url", sseUrl); + break; } + (mcpProxyServerUrl as URL).searchParams.append("transportType", transportType); + try { // Inject auth manually instead of using SSEClientTransport, because we're @@ -304,7 +315,7 @@ export function useConnection({ headers[authHeaderName] = `Bearer ${token}`; } - const clientTransport = new SSEClientTransport(mcpProxyServerUrl, { + const clientTransport = new SSEClientTransport(mcpProxyServerUrl as URL, { eventSourceInit: { fetch: (url, init) => fetch(url, { ...init, headers }), }, diff --git a/server/src/index.ts b/server/src/index.ts index e966910..08a88e7 100644 --- a/server/src/index.ts +++ b/server/src/index.ts @@ -97,7 +97,9 @@ const createTransport = async (req: express.Request): Promise => { console.log("Connected to SSE transport"); return transport; } else if (transportType === "streamable-http") { - const headers: HeadersInit = {}; + const headers: HeadersInit = { + Accept: "text/event-stream, application/json" + }; for (const key of STREAMABLE_HTTP_HEADERS_PASSTHROUGH) { if (req.headers[key] === undefined) { @@ -127,9 +129,79 @@ const createTransport = async (req: express.Request): Promise => { let backingServerTransport: Transport | undefined; -app.get("/sse", async (req, res) => { + +app.get("/mcp", async (req, res) => { try { - console.log("New SSE connection"); + console.log("New streamable-http connection"); + + try { + await backingServerTransport?.close(); + backingServerTransport = await createTransport(req); + } catch (error) { + if (error instanceof SseError && error.code === 401) { + console.error( + "Received 401 Unauthorized from MCP server:", + error.message, + ); + res.status(401).json(error); + return; + } + + throw error; + } + + console.log("Connected MCP client to backing server transport"); + + const webAppTransport = new SSEServerTransport("/mcp", res); + webAppTransports.push(webAppTransport); + console.log("Created web app transport"); + + await webAppTransport.start(); + + if (backingServerTransport instanceof StdioClientTransport) { + backingServerTransport.stderr!.on("data", (chunk) => { + webAppTransport.send({ + jsonrpc: "2.0", + method: "notifications/stderr", + params: { + content: chunk.toString(), + }, + }); + }); + } + + mcpProxy({ + transportToClient: webAppTransport, + transportToServer: backingServerTransport, + }); + + console.log("Set up MCP proxy"); + } catch (error) { + console.error("Error in /sse route:", error); + res.status(500).json(error); + } +}); + +app.post("/mcp", async (req, res) => { + try { + const sessionId = req.query.sessionId; + console.log(`Received message for sessionId ${sessionId}`); + + const transport = webAppTransports.find((t) => t.sessionId === sessionId); + if (!transport) { + res.status(404).end("Session not found"); + return; + } + await transport.handlePostMessage(req, res); + } catch (error) { + console.error("Error in /mcp route:", error); + res.status(500).json(error); + } +}); + +app.get("/stdio", async (req, res) => { + try { + console.log("New connection"); try { await backingServerTransport?.close(); @@ -150,15 +222,12 @@ app.get("/sse", async (req, res) => { console.log("Connected MCP client to backing server transport"); const webAppTransport = new SSEServerTransport("/message", res); - console.log("Created web app transport"); - webAppTransports.push(webAppTransport); + console.log("Created web app transport"); await webAppTransport.start(); - - if (backingServerTransport instanceof StdioClientTransport) { - backingServerTransport.stderr!.on("data", (chunk) => { + (backingServerTransport as StdioClientTransport).stderr!.on("data", (chunk) => { webAppTransport.send({ jsonrpc: "2.0", method: "notifications/stderr", @@ -167,8 +236,48 @@ app.get("/sse", async (req, res) => { }, }); }); + + mcpProxy({ + transportToClient: webAppTransport, + transportToServer: backingServerTransport, + }); + + console.log("Set up MCP proxy"); + } catch (error) { + console.error("Error in /stdio route:", error); + res.status(500).json(error); + } +}); + +app.get("/sse", async (req, res) => { + try { + console.log("New SSE connection. NOTE: The sse transport is deprecated and has been replaced by streamable-http"); + + try { + await backingServerTransport?.close(); + backingServerTransport = await createTransport(req); + } catch (error) { + if (error instanceof SseError && error.code === 401) { + console.error( + "Received 401 Unauthorized from MCP server:", + error.message, + ); + res.status(401).json(error); + return; + } + + throw error; } + console.log("Connected MCP client to backing server transport"); + + const webAppTransport = new SSEServerTransport("/message", res); + webAppTransports.push(webAppTransport); + + console.log("Created web app transport"); + + await webAppTransport.start(); + mcpProxy({ transportToClient: webAppTransport, transportToServer: backingServerTransport, From 3a2e2485273a4dd1bfb5186ceee73fab8f8b8b9a Mon Sep 17 00:00:00 2001 From: cliffhall Date: Mon, 21 Apr 2025 11:40:01 -0400 Subject: [PATCH 05/10] Prettier --- client/src/lib/hooks/useConnection.ts | 6 ++++-- server/src/index.ts | 14 +++++++++----- 2 files changed, 13 insertions(+), 7 deletions(-) diff --git a/client/src/lib/hooks/useConnection.ts b/client/src/lib/hooks/useConnection.ts index 2577a41..1fe93ad 100644 --- a/client/src/lib/hooks/useConnection.ts +++ b/client/src/lib/hooks/useConnection.ts @@ -296,8 +296,10 @@ export function useConnection({ mcpProxyServerUrl.searchParams.append("url", sseUrl); break; } - (mcpProxyServerUrl as URL).searchParams.append("transportType", transportType); - + (mcpProxyServerUrl as URL).searchParams.append( + "transportType", + transportType, + ); try { // Inject auth manually instead of using SSEClientTransport, because we're diff --git a/server/src/index.ts b/server/src/index.ts index 08a88e7..cb01609 100644 --- a/server/src/index.ts +++ b/server/src/index.ts @@ -98,7 +98,7 @@ const createTransport = async (req: express.Request): Promise => { return transport; } else if (transportType === "streamable-http") { const headers: HeadersInit = { - Accept: "text/event-stream, application/json" + Accept: "text/event-stream, application/json", }; for (const key of STREAMABLE_HTTP_HEADERS_PASSTHROUGH) { @@ -129,7 +129,6 @@ const createTransport = async (req: express.Request): Promise => { let backingServerTransport: Transport | undefined; - app.get("/mcp", async (req, res) => { try { console.log("New streamable-http connection"); @@ -227,7 +226,9 @@ app.get("/stdio", async (req, res) => { console.log("Created web app transport"); await webAppTransport.start(); - (backingServerTransport as StdioClientTransport).stderr!.on("data", (chunk) => { + (backingServerTransport as StdioClientTransport).stderr!.on( + "data", + (chunk) => { webAppTransport.send({ jsonrpc: "2.0", method: "notifications/stderr", @@ -235,7 +236,8 @@ app.get("/stdio", async (req, res) => { content: chunk.toString(), }, }); - }); + }, + ); mcpProxy({ transportToClient: webAppTransport, @@ -251,7 +253,9 @@ app.get("/stdio", async (req, res) => { app.get("/sse", async (req, res) => { try { - console.log("New SSE connection. NOTE: The sse transport is deprecated and has been replaced by streamable-http"); + console.log( + "New SSE connection. NOTE: The sse transport is deprecated and has been replaced by streamable-http", + ); try { await backingServerTransport?.close(); From 6e4dcd6120b374ab85b1852ed4f94dcbb5ba6d4c Mon Sep 17 00:00:00 2001 From: cliffhall Date: Tue, 22 Apr 2025 18:25:47 -0400 Subject: [PATCH 06/10] WIP: Attempting to proxy streamable-http connections. Inspector still works fine with STDIO and SSE servers. * In index.ts, - refactor transport webAppTransports to be a map with the session id as key and transport as value. * Implement /mcp GET and POST endpoints using StreamableHTTPServerTransport and doing the new session in the POST (opposite from SSE) handler. * In package.json - update the SDK to 1.10.2 * In useConnection.ts - import StreamableHTTPClientTransport - NOTE: while we NEED to do this, it causes useConnection.test.ts to fail with " ReferenceError: TransformStream is not defined" - in connect method - instantiate the appropriate transport --- client/src/lib/hooks/useConnection.ts | 18 +++- package-lock.json | 14 +-- package.json | 2 +- server/src/index.ts | 147 +++++++++++++++----------- 4 files changed, 107 insertions(+), 74 deletions(-) diff --git a/client/src/lib/hooks/useConnection.ts b/client/src/lib/hooks/useConnection.ts index 1fe93ad..27bc11a 100644 --- a/client/src/lib/hooks/useConnection.ts +++ b/client/src/lib/hooks/useConnection.ts @@ -3,6 +3,7 @@ import { SSEClientTransport, SseError, } from "@modelcontextprotocol/sdk/client/sse.js"; +import { StreamableHTTPClientTransport } from "@modelcontextprotocol/sdk/client/streamableHttp.js"; import { ClientNotification, ClientRequest, @@ -286,6 +287,7 @@ export function useConnection({ mcpProxyServerUrl.searchParams.append("args", args); mcpProxyServerUrl.searchParams.append("env", JSON.stringify(env)); break; + case "sse": mcpProxyServerUrl = new URL(`${getMCPProxyAddress(config)}/sse`); mcpProxyServerUrl.searchParams.append("url", sseUrl); @@ -317,14 +319,24 @@ export function useConnection({ headers[authHeaderName] = `Bearer ${token}`; } - const clientTransport = new SSEClientTransport(mcpProxyServerUrl as URL, { + // Create appropriate transport + const transportOptions = { eventSourceInit: { - fetch: (url, init) => fetch(url, { ...init, headers }), + fetch: ( + url: string | URL | globalThis.Request, + init: RequestInit | undefined, + ) => fetch(url, { ...init, headers }), }, requestInit: { headers, }, - }); + }; + const clientTransport = + transportType === "streamable-http" + ? new StreamableHTTPClientTransport(mcpProxyServerUrl as URL, { + sessionId: undefined, + }) + : new SSEClientTransport(mcpProxyServerUrl as URL, transportOptions); if (onNotification) { [ diff --git a/package-lock.json b/package-lock.json index a8a025c..f8461b3 100644 --- a/package-lock.json +++ b/package-lock.json @@ -17,7 +17,7 @@ "@modelcontextprotocol/inspector-cli": "^0.10.2", "@modelcontextprotocol/inspector-client": "^0.10.2", "@modelcontextprotocol/inspector-server": "^0.10.2", - "@modelcontextprotocol/sdk": "^1.10.0", + "@modelcontextprotocol/sdk": "^1.10.2", "concurrently": "^9.0.1", "shell-quote": "^1.8.2", "spawn-rx": "^5.1.2", @@ -37,7 +37,7 @@ }, "cli": { "name": "@modelcontextprotocol/inspector-cli", - "version": "0.10.1", + "version": "0.10.2", "license": "MIT", "dependencies": { "@modelcontextprotocol/sdk": "^1.10.0", @@ -58,7 +58,7 @@ }, "client": { "name": "@modelcontextprotocol/inspector-client", - "version": "0.10.1", + "version": "0.10.2", "license": "MIT", "dependencies": { "@modelcontextprotocol/sdk": "^1.10.0", @@ -1399,9 +1399,9 @@ "link": true }, "node_modules/@modelcontextprotocol/sdk": { - "version": "1.10.0", - "resolved": "https://registry.npmjs.org/@modelcontextprotocol/sdk/-/sdk-1.10.0.tgz", - "integrity": "sha512-wijOavYZfSOADbVM0LA7mrQ17N4IKNdFcfezknCCsZ1Y1KstVWlkDZ5ebcxuQJmqTTxsNjBHLc7it1SV0TBiPg==", + "version": "1.10.2", + "resolved": "https://registry.npmjs.org/@modelcontextprotocol/sdk/-/sdk-1.10.2.tgz", + "integrity": "sha512-rb6AMp2DR4SN+kc6L1ta2NCpApyA9WYNx3CrTSZvGxq9wH71bRur+zRqPfg0vQ9mjywR7qZdX2RGHOPq3ss+tA==", "license": "MIT", "dependencies": { "content-type": "^1.0.5", @@ -8550,7 +8550,7 @@ }, "server": { "name": "@modelcontextprotocol/inspector-server", - "version": "0.10.1", + "version": "0.10.2", "license": "MIT", "dependencies": { "@modelcontextprotocol/sdk": "^1.10.0", diff --git a/package.json b/package.json index f20af50..d127d13 100644 --- a/package.json +++ b/package.json @@ -41,7 +41,7 @@ "@modelcontextprotocol/inspector-cli": "^0.10.2", "@modelcontextprotocol/inspector-client": "^0.10.2", "@modelcontextprotocol/inspector-server": "^0.10.2", - "@modelcontextprotocol/sdk": "^1.10.0", + "@modelcontextprotocol/sdk": "^1.10.2", "concurrently": "^9.0.1", "shell-quote": "^1.8.2", "spawn-rx": "^5.1.2", diff --git a/server/src/index.ts b/server/src/index.ts index cb01609..b294cfe 100644 --- a/server/src/index.ts +++ b/server/src/index.ts @@ -12,15 +12,17 @@ import { StdioClientTransport, getDefaultEnvironment, } from "@modelcontextprotocol/sdk/client/stdio.js"; -import { Transport } from "@modelcontextprotocol/sdk/shared/transport.js"; -import { SSEServerTransport } from "@modelcontextprotocol/sdk/server/sse.js"; import { StreamableHTTPClientTransport } from "@modelcontextprotocol/sdk/client/streamableHttp.js"; +import { StreamableHTTPServerTransport } from "@modelcontextprotocol/sdk/server/streamableHttp.js"; +import { SSEServerTransport } from "@modelcontextprotocol/sdk/server/sse.js"; +import { Transport } from "@modelcontextprotocol/sdk/shared/transport.js"; import express from "express"; import { findActualExecutable } from "spawn-rx"; import mcpProxy from "./mcpProxy.js"; +import { randomUUID } from "node:crypto"; const SSE_HEADERS_PASSTHROUGH = ["authorization"]; -const STREAMABLE_HTTP_HEADERS_PASSTHROUGH = ["authorization"]; +const STREAMABLE_HTTP_HEADERS_PASSTHROUGH = ["authorization", "mcp-session-id"]; const defaultEnvironment = { ...getDefaultEnvironment(), @@ -38,7 +40,7 @@ const { values } = parseArgs({ const app = express(); app.use(cors()); -let webAppTransports: SSEServerTransport[] = []; +const webAppTransports: Map = new Map(); // Transports by sessionId const createTransport = async (req: express.Request): Promise => { const query = req.query; @@ -130,71 +132,89 @@ const createTransport = async (req: express.Request): Promise => { let backingServerTransport: Transport | undefined; app.get("/mcp", async (req, res) => { + const sessionId = req.headers["mcp-session-id"] as string; + console.log(`Received GET message for sessionId ${sessionId}`); try { - console.log("New streamable-http connection"); - - try { - await backingServerTransport?.close(); - backingServerTransport = await createTransport(req); - } catch (error) { - if (error instanceof SseError && error.code === 401) { - console.error( - "Received 401 Unauthorized from MCP server:", - error.message, - ); - res.status(401).json(error); - return; - } - - throw error; + const transport = webAppTransports.get( + sessionId, + ) as StreamableHTTPServerTransport; + if (!transport) { + res.status(404).end("Session not found"); + return; + } else { + await transport.handleRequest(req, res); } - - console.log("Connected MCP client to backing server transport"); - - const webAppTransport = new SSEServerTransport("/mcp", res); - webAppTransports.push(webAppTransport); - console.log("Created web app transport"); - - await webAppTransport.start(); - - if (backingServerTransport instanceof StdioClientTransport) { - backingServerTransport.stderr!.on("data", (chunk) => { - webAppTransport.send({ - jsonrpc: "2.0", - method: "notifications/stderr", - params: { - content: chunk.toString(), - }, - }); - }); - } - - mcpProxy({ - transportToClient: webAppTransport, - transportToServer: backingServerTransport, - }); - - console.log("Set up MCP proxy"); } catch (error) { - console.error("Error in /sse route:", error); + console.error("Error in /mcp route:", error); res.status(500).json(error); } }); app.post("/mcp", async (req, res) => { - try { - const sessionId = req.query.sessionId; - console.log(`Received message for sessionId ${sessionId}`); + const sessionId = req.headers["mcp-session-id"] as string | undefined; + console.log(`Received POST message for sessionId ${sessionId}`); + if (!sessionId) { + try { + console.log("New streamable-http connection"); + try { + await backingServerTransport?.close(); + backingServerTransport = await createTransport(req); + } catch (error) { + if (error instanceof SseError && error.code === 401) { + console.error( + "Received 401 Unauthorized from MCP server:", + error.message, + ); + res.status(401).json(error); + return; + } - const transport = webAppTransports.find((t) => t.sessionId === sessionId); - if (!transport) { - res.status(404).end("Session not found"); - return; + throw error; + } + + console.log("Connected MCP client to backing server transport"); + + const webAppTransport = new StreamableHTTPServerTransport({ + sessionIdGenerator: randomUUID, + onsessioninitialized: (sessionId) => { + webAppTransports.set(sessionId, webAppTransport); + console.log("Created streamable web app transport " + sessionId); + }, + }); + + await webAppTransport.start(); + + mcpProxy({ + transportToClient: webAppTransport, + transportToServer: backingServerTransport, + }); + + await (webAppTransport as StreamableHTTPServerTransport).handleRequest( + req, + res, + req.body, + ); + } catch (error) { + console.error("Error in /mcp POST route:", error); + res.status(500).json(error); + } + } else { + try { + const transport = webAppTransports.get( + sessionId, + ) as StreamableHTTPServerTransport; + if (!transport) { + res.status(404).end("Transport not found for sessionId " + sessionId); + } else { + await (transport as StreamableHTTPServerTransport).handleRequest( + req, + res, + ); + } + } catch (error) { + console.error("Error in /mcp route:", error); + res.status(500).json(error); } - await transport.handlePostMessage(req, res); - } catch (error) { - console.error("Error in /mcp route:", error); - res.status(500).json(error); } }); @@ -221,7 +241,7 @@ app.get("/stdio", async (req, res) => { console.log("Connected MCP client to backing server transport"); const webAppTransport = new SSEServerTransport("/message", res); - webAppTransports.push(webAppTransport); + webAppTransports.set(webAppTransport.sessionId, webAppTransport); console.log("Created web app transport"); @@ -276,8 +296,7 @@ app.get("/sse", async (req, res) => { console.log("Connected MCP client to backing server transport"); const webAppTransport = new SSEServerTransport("/message", res); - webAppTransports.push(webAppTransport); - + webAppTransports.set(webAppTransport.sessionId, webAppTransport); console.log("Created web app transport"); await webAppTransport.start(); @@ -299,7 +318,9 @@ app.post("/message", async (req, res) => { const sessionId = req.query.sessionId; console.log(`Received message for sessionId ${sessionId}`); - const transport = webAppTransports.find((t) => t.sessionId === sessionId); + const transport = webAppTransports.get( + sessionId as string, + ) as SSEServerTransport; if (!transport) { res.status(404).end("Session not found"); return; From 1ec4e3b556e4fc8d426d5b4ca51d4d936719b752 Mon Sep 17 00:00:00 2001 From: Shiv Deepak Muddada Date: Wed, 23 Apr 2025 01:43:49 -0700 Subject: [PATCH 07/10] fix cors issue with accessing mcp-session-id header --- server/src/index.ts | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/server/src/index.ts b/server/src/index.ts index b294cfe..ed79ae9 100644 --- a/server/src/index.ts +++ b/server/src/index.ts @@ -39,6 +39,10 @@ const { values } = parseArgs({ const app = express(); app.use(cors()); +app.use((req, res, next) => { + res.header("Access-Control-Expose-Headers", "mcp-session-id"); + next(); +}); const webAppTransports: Map = new Map(); // Transports by sessionId From bf1026b6ec357a0e4a9337a51db58642881e2374 Mon Sep 17 00:00:00 2001 From: cliffhall Date: Wed, 23 Apr 2025 17:52:17 -0400 Subject: [PATCH 08/10] Fix failing unit tests * This PR caused the Sidebar.test.ts file tests to fail because TransformStream is not found. * TransformStream exists in the Node version I'm testing with (20), but it still isn't found by Jest * Turns out it is a problem with Jest, and the workaround is the simple package jest-fixed-jsdom, which subclasses JSDOMEnvironment testing environment, placing this and several other dependencies in its global object. * In package.json - add jest-fixed-jsdom as a devDependency * In jest.config.cjs - change testEnvironment to jest-fixed-jsdom --- client/jest.config.cjs | 2 +- package-lock.json | 14 ++++++++++++++ package.json | 1 + 3 files changed, 16 insertions(+), 1 deletion(-) diff --git a/client/jest.config.cjs b/client/jest.config.cjs index c360e72..b4d81cf 100644 --- a/client/jest.config.cjs +++ b/client/jest.config.cjs @@ -1,6 +1,6 @@ module.exports = { preset: "ts-jest", - testEnvironment: "jsdom", + testEnvironment: "jest-fixed-jsdom", moduleNameMapper: { "^@/(.*)$": "/src/$1", "\\.css$": "/src/__mocks__/styleMock.js", diff --git a/package-lock.json b/package-lock.json index f8461b3..973ca62 100644 --- a/package-lock.json +++ b/package-lock.json @@ -31,6 +31,7 @@ "@types/jest": "^29.5.14", "@types/node": "^22.7.5", "@types/shell-quote": "^1.7.5", + "jest-fixed-jsdom": "^0.0.9", "prettier": "3.3.3", "typescript": "^5.4.2" } @@ -5358,6 +5359,19 @@ "node": "^14.15.0 || ^16.10.0 || >=18.0.0" } }, + "node_modules/jest-fixed-jsdom": { + "version": "0.0.9", + "resolved": "https://registry.npmjs.org/jest-fixed-jsdom/-/jest-fixed-jsdom-0.0.9.tgz", + "integrity": "sha512-KPfqh2+sn5q2B+7LZktwDcwhCpOpUSue8a1I+BcixWLOQoEVyAjAGfH+IYZGoxZsziNojoHGRTC8xRbB1wDD4g==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=18.0.0" + }, + "peerDependencies": { + "jest-environment-jsdom": ">=28.0.0" + } + }, "node_modules/jest-get-type": { "version": "29.6.3", "dev": true, diff --git a/package.json b/package.json index d127d13..bba280c 100644 --- a/package.json +++ b/package.json @@ -52,6 +52,7 @@ "@types/jest": "^29.5.14", "@types/node": "^22.7.5", "@types/shell-quote": "^1.7.5", + "jest-fixed-jsdom": "^0.0.9", "prettier": "3.3.3", "typescript": "^5.4.2" } From 7b9cd1e74d05c5036b019053f35ec34dc2794f0c Mon Sep 17 00:00:00 2001 From: cliffhall Date: Thu, 24 Apr 2025 11:39:48 -0400 Subject: [PATCH 09/10] In server/index.ts - Add last-event-id to STREAMABLE_HTTP_HEADERS_PASSTHROUGH. --- server/src/index.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/server/src/index.ts b/server/src/index.ts index ed79ae9..4bc7837 100644 --- a/server/src/index.ts +++ b/server/src/index.ts @@ -22,7 +22,7 @@ import mcpProxy from "./mcpProxy.js"; import { randomUUID } from "node:crypto"; const SSE_HEADERS_PASSTHROUGH = ["authorization"]; -const STREAMABLE_HTTP_HEADERS_PASSTHROUGH = ["authorization", "mcp-session-id"]; +const STREAMABLE_HTTP_HEADERS_PASSTHROUGH = ["authorization", "mcp-session-id", "last-event-id"]; const defaultEnvironment = { ...getDefaultEnvironment(), From 5d0c3c48f67815549641df0d287912c909d08dd5 Mon Sep 17 00:00:00 2001 From: cliffhall Date: Thu, 24 Apr 2025 12:01:02 -0400 Subject: [PATCH 10/10] Prettier --- server/src/index.ts | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/server/src/index.ts b/server/src/index.ts index 4bc7837..c967b60 100644 --- a/server/src/index.ts +++ b/server/src/index.ts @@ -22,7 +22,11 @@ import mcpProxy from "./mcpProxy.js"; import { randomUUID } from "node:crypto"; const SSE_HEADERS_PASSTHROUGH = ["authorization"]; -const STREAMABLE_HTTP_HEADERS_PASSTHROUGH = ["authorization", "mcp-session-id", "last-event-id"]; +const STREAMABLE_HTTP_HEADERS_PASSTHROUGH = [ + "authorization", + "mcp-session-id", + "last-event-id", +]; const defaultEnvironment = { ...getDefaultEnvironment(),