Merge pull request modelcontextprotocol#238 from max-stytch/feat/disconnect

feat: Add lightweight Disconnect button

Author: cliffhall

client/src/App.tsx

@@ -145,6 +145,7 @@ const App = () => {
     handleCompletion,
     completionsSupported,
     connect: connectMcpServer,
+    disconnect: disconnectMcpServer,
   } = useConnection({
     transportType,
     command,
@@ -458,6 +459,7 @@ const App = () => {
         bearerToken={bearerToken}
         setBearerToken={setBearerToken}
         onConnect={connectMcpServer}
+        onDisconnect={disconnectMcpServer}
         stdErrNotifications={stdErrNotifications}
         logLevel={logLevel}
         sendLogLevelRequest={sendLogLevelRequest}

client/src/components/Sidebar.tsx

@@ -10,6 +10,7 @@ import {
   EyeOff,
   RotateCcw,
   Settings,
+  RefreshCwOff,
 } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
@@ -45,6 +46,7 @@ interface SidebarProps {
   bearerToken: string;
   setBearerToken: (token: string) => void;
   onConnect: () => void;
+  onDisconnect: () => void;
   stdErrNotifications: StdErrNotification[];
   logLevel: LoggingLevel;
   sendLogLevelRequest: (level: LoggingLevel) => void;
@@ -68,6 +70,7 @@ const Sidebar = ({
   bearerToken,
   setBearerToken,
   onConnect,
+  onDisconnect,
   stdErrNotifications,
   logLevel,
   sendLogLevelRequest,
@@ -375,19 +378,24 @@ const Sidebar = ({
           </div>
 
           <div className="space-y-2">
-            <Button className="w-full" onClick={onConnect}>
-              {connectionStatus === "connected" ? (
-                <>
+            {connectionStatus === "connected" && (
+              <div className="grid grid-cols-2 gap-4">
+                <Button onClick={onConnect}>
                   <RotateCcw className="w-4 h-4 mr-2" />
                   {transportType === "stdio" ? "Restart" : "Reconnect"}
-                </>
-              ) : (
-                <>
-                  <Play className="w-4 h-4 mr-2" />
-                  Connect
-                </>
-              )}
-            </Button>
+                </Button>
+                <Button onClick={onDisconnect}>
+                  <RefreshCwOff className="w-4 h-4 mr-2" />
+                  Disconnect
+                </Button>
+              </div>
+            )}
+            {connectionStatus !== "connected" && (
+              <Button className="w-full" onClick={onConnect}>
+                <Play className="w-4 h-4 mr-2" />
+                Connect
+              </Button>
+            )}
 
             <div className="flex items-center justify-center space-x-2 mb-4">
               <div

client/src/components/__tests__/Sidebar.test.tsx

@@ -26,6 +26,7 @@ describe("Sidebar Environment Variables", () => {
     bearerToken: "",
     setBearerToken: jest.fn(),
     onConnect: jest.fn(),
+    onDisconnect: jest.fn(),
     stdErrNotifications: [],
     logLevel: "info" as const,
     sendLogLevelRequest: jest.fn(),

client/src/lib/hooks/useConnection.ts

@@ -321,6 +321,14 @@ export function useConnection({
     }
   };
 
+  const disconnect = async () => {
+    await mcpClient?.close();
+    setMcpClient(null);
+    setConnectionStatus("disconnected");
+    setCompletionsSupported(false);
+    setServerCapabilities(null);
+  };
+
   return {
     connectionStatus,
     serverCapabilities,
@@ -331,5 +339,6 @@ export function useConnection({
     handleCompletion,
     completionsSupported,
     connect,
+    disconnect,
   };
 }