Merge pull request #334 from sumeetpardeshi/main

feat: Add copy json config button

README.md

@@ -42,6 +42,74 @@ CLIENT_PORT=8080 SERVER_PORT=9000 npx @modelcontextprotocol/inspector node build
 
 For more details on ways to use the inspector, see the [Inspector section of the MCP docs site](https://modelcontextprotocol.io/docs/tools/inspector). For help with debugging, see the [Debugging guide](https://modelcontextprotocol.io/docs/tools/debugging).
 
+### Servers File Export
+
+The MCP Inspector provides convenient buttons to export server launch configurations for use in clients such as Cursor, Claude Code, or the Inspector's CLI. The file is usually called `mcp.json`.
+
+- **Server Entry** - Copies a single server configuration entry to your clipboard. This can be added to your `mcp.json` file inside the `mcpServers` object with your preferred server name.
+
+  **STDIO transport example:**
+
+  ```json
+  {
+    "command": "node",
+    "args": ["build/index.js", "--debug"],
+    "env": {
+      "API_KEY": "your-api-key",
+      "DEBUG": "true"
+    }
+  }
+  ```
+
+  **SSE transport example:**
+
+  ```json
+  {
+    "type": "sse",
+    "url": "http://localhost:3000/events",
+    "note": "For SSE connections, add this URL directly in Client"
+  }
+  ```
+
+- **Servers File** - Copies a complete MCP configuration file structure to your clipboard, with your current server configuration added as `default-server`. This can be saved directly as `mcp.json`.
+
+  **STDIO transport example:**
+
+  ```json
+  {
+    "mcpServers": {
+      "default-server": {
+        "command": "node",
+        "args": ["build/index.js", "--debug"],
+        "env": {
+          "API_KEY": "your-api-key",
+          "DEBUG": "true"
+        }
+      }
+    }
+  }
+  ```
+
+  **SSE transport example:**
+
+  ```json
+  {
+    "mcpServers": {
+      "default-server": {
+        "type": "sse",
+        "url": "http://localhost:3000/events",
+        "note": "For SSE connections, add this URL directly in Client"
+      }
+    }
+  }
+  ```
+
+These buttons appear in the Inspector UI after you've configured your server settings, making it easy to save and reuse your configurations.
+
+For SSE transport connections, the Inspector provides similar functionality for both buttons. The "Server Entry" button copies the SSE URL configuration that can be added to your existing configuration file, while the "Servers File" button creates a complete configuration file containing the SSE URL for direct use in clients.
+
+You can paste the Server Entry into your existing `mcp.json` file under your chosen server name, or use the complete Servers File payload to create a new configuration file.
+
 ### Authentication
 
 The inspector supports bearer token authentication for SSE connections. Enter your token in the UI when connecting to an MCP server, and it will be sent in the Authorization header. You can override the header name using the input field in the sidebar.
@@ -94,6 +162,8 @@ Example server configuration file:
 }
 ```
 
+> **Tip:** You can easily generate this configuration format using the **Server Entry** and **Servers File** buttons in the Inspector UI, as described in the Servers File Export section above.
+
 You can also set the initial `transport` type, `serverUrl`, `serverCommand`, and `serverArgs` via query params, for example:
 
 ```

