feat: add MCP server test button in Settings UI

ammar-agent · ammar-agent · commit 1029bf770491 · 2025-12-08T10:38:51.000-06:00
- Add projects.mcp.test ORPC endpoint
- Add MCPServerManager.testServer() that spawns server, fetches tools, closes
- Add Test button with spinner, success (shows tools), and error states
- 30 second timeout for test operations
diff --git a/src/browser/components/Settings/sections/ProjectSettingsSection.tsx b/src/browser/components/Settings/sections/ProjectSettingsSection.tsx
@@ -1,7 +1,9 @@
 import React, { useCallback, useEffect, useState } from "react";
 import { useAPI } from "@/browser/contexts/API";
 import { useWorkspaceContext } from "@/browser/contexts/WorkspaceContext";
-import { Trash2 } from "lucide-react";
+import { Trash2, Play, Loader2, CheckCircle, XCircle } from "lucide-react";
+
+type TestResult = { success: true; tools: string[] } | { success: false; error: string };
 
 export const ProjectSettingsSection: React.FC = () => {
   const { api } = useAPI();
@@ -11,6 +13,8 @@ export const ProjectSettingsSection: React.FC = () => {
   const [servers, setServers] = useState<Record<string, string>>({});
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
+  const [testingServer, setTestingServer] = useState<string | null>(null);
+  const [testResults, setTestResults] = useState<Map<string, TestResult>>(new Map());
 
   const refresh = useCallback(async () => {
     if (!api || !projectPath) return;
@@ -50,6 +54,33 @@ export const ProjectSettingsSection: React.FC = () => {
     [api, projectPath, refresh]
   );
 
+  const handleTest = useCallback(
+    async (name: string) => {
+      if (!api || !projectPath) return;
+      setTestingServer(name);
+      // Clear previous result for this server
+      setTestResults((prev) => {
+        const next = new Map(prev);
+        next.delete(name);
+        return next;
+      });
+      try {
+        const result = await api.projects.mcp.test({ projectPath, name });
+        setTestResults((prev) => new Map(prev).set(name, result));
+      } catch (err) {
+        setTestResults((prev) =>
+          new Map(prev).set(name, {
+            success: false,
+            error: err instanceof Error ? err.message : "Test failed",
+          })
+        );
+      } finally {
+        setTestingServer(null);
+      }
+    },
+    [api, projectPath]
+  );
+
   if (!projectPath) {
     return (
       <p className="text-muted-foreground text-sm">
@@ -77,26 +108,69 @@ export const ProjectSettingsSection: React.FC = () => {
       )}
 
       <ul className="space-y-2">
-        {Object.entries(servers).map(([name, command]) => (
-          <li
-            key={name}
-            className="border-border-medium/60 bg-secondary/30 flex items-start justify-between rounded-md border px-3 py-2"
-          >
-            <div className="space-y-1">
-              <div className="font-medium">{name}</div>
-              <div className="text-muted-foreground text-xs break-all">{command}</div>
-            </div>
-            <button
-              type="button"
-              onClick={() => void handleRemove(name)}
-              className="text-muted-foreground hover:text-destructive flex items-center gap-1 text-xs"
-              aria-label={`Remove MCP server ${name}`}
-              disabled={loading}
+        {Object.entries(servers).map(([name, command]) => {
+          const isTesting = testingServer === name;
+          const testResult = testResults.get(name);
+          return (
+            <li
+              key={name}
+              className="border-border-medium/60 bg-secondary/30 rounded-md border px-3 py-2"
             >
-              <Trash2 className="h-4 w-4" /> Remove
-            </button>
-          </li>
-        ))}
+              <div className="flex items-start justify-between">
+                <div className="min-w-0 flex-1 space-y-1">
+                  <div className="font-medium">{name}</div>
+                  <div className="text-muted-foreground text-xs break-all">{command}</div>
+                </div>
+                <div className="ml-2 flex shrink-0 items-center gap-2">
+                  <button
+                    type="button"
+                    onClick={() => void handleTest(name)}
+                    className="text-muted-foreground hover:text-accent flex items-center gap-1 text-xs disabled:opacity-50"
+                    aria-label={`Test MCP server ${name}`}
+                    disabled={loading || isTesting}
+                  >
+                    {isTesting ? (
+                      <Loader2 className="h-4 w-4 animate-spin" />
+                    ) : (
+                      <Play className="h-4 w-4" />
+                    )}
+                    {isTesting ? "Testing…" : "Test"}
+                  </button>
+                  <button
+                    type="button"
+                    onClick={() => void handleRemove(name)}
+                    className="text-muted-foreground hover:text-destructive flex items-center gap-1 text-xs"
+                    aria-label={`Remove MCP server ${name}`}
+                    disabled={loading}
+                  >
+                    <Trash2 className="h-4 w-4" /> Remove
+                  </button>
+                </div>
+              </div>
+              {/* Test result display */}
+              {testResult && (
+                <div
+                  className={`mt-2 flex items-start gap-1.5 text-xs ${testResult.success ? "text-green-500" : "text-destructive"}`}
+                >
+                  {testResult.success ? (
+                    <>
+                      <CheckCircle className="mt-0.5 h-3 w-3 shrink-0" />
+                      <span>
+                        {testResult.tools.length} tools: {testResult.tools.slice(0, 5).join(", ")}
+                        {testResult.tools.length > 5 && ` (+${testResult.tools.length - 5} more)`}
+                      </span>
+                    </>
+                  ) : (
+                    <>
+                      <XCircle className="mt-0.5 h-3 w-3 shrink-0" />
+                      <span>{testResult.error}</span>
+                    </>
+                  )}
+                </div>
+              )}
+            </li>
+          );
+        })}
       </ul>
     </div>
   );
diff --git a/src/common/orpc/schemas.ts b/src/common/orpc/schemas.ts
@@ -39,7 +39,13 @@ export { SecretSchema } from "./schemas/secrets";
 export { MuxProviderOptionsSchema } from "./schemas/providerOptions";
 
 // MCP schemas
-export { MCPServerMapSchema, MCPAddParamsSchema, MCPRemoveParamsSchema } from "./schemas/mcp";
+export {
+  MCPServerMapSchema,
+  MCPAddParamsSchema,
+  MCPRemoveParamsSchema,
+  MCPTestParamsSchema,
+  MCPTestResultSchema,
+} from "./schemas/mcp";
 
 // Terminal schemas
 export {
diff --git a/src/common/orpc/schemas/api.ts b/src/common/orpc/schemas/api.ts
@@ -15,7 +15,13 @@ import {
 } from "./terminal";
 import { BashToolResultSchema, FileTreeNodeSchema } from "./tools";
 import { FrontendWorkspaceMetadataSchema, WorkspaceActivitySnapshotSchema } from "./workspace";
-import { MCPAddParamsSchema, MCPRemoveParamsSchema, MCPServerMapSchema } from "./mcp";
+import {
+  MCPAddParamsSchema,
+  MCPRemoveParamsSchema,
+  MCPServerMapSchema,
+  MCPTestParamsSchema,
+  MCPTestResultSchema,
+} from "./mcp";
 
 // Re-export telemetry schemas
 export { telemetry, TelemetryEventSchema } from "./telemetry";
@@ -130,6 +136,10 @@ export const projects = {
       input: MCPRemoveParamsSchema,
       output: ResultSchema(z.void(), z.string()),
     },
+    test: {
+      input: MCPTestParamsSchema,
+      output: MCPTestResultSchema,
+    },
   },
   secrets: {
     get: {
diff --git a/src/common/orpc/schemas/mcp.ts b/src/common/orpc/schemas/mcp.ts
@@ -12,3 +12,13 @@ export const MCPRemoveParamsSchema = z.object({
   projectPath: z.string(),
   name: z.string(),
 });
+
+export const MCPTestParamsSchema = z.object({
+  projectPath: z.string(),
+  name: z.string(),
+});
+
+export const MCPTestResultSchema = z.discriminatedUnion("success", [
+  z.object({ success: z.literal(true), tools: z.array(z.string()) }),
+  z.object({ success: z.literal(false), error: z.string() }),
+]);
diff --git a/src/node/orpc/router.ts b/src/node/orpc/router.ts
@@ -185,6 +185,12 @@ export const router = (authToken?: string) => {
           .handler(({ context, input }) =>
             context.mcpConfigService.removeServer(input.projectPath, input.name)
           ),
+        test: t
+          .input(schemas.projects.mcp.test.input)
+          .output(schemas.projects.mcp.test.output)
+          .handler(({ context, input }) =>
+            context.mcpServerManager.testServer(input.projectPath, input.name)
+          ),
       },
     },
     nameGeneration: {
diff --git a/src/node/services/mcpServerManager.ts b/src/node/services/mcpServerManager.ts
@@ -5,6 +5,11 @@ import { MCPStdioTransport } from "@/node/services/mcpStdioTransport";
 import type { MCPServerMap } from "@/common/types/mcp";
 import type { Runtime } from "@/node/runtime/Runtime";
 import type { MCPConfigService } from "@/node/services/mcpConfigService";
+import { createRuntime } from "@/node/runtime/runtimeFactory";
+
+const TEST_TIMEOUT_MS = 30_000;
+
+export type MCPTestResult = { success: true; tools: string[] } | { success: false; error: string };
 
 interface MCPServerInstance {
   name: string;
@@ -71,6 +76,57 @@ export class MCPServerManager {
     this.workspaceServers.delete(workspaceId);
   }
 
+  /**
+   * Test an MCP server configuration by spawning it, fetching tools, then closing.
+   * Used by the Settings UI to verify a server works before relying on it.
+   */
+  async testServer(projectPath: string, name: string): Promise<MCPTestResult> {
+    const servers = await this.configService.listServers(projectPath);
+    const command = servers?.[name];
+    if (!command) {
+      return { success: false, error: `Server "${name}" not found in configuration` };
+    }
+
+    const runtime = createRuntime({ type: "local", srcBaseDir: projectPath });
+    const timeoutPromise = new Promise<MCPTestResult>((resolve) =>
+      setTimeout(() => resolve({ success: false, error: "Connection timed out" }), TEST_TIMEOUT_MS)
+    );
+
+    const testPromise = (async (): Promise<MCPTestResult> => {
+      let transport: MCPStdioTransport | null = null;
+      try {
+        log.debug("[MCP] Testing server", { name, command });
+        const execStream = await runtime.exec(command, {
+          cwd: projectPath,
+          timeout: TEST_TIMEOUT_MS / 1000,
+        });
+
+        transport = new MCPStdioTransport(execStream);
+        await transport.start();
+        const client = await experimental_createMCPClient({ transport });
+        const tools = await client.tools();
+        const toolNames = Object.keys(tools);
+        await client.close();
+        await transport.close();
+        log.info("[MCP] Test successful", { name, tools: toolNames });
+        return { success: true, tools: toolNames };
+      } catch (error) {
+        const message = error instanceof Error ? error.message : String(error);
+        log.warn("[MCP] Test failed", { name, error: message });
+        if (transport) {
+          try {
+            await transport.close();
+          } catch {
+            // ignore cleanup errors
+          }
+        }
+        return { success: false, error: message };
+      }
+    })();
+
+    return Promise.race([testPromise, timeoutPromise]);
+  }
+
   private collectTools(instances: Map<string, MCPServerInstance>): Record<string, Tool> {
     const aggregated: Record<string, Tool> = {};
     for (const instance of instances.values()) {
diff --git a/tests/ipc/mcpConfig.test.ts b/tests/ipc/mcpConfig.test.ts
@@ -75,7 +75,6 @@ describeIntegration("MCP project configuration", () => {
 });
 
 describeIntegration("MCP server integration with model", () => {
-
   test.concurrent(
     "MCP tools are available to the model",
     async () => {
