Support standard mcpServers configuration batch import

src/components/mcp-editor.tsx

@@ -20,6 +20,7 @@ import { Loader } from "lucide-react";
 import {
   isMaybeMCPServerConfig,
   isMaybeRemoteConfig,
+  isMaybeStdioConfig,
 } from "lib/ai/mcp/is-mcp-config";
 
 import { Alert, AlertDescription, AlertTitle } from "ui/alert";
@@ -48,8 +49,36 @@ const STDIO_ARGS_ENV_PLACEHOLDER = `/** STDIO Example */
   "headers": {
     "Authorization": "Bearer sk-..."
   }
+}
+
+/** Standard mcpServers JSON Example */
+{
+  "mcpServers": {
+    "my-server": {
+      "command": "node",
+      "args": ["index.js"]
+    }
+  }
 }`;
 
+// Helper to check and extract standard mcpServers configurations
+const getMcpServersFromObject = (obj: any): Record<string, MCPServerConfig> | null => {
+  if (!obj || typeof obj !== "object") return null;
+  const servers = obj.mcpServers || obj;
+  if (typeof servers !== "object" || Array.isArray(servers)) return null;
+
+  const keys = Object.keys(servers);
+  if (keys.length === 0) return null;
+
+  // Verify all keys represent valid server configs
+  const allValid = keys.every(key => {
+    const srv = servers[key];
+    return srv && typeof srv === "object" && isMaybeMCPServerConfig(srv);
+  });
+
+  return allValid ? servers : null;
+};
+
 export default function MCPEditor({
   initialConfig,
   name: initialName,
@@ -91,18 +120,24 @@ export default function MCPEditor({
     return true;
   };
 
+  const isMulti = useMemo(() => {
+    return getMcpServersFromObject(config) !== null;
+  }, [config]);
+
   const saveDisabled = useMemo(() => {
     return (
-      name.trim() === "" ||
+      (!isMulti && name.trim() === "") ||
       isLoading ||
       !!jsonError ||
-      !!nameError ||
-      !isMaybeMCPServerConfig(config)
+      (!isMulti && !!nameError) ||
+      !(isMaybeMCPServerConfig(config) || isMulti)
     );
-  }, [isLoading, jsonError, nameError, config, name]);
+  }, [isLoading, jsonError, nameError, config, name, isMulti]);
 
   // Validate
   const validateConfig = (jsonConfig: unknown): boolean => {
+    const isMultiConfig = getMcpServersFromObject(jsonConfig) !== null;
+    if (isMultiConfig) return true;
     const result = isMaybeRemoteConfig(jsonConfig)
       ? MCPRemoteConfigZodSchema.safeParse(jsonConfig)
       : MCPStdioConfigZodSchema.safeParse(jsonConfig);
@@ -114,6 +149,55 @@ export default function MCPEditor({
 
   // Handle save button click
   const handleSave = async () => {
+    const mcpServers = getMcpServersFromObject(config);
+    if (mcpServers) {
+      setIsLoading(true);
+      try {
+        for (const [srvName, srvConfig] of Object.entries(mcpServers)) {
+          // Validate name
+          const nameResult = nameSchema.safeParse(srvName);
+          if (!nameResult.success) {
+            throw new Error(`Invalid server name "${srvName}": ${nameResult.error.issues[0].message}`);
+          }
+
+          // Validate individual config schema
+          const configResult = isMaybeRemoteConfig(srvConfig)
+            ? MCPRemoteConfigZodSchema.safeParse(srvConfig)
+            : MCPStdioConfigZodSchema.safeParse(srvConfig);
+          if (!configResult.success) {
+            throw new Error(`Invalid config for server "${srvName}": ${configResult.error.issues[0].message}`);
+          }
+
+          if (shouldInsert) {
+            const exist = await existMcpClientByServerNameAction(srvName);
+            if (exist) {
+              throw new Error(`Server "${srvName}" already exists`);
+            }
+          }
+        }
+
+        // Save each server
+        for (const [srvName, srvConfig] of Object.entries(mcpServers)) {
+          await fetcher("/api/mcp", {
+            method: "POST",
+            body: JSON.stringify({
+              name: srvName,
+              config: srvConfig,
+            }),
+          });
+        }
+
+        toast.success("All MCP configurations saved successfully");
+        mutate("/api/mcp/list");
+        router.push("/mcp");
+      } catch (err: any) {
+        handleErrorWithToast(err);
+      } finally {
+        setIsLoading(false);
+      }
+      return;
+    }
+
     // Perform validation
     if (!validateConfig(config)) return;
     if (!name) {
@@ -184,16 +268,16 @@ export default function MCPEditor({
 
           <Input
             id="name"
-            value={name}
-            disabled={!shouldInsert}
+            value={isMulti ? "Multiple Servers Detected (Names read from JSON)" : name}
+            disabled={!shouldInsert || isMulti}
             onChange={(e) => {
               setName(e.target.value);
               if (e.target.value) validateName(e.target.value);
             }}
             placeholder={t("MCP.enterMcpServerName")}
-            className={nameError ? "border-destructive" : ""}
+            className={nameError && !isMulti ? "border-destructive" : ""}
           />
-          {nameError && <p className="text-xs text-destructive">{nameError}</p>}
+          {nameError && !isMulti && <p className="text-xs text-destructive">{nameError}</p>}
         </div>
         <div className="space-y-4">
           <div className="space-y-2">