Send HTTP DELETE on streamable transport disconnect

client/src/lib/hooks/useConnection.ts

@@ -45,6 +45,7 @@ import {
 } from "@/utils/configUtils";
 import { getMCPServerRequestTimeout } from "@/utils/configUtils";
 import { InspectorConfig } from "../configurationTypes";
+import { Transport } from "@modelcontextprotocol/sdk/shared/transport.js";
 
 interface UseConnectionOptions {
   transportType: "stdio" | "sse" | "streamable-http";
@@ -83,6 +84,9 @@ export function useConnection({
   const [serverCapabilities, setServerCapabilities] =
     useState<ServerCapabilities | null>(null);
   const [mcpClient, setMcpClient] = useState<Client | null>(null);
+  const [clientTransport, setClientTransport] = useState<Transport | null>(
+    null,
+  );
   const [requestHistory, setRequestHistory] = useState<
     { request: string; response?: string }[]
   >([]);
@@ -377,14 +381,6 @@ export function useConnection({
         transportType,
       );
 
-      const clientTransport =
-        transportType === "streamable-http"
-          ? new StreamableHTTPClientTransport(mcpProxyServerUrl as URL, {
-              sessionId: undefined,
-              ...transportOptions,
-            })
-          : new SSEClientTransport(mcpProxyServerUrl as URL, transportOptions);
-
       if (onNotification) {
         [
           CancelledNotificationSchema,
@@ -414,7 +410,20 @@ export function useConnection({
 
       let capabilities;
       try {
-        await client.connect(clientTransport);
+        const transport =
+          transportType === "streamable-http"
+            ? new StreamableHTTPClientTransport(mcpProxyServerUrl as URL, {
+                sessionId: undefined,
+                ...transportOptions,
+              })
+            : new SSEClientTransport(
+                mcpProxyServerUrl as URL,
+                transportOptions,
+              );
+
+        await client.connect(transport as Transport);
+
+        setClientTransport(transport);
 
         capabilities = client.getServerCapabilities();
         const initializeRequest = {
@@ -468,10 +477,15 @@ export function useConnection({
   };
 
   const disconnect = async () => {
+    if (transportType === "streamable-http")
+      await (
+        clientTransport as StreamableHTTPClientTransport
+      ).terminateSession();
     await mcpClient?.close();
     const authProvider = new InspectorOAuthClientProvider(sseUrl);
     authProvider.clear();
     setMcpClient(null);
+    setClientTransport(null);
     setConnectionStatus("disconnected");
     setCompletionsSupported(false);
     setServerCapabilities(null);

server/src/index.ts

@@ -226,6 +226,33 @@ app.post("/mcp", async (req, res) => {
   }
 });
 
+app.delete("/mcp", async (req, res) => {
+  const sessionId = req.headers["mcp-session-id"] as string | undefined;
+  console.log(`Received DELETE message for sessionId ${sessionId}`);
+  let serverTransport: Transport | undefined;
+  if (sessionId) {
+    try {
+      serverTransport = serverTransports.get(
+        sessionId,
+      ) as StreamableHTTPClientTransport;
+      if (!serverTransport) {
+        res.status(404).end("Transport not found for sessionId " + sessionId);
+      } else {
+        await (
+          serverTransport as StreamableHTTPClientTransport
+        ).terminateSession();
+        webAppTransports.delete(sessionId);
+        serverTransports.delete(sessionId);
+        console.log(`Transports removed for sessionId ${sessionId}`);
+      }
+      res.status(200).end();
+    } 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");