Merge pull request #19 from metatool-ai/improve-json-import-export

Improve JSON import and add support for JSON export

Author: zhjch05

app/(sidebar-layout)/(container)/mcp-servers/page.tsx

@@ -9,7 +9,7 @@ import {
   SortingState,
   useReactTable,
 } from '@tanstack/react-table';
-import { Trash2, Upload } from 'lucide-react';
+import { Copy, Download, Trash2, Upload } from 'lucide-react';
 import Link from 'next/link';
 import { useState } from 'react';
 import { useForm } from 'react-hook-form';
@@ -60,6 +60,9 @@ export default function MCPServersPage() {
   const [isSubmitting, setIsSubmitting] = useState(false);
   const [importJson, setImportJson] = useState('');
   const [importError, setImportError] = useState('');
+  const [exportOpen, setExportOpen] = useState(false);
+  const [exportJson, setExportJson] = useState('');
+  const [copiedToClipboard, setCopiedToClipboard] = useState(false);
 
   const form = useForm({
     defaultValues: {
@@ -167,11 +170,93 @@ export default function MCPServersPage() {
     getFilteredRowModel: getFilteredRowModel(),
   });
 
+  const exportServerConfig = () => {
+    if (!servers.length) {
+      toast({
+        title: 'Export Failed',
+        description: 'No MCP servers to export.',
+        variant: 'destructive',
+      });
+      return;
+    }
+
+    // Transform servers array to the required JSON format
+    const mcpServers = servers.reduce((acc, server) => {
+      const serverConfig: any = {
+        description: server.description || '',
+        type: server.type.toLowerCase(),
+      };
+
+      if (server.type === McpServerType.STDIO) {
+        serverConfig.command = server.command;
+        serverConfig.args = server.args || [];
+        serverConfig.env = server.env || {};
+      } else if (server.type === McpServerType.SSE) {
+        serverConfig.url = server.url;
+      }
+
+      acc[server.name] = serverConfig;
+      return acc;
+    }, {} as Record<string, any>);
+
+    // Create the final JSON structure
+    const exportData = {
+      mcpServers,
+    };
+
+    // Convert to JSON string with formatting
+    const jsonString = JSON.stringify(exportData, null, 2);
+    setExportJson(jsonString);
+    setExportOpen(true);
+  };
+
+  const copyToClipboard = () => {
+    navigator.clipboard.writeText(exportJson).then(
+      () => {
+        setCopiedToClipboard(true);
+        toast({
+          title: 'Copied to Clipboard',
+          description: 'MCP server configuration copied to clipboard.',
+          variant: 'default',
+        });
+        setTimeout(() => setCopiedToClipboard(false), 2000);
+      },
+      (err) => {
+        console.error('Could not copy text: ', err);
+        toast({
+          title: 'Copy Failed',
+          description: 'Failed to copy to clipboard.',
+          variant: 'destructive',
+        });
+      }
+    );
+  };
+
+  const downloadJson = () => {
+    // Create and trigger download
+    const blob = new Blob([exportJson], { type: 'application/json' });
+    const url = URL.createObjectURL(blob);
+    const link = document.createElement('a');
+    link.href = url;
+    link.download = 'mcp-servers-config.json';
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+    URL.revokeObjectURL(url);
+
+    toast({
+      title: 'Download Successful',
+      description: `Downloaded ${servers.length} MCP server${servers.length !== 1 ? 's' : ''} configuration.`,
+      variant: 'default',
+    });
+  };
+
   return (
     <div>
       <div className='flex justify-between items-center mb-4'>
         <h1 className='text-2xl font-bold'>MCP Servers</h1>
         <div className='flex space-x-2'>
+
           <Dialog open={importOpen} onOpenChange={setImportOpen}>
             <DialogTrigger asChild>
               <Button variant='outline'>
@@ -183,18 +268,24 @@ export default function MCPServersPage() {
               <DialogHeader>
                 <DialogTitle>Import MCP Servers</DialogTitle>
                 <DialogDescription>
-                  Import multiple MCP server configurations from JSON. The JSON
+                  Import multiple MCP server configurations from JSON. This will incrementally add MCP servers without overwriting what you have here. The JSON
                   should follow the format:
-                  <pre className='mt-2 p-2 bg-gray-100 rounded text-xs overflow-auto'>
+                  <pre className='mt-2 p-2 bg-gray-100 rounded text-xs overflow-x-auto whitespace-pre-wrap break-all'>
                     {`{
   "mcpServers": {
-    "ServerName": {
+    "CommandBasedServerName": {
       "command": "command",
       "args": ["arg1", "arg2"],
       "env": {
         "KEY": "value"
       },
-      "description": "Optional description"
+      "description": "Optional description",
+      "type": "stdio" // optional, defaults to "stdio"
+    },
+    "UrlBasedServerName": {
+      "url": "https://example.com/sse",
+      "description": "Optional description",
+      "type": "sse" // optional, defaults to "stdio"
     }
   }
 }`}
@@ -256,9 +347,42 @@ export default function MCPServersPage() {
                           return;
                         }
 
+                        // Process each server based on its type
+                        const processedJson = {
+                          mcpServers: Object.entries(parsedJson.mcpServers).reduce((acc, [name, serverConfig]) => {
+                            const config = serverConfig as any;
+                            const serverType = config.type?.toLowerCase() === 'sse'
+                              ? McpServerType.SSE
+                              : McpServerType.STDIO;
+
+                            // Create server config based on type
+                            if (serverType === McpServerType.SSE) {
+                              acc[name] = {
+                                name,
+                                description: config.description || '',
+                                url: config.url,
+                                type: serverType,
+                                status: McpServerStatus.ACTIVE,
+                              };
+                            } else {
+                              // STDIO type
+                              acc[name] = {
+                                name,
+                                description: config.description || '',
+                                command: config.command,
+                                args: config.args || [],
+                                env: config.env || {},
+                                type: serverType,
+                                status: McpServerStatus.ACTIVE,
+                              };
+                            }
+                            return acc;
+                          }, {} as Record<string, any>)
+                        };
+
                         // Import the servers
                         const result = await bulkImportMcpServers(
-                          parsedJson,
+                          processedJson,
                           currentProfile?.uuid
                         );
 
@@ -299,6 +423,51 @@ export default function MCPServersPage() {
               </div>
             </DialogContent>
           </Dialog>
+          <Button variant='outline' onClick={exportServerConfig}>
+            <Download className='mr-2 h-4 w-4' />
+            Export JSON
+          </Button>
+          <Dialog open={exportOpen} onOpenChange={setExportOpen}>
+            <DialogContent className='sm:max-w-[500px]'>
+              <DialogHeader>
+                <DialogTitle>Export MCP Servers JSON</DialogTitle>
+                <DialogDescription>
+                  MCP server configurations in JSON format.
+                </DialogDescription>
+              </DialogHeader>
+              <div className='space-y-4'>
+                <div className='relative'>
+                  <pre className='mt-2 p-4 bg-gray-100 rounded text-xs overflow-x-auto whitespace-pre-wrap break-all h-80 overflow-y-auto'>
+                    {exportJson}
+                  </pre>
+                  <Button
+                    variant='outline'
+                    size='sm'
+                    className='absolute top-2 right-6'
+                    onClick={copyToClipboard}>
+                    <Copy className='h-4 w-4 mr-1' />
+                    {copiedToClipboard ? 'Copied!' : 'Copy'}
+                  </Button>
+                </div>
+                <div className='flex justify-end space-x-2'>
+                  <Button
+                    type='button'
+                    variant='outline'
+                    onClick={() => {
+                      setExportOpen(false);
+                    }}>
+                    Close
+                  </Button>
+                  <Button
+                    type='button'
+                    onClick={downloadJson}>
+                    <Download className='mr-2 h-4 w-4' />
+                    Download
+                  </Button>
+                </div>
+              </div>
+            </DialogContent>
+          </Dialog>
           <Dialog open={open} onOpenChange={setOpen}>
             <DialogTrigger asChild>
               <Button>Add MCP Server</Button>