Export servers to json

mcpjam-inspector/client/src/components/ServersTab.tsx

@@ -4,6 +4,7 @@ import { Button } from "./ui/button";
 import {
   Plus,
   FileText,
+  FileSymlink,
   Cable,
   Link,
   Loader2,
@@ -47,6 +48,7 @@ import {
 import { CollapsedPanelStrip } from "./ui/collapsed-panel-strip";
 import { LoggerView } from "./logger-view";
 import { useJsonRpcPanelVisibility } from "@/hooks/use-json-rpc-panel";
+import { formatJsonConfig } from "@/lib/json-config-parser";
 import { Skeleton } from "./ui/skeleton";
 
 interface ServersTabProps {
@@ -155,6 +157,35 @@ export function ServersTab({
     setIsActionMenuOpen(false);
   };
 
+  const downloadJson = (filename: string, data: any) => {
+    const blob = new Blob([JSON.stringify(data, null, 2)], {
+      type: "application/json;charset=utf-8",
+    });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = filename;
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+    URL.revokeObjectURL(url);
+  };
+
+  const handleExportAsJsonClick = () => {
+    posthog.capture("export_servers_to_json_button_clicked", {
+      location: "servers_tab",
+      platform: detectPlatform(),
+      environment: detectEnvironment(),
+    });
+    const formattedJson = formatJsonConfig(connectedServerConfigs);
+    const timestamp = new Date()
+      .toISOString()
+      .split(".")[0]
+      .replace(/[T:]/g, "-");
+    const fileName = `mcp-servers-config-${timestamp}.json`;
+    downloadJson(fileName, formattedJson);
+  };
+
   const handleCreateTunnel = () => {
     posthog.capture("create_tunnel_button_clicked", {
       location: "servers_tab",
@@ -309,43 +340,56 @@ export function ServersTab({
   };
 
   const renderServerActionsMenu = () => (
-    <HoverCard
-      open={isActionMenuOpen}
-      onOpenChange={setIsActionMenuOpen}
-      openDelay={150}
-      closeDelay={100}
-    >
-      <HoverCardTrigger asChild>
+    <>
+      {Object.keys(connectedServerConfigs ?? {}).length > 0 && (
         <Button
+          variant="outline"
           size="sm"
-          onClick={handleAddServerClick}
-          className="cursor-pointer"
+          className="justify-start"
+          onClick={handleExportAsJsonClick}
         >
-          <Plus className="h-4 w-4 mr-2" />
-          Add Server
+          <FileSymlink className="h-4 w-4 mr-2" />
+          Export Servers
         </Button>
-      </HoverCardTrigger>
-      <HoverCardContent align="end" sideOffset={8} className="w-56 p-3">
-        <div className="flex flex-col gap-2">
+      )}
+      <HoverCard
+        open={isActionMenuOpen}
+        onOpenChange={setIsActionMenuOpen}
+        openDelay={150}
+        closeDelay={100}
+      >
+        <HoverCardTrigger asChild>
           <Button
-            variant="ghost"
-            className="justify-start"
+            size="sm"
             onClick={handleAddServerClick}
+            className="cursor-pointer"
           >
             <Plus className="h-4 w-4 mr-2" />
-            Add manually
-          </Button>
-          <Button
-            variant="ghost"
-            className="justify-start"
-            onClick={handleImportJsonClick}
-          >
-            <FileText className="h-4 w-4 mr-2" />
-            Import JSON
+            Add Server
           </Button>
-        </div>
-      </HoverCardContent>
-    </HoverCard>
+        </HoverCardTrigger>
+        <HoverCardContent align="end" sideOffset={8} className="w-56 p-3">
+          <div className="flex flex-col gap-2">
+            <Button
+              variant="ghost"
+              className="justify-start"
+              onClick={handleAddServerClick}
+            >
+              <Plus className="h-4 w-4 mr-2" />
+              Add manually
+            </Button>
+            <Button
+              variant="ghost"
+              className="justify-start"
+              onClick={handleImportJsonClick}
+            >
+              <FileText className="h-4 w-4 mr-2" />
+              Import JSON
+            </Button>
+          </div>
+        </HoverCardContent>
+      </HoverCard>
+    </>
   );
 
   const renderConnectedContent = () => (
@@ -472,6 +516,7 @@ export function ServersTab({
         : connectedCount > 0
           ? renderConnectedContent()
           : renderEmptyContent()}
+      {connectedCount > 0 ? renderConnectedContent() : renderEmptyContent()}
 
       {/* Add Server Modal */}
       <AddServerModal

mcpjam-inspector/client/src/components/connection/WorkspaceSelector.tsx

@@ -99,9 +99,7 @@ export function WorkspaceSelector({
               )}
               onClick={() => onSwitchWorkspace(workspace.id)}
             >
-              <span className="truncate flex-1">
-                {workspace.name}
-              </span>
+              <span className="truncate flex-1">{workspace.name}</span>
               <button
                 onClick={(e) => {
                   e.stopPropagation();

mcpjam-inspector/client/src/lib/json-config-parser.ts

@@ -1,4 +1,5 @@
 import { ServerFormData } from "@/shared/types.js";
+import { ServerWithName } from "@/state/app-types";
 
 export interface JsonServerConfig {
   command?: string;
@@ -12,6 +13,45 @@ export interface JsonConfig {
   mcpServers: Record<string, JsonServerConfig>;
 }
 
+/**
+ * Formats ServerWithName objects to JSON config format
+ * @param serversObj - Record of server names to ServerWithName objects
+ * @returns JsonConfig object ready for export
+ */
+export function formatJsonConfig(
+  serversObj: Record<string, ServerWithName>,
+): JsonConfig {
+  const mcpServers: Record<string, JsonServerConfig> = {};
+
+  for (const [key, server] of Object.entries(serversObj)) {
+    const { config } = server;
+
+    // Check if it's an SSE type (has URL) or stdio type (has command)
+    if ("url" in config && config.url) {
+      mcpServers[key] = {
+        type: "sse",
+        url: config.url.toString(),
+      };
+    } else if ("command" in config && config.command) {
+      const serverConfig: JsonServerConfig = {
+        command: config.command,
+        args: config.args || [],
+      };
+
+      // Only add env if it exists and has properties
+      if (config.env && Object.keys(config.env).length > 0) {
+        serverConfig.env = config.env;
+      }
+
+      mcpServers[key] = serverConfig;
+    } else {
+      console.warn(`Skipping server "${key}": missing required url or command`);
+    }
+  }
+
+  return { mcpServers };
+}
+
 /**
  * Parses a JSON config file and converts it to ServerFormData array
  * @param jsonContent - The JSON string content