client/src/components/Sidebar.tsx

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useState, useCallback } from "react";
 import {
   Play,
   ChevronDown,
@@ -12,6 +12,8 @@ import {
   Settings,
   HelpCircle,
   RefreshCwOff,
+  Copy,
+  CheckCheck,
 } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
@@ -36,6 +38,7 @@ import {
   TooltipTrigger,
   TooltipContent,
 } from "@/components/ui/tooltip";
+import { useToast } from "../lib/hooks/useToast";
 
 interface SidebarProps {
   connectionStatus: ConnectionStatus;
@@ -95,6 +98,120 @@ const Sidebar = ({
   const [showBearerToken, setShowBearerToken] = useState(false);
   const [showConfig, setShowConfig] = useState(false);
   const [shownEnvVars, setShownEnvVars] = useState<Set<string>>(new Set());
+  const [copiedServerEntry, setCopiedServerEntry] = useState(false);
+  const [copiedServerFile, setCopiedServerFile] = useState(false);
+  const { toast } = useToast();
+
+  // Reusable error reporter for copy actions
+  const reportError = useCallback(
+    (error: unknown) => {
+      toast({
+        title: "Error",
+        description: `Failed to copy config: ${error instanceof Error ? error.message : String(error)}`,
+        variant: "destructive",
+      });
+    },
+    [toast],
+  );
+
+  // Shared utility function to generate server config
+  const generateServerConfig = useCallback(() => {
+    if (transportType === "stdio") {
+      return {
+        command,
+        args: args.trim() ? args.split(/\s+/) : [],
+        env: { ...env },
+      };
+    }
+    if (transportType === "sse") {
+      return {
+        type: "sse",
+        url: sseUrl,
+        note: "For SSE connections, add this URL directly in Client",
+      };
+    }
+    if (transportType === "streamable-http") {
+      return {
+        type: "streamable-http",
+        url: sseUrl,
+        note: "For Streamable HTTP connections, add this URL directly in Client",
+      };
+    }
+    return {};
+  }, [transportType, command, args, env, sseUrl]);
+
+  // Memoized config entry generator
+  const generateMCPServerEntry = useCallback(() => {
+    return JSON.stringify(generateServerConfig(), null, 4);
+  }, [generateServerConfig]);
+
+  // Memoized config file generator
+  const generateMCPServerFile = useCallback(() => {
+    return JSON.stringify(
+      {
+        mcpServers: {
+          "default-server": generateServerConfig(),
+        },
+      },
+      null,
+      4,
+    );
+  }, [generateServerConfig]);
+
+  // Memoized copy handlers
+  const handleCopyServerEntry = useCallback(() => {
+    try {
+      const configJson = generateMCPServerEntry();
+      navigator.clipboard
+        .writeText(configJson)
+        .then(() => {
+          setCopiedServerEntry(true);
+
+          toast({
+            title: "Config entry copied",
+            description:
+              transportType === "stdio"
+                ? "Server configuration has been copied to clipboard. Add this to your mcp.json inside the 'mcpServers' object with your preferred server name."
+                : "SSE URL has been copied. Use this URL in Cursor directly.",
+          });
+
+          setTimeout(() => {
+            setCopiedServerEntry(false);
+          }, 2000);
+        })
+        .catch((error) => {
+          reportError(error);
+        });
+    } catch (error) {
+      reportError(error);
+    }
+  }, [generateMCPServerEntry, transportType, toast, reportError]);
+
+  const handleCopyServerFile = useCallback(() => {
+    try {
+      const configJson = generateMCPServerFile();
+      navigator.clipboard
+        .writeText(configJson)
+        .then(() => {
+          setCopiedServerFile(true);
+
+          toast({
+            title: "Servers file copied",
+            description:
+              "Servers configuration has been copied to clipboard. Add this to your mcp.json file. Current testing server will be added as 'default-server'",
+          });
+
+          setTimeout(() => {
+            setCopiedServerFile(false);
+          }, 2000);
+        })
+        .catch((error) => {
+          reportError(error);
+        });
+    } catch (error) {
+      reportError(error);
+    }
+  }, [generateMCPServerFile, toast, reportError]);
 
   return (
     <div className="w-80 bg-card border-r border-border flex flex-col h-full">
@@ -223,6 +340,7 @@ const Sidebar = ({
               </div>
             </>
           )}
+
           {transportType === "stdio" && (
             <div className="space-y-2">
               <Button
@@ -348,6 +466,46 @@ const Sidebar = ({
             </div>
           )}
 
+          {/* Always show both copy buttons for all transport types */}
+          <div className="grid grid-cols-2 gap-2 mt-2">
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button
+                  variant="outline"
+                  size="sm"
+                  onClick={handleCopyServerEntry}
+                  className="w-full"
+                >
+                  {copiedServerEntry ? (
+                    <CheckCheck className="h-4 w-4 mr-2" />
+                  ) : (
+                    <Copy className="h-4 w-4 mr-2" />
+                  )}
+                  Server Entry
+                </Button>
+              </TooltipTrigger>
+              <TooltipContent>Copy Server Entry</TooltipContent>
+            </Tooltip>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button
+                  variant="outline"
+                  size="sm"
+                  onClick={handleCopyServerFile}
+                  className="w-full"
+                >
+                  {copiedServerFile ? (
+                    <CheckCheck className="h-4 w-4 mr-2" />
+                  ) : (
+                    <Copy className="h-4 w-4 mr-2" />
+                  )}
+                  Servers File
+                </Button>
+              </TooltipTrigger>
+              <TooltipContent>Copy Servers File</TooltipContent>
+            </Tooltip>
+          </div>
+
           {/* Configuration */}
           <div className="space-y-2">
             <Button

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

@@ -1,4 +1,4 @@
-import { render, screen, fireEvent } from "@testing-library/react";
+import { render, screen, fireEvent, act } from "@testing-library/react";
 import "@testing-library/jest-dom";
 import { describe, it, beforeEach, jest } from "@jest/globals";
 import Sidebar from "../Sidebar";
@@ -12,6 +12,25 @@ jest.mock("../../lib/hooks/useTheme", () => ({
   default: () => ["light", jest.fn()],
 }));
 
+// Mock toast hook
+const mockToast = jest.fn();
+jest.mock("@/lib/hooks/useToast", () => ({
+  useToast: () => ({
+    toast: mockToast,
+  }),
+}));
+
+// Mock navigator clipboard
+const mockClipboardWrite = jest.fn(() => Promise.resolve());
+Object.defineProperty(navigator, "clipboard", {
+  value: {
+    writeText: mockClipboardWrite,
+  },
+});
+
+// Setup fake timers
+jest.useFakeTimers();
+
 describe("Sidebar Environment Variables", () => {
   const defaultProps = {
     connectionStatus: "disconnected" as const,
@@ -53,6 +72,7 @@ describe("Sidebar Environment Variables", () => {
 
   beforeEach(() => {
     jest.clearAllMocks();
+    jest.clearAllTimers();
   });
 
   describe("Basic Operations", () => {
@@ -622,4 +642,231 @@ describe("Sidebar Environment Variables", () => {
       );
     });
   });
+
+  describe("Copy Configuration Features", () => {
+    beforeEach(() => {
+      jest.clearAllMocks();
+      jest.clearAllTimers();
+    });
+
+    const getCopyButtons = () => {
+      return {
+        serverEntry: screen.getByRole("button", { name: /server entry/i }),
+        serversFile: screen.getByRole("button", { name: /servers file/i }),
+      };
+    };
+
+    it("should render both copy buttons for all transport types", () => {
+      ["stdio", "sse", "streamable-http"].forEach((transportType) => {
+        renderSidebar({ transportType });
+        // There should be exactly one Server Entry and one Servers File button per render
+        const serverEntryButtons = screen.getAllByRole("button", {
+          name: /server entry/i,
+        });
+        const serversFileButtons = screen.getAllByRole("button", {
+          name: /servers file/i,
+        });
+        expect(serverEntryButtons).toHaveLength(1);
+        expect(serversFileButtons).toHaveLength(1);
+        // Clean up DOM for next iteration
+        // (Testing Library's render does not auto-unmount in a loop)
+        document.body.innerHTML = "";
+      });
+    });
+
+    it("should copy server entry configuration to clipboard for STDIO transport", async () => {
+      const command = "node";
+      const args = "--inspect server.js";
+      const env = { API_KEY: "test-key", DEBUG: "true" };
+
+      renderSidebar({
+        transportType: "stdio",
+        command,
+        args,
+        env,
+      });
+
+      await act(async () => {
+        const { serverEntry } = getCopyButtons();
+        fireEvent.click(serverEntry);
+        jest.runAllTimers();
+      });
+
+      expect(mockClipboardWrite).toHaveBeenCalledTimes(1);
+      const expectedConfig = JSON.stringify(
+        {
+          command,
+          args: ["--inspect", "server.js"],
+          env,
+        },
+        null,
+        4,
+      );
+      expect(mockClipboardWrite).toHaveBeenCalledWith(expectedConfig);
+    });
+
+    it("should copy servers file configuration to clipboard for STDIO transport", async () => {
+      const command = "node";
+      const args = "--inspect server.js";
+      const env = { API_KEY: "test-key", DEBUG: "true" };
+
+      renderSidebar({
+        transportType: "stdio",
+        command,
+        args,
+        env,
+      });
+
+      await act(async () => {
+        const { serversFile } = getCopyButtons();
+        fireEvent.click(serversFile);
+        jest.runAllTimers();
+      });
+
+      expect(mockClipboardWrite).toHaveBeenCalledTimes(1);
+      const expectedConfig = JSON.stringify(
+        {
+          mcpServers: {
+            "default-server": {
+              command,
+              args: ["--inspect", "server.js"],
+              env,
+            },
+          },
+        },
+        null,
+        4,
+      );
+      expect(mockClipboardWrite).toHaveBeenCalledWith(expectedConfig);
+    });
+
+    it("should copy server entry configuration to clipboard for SSE transport", async () => {
+      const sseUrl = "http://localhost:3000/events";
+      renderSidebar({ transportType: "sse", sseUrl });
+
+      await act(async () => {
+        const { serverEntry } = getCopyButtons();
+        fireEvent.click(serverEntry);
+        jest.runAllTimers();
+      });
+
+      expect(mockClipboardWrite).toHaveBeenCalledTimes(1);
+      const expectedConfig = JSON.stringify(
+        {
+          type: "sse",
+          url: sseUrl,
+          note: "For SSE connections, add this URL directly in Client",
+        },
+        null,
+        4,
+      );
+      expect(mockClipboardWrite).toHaveBeenCalledWith(expectedConfig);
+    });
+
+    it("should copy servers file configuration to clipboard for SSE transport", async () => {
+      const sseUrl = "http://localhost:3000/events";
+      renderSidebar({ transportType: "sse", sseUrl });
+
+      await act(async () => {
+        const { serversFile } = getCopyButtons();
+        fireEvent.click(serversFile);
+        jest.runAllTimers();
+      });
+
+      expect(mockClipboardWrite).toHaveBeenCalledTimes(1);
+      const expectedConfig = JSON.stringify(
+        {
+          mcpServers: {
+            "default-server": {
+              type: "sse",
+              url: sseUrl,
+              note: "For SSE connections, add this URL directly in Client",
+            },
+          },
+        },
+        null,
+        4,
+      );
+      expect(mockClipboardWrite).toHaveBeenCalledWith(expectedConfig);
+    });
+
+    it("should copy server entry configuration to clipboard for streamable-http transport", async () => {
+      const sseUrl = "http://localhost:3001/sse";
+      renderSidebar({ transportType: "streamable-http", sseUrl });
+
+      await act(async () => {
+        const { serverEntry } = getCopyButtons();
+        fireEvent.click(serverEntry);
+        jest.runAllTimers();
+      });
+
+      expect(mockClipboardWrite).toHaveBeenCalledTimes(1);
+      const expectedConfig = JSON.stringify(
+        {
+          type: "streamable-http",
+          url: sseUrl,
+          note: "For Streamable HTTP connections, add this URL directly in Client",
+        },
+        null,
+        4,
+      );
+      expect(mockClipboardWrite).toHaveBeenCalledWith(expectedConfig);
+    });
+
+    it("should copy servers file configuration to clipboard for streamable-http transport", async () => {
+      const sseUrl = "http://localhost:3001/sse";
+      renderSidebar({ transportType: "streamable-http", sseUrl });
+
+      await act(async () => {
+        const { serversFile } = getCopyButtons();
+        fireEvent.click(serversFile);
+        jest.runAllTimers();
+      });
+
+      expect(mockClipboardWrite).toHaveBeenCalledTimes(1);
+      const expectedConfig = JSON.stringify(
+        {
+          mcpServers: {
+            "default-server": {
+              type: "streamable-http",
+              url: sseUrl,
+              note: "For Streamable HTTP connections, add this URL directly in Client",
+            },
+          },
+        },
+        null,
+        4,
+      );
+      expect(mockClipboardWrite).toHaveBeenCalledWith(expectedConfig);
+    });
+
+    it("should handle empty args in STDIO transport", async () => {
+      const command = "python";
+      const args = "";
+
+      renderSidebar({
+        transportType: "stdio",
+        command,
+        args,
+      });
+
+      await act(async () => {
+        const { serverEntry } = getCopyButtons();
+        fireEvent.click(serverEntry);
+        jest.runAllTimers();
+      });
+
+      expect(mockClipboardWrite).toHaveBeenCalledTimes(1);
+      const expectedConfig = JSON.stringify(
+        {
+          command,
+          args: [],
+          env: {},
+        },
+        null,
+        4,
+      );
+      expect(mockClipboardWrite).toHaveBeenCalledWith(expectedConfig);
+    });
+  });
 });