diff --git a/surfsense_web/components/assistant-ui/connector-popup/connect-forms/components/mcp-connect-form.tsx b/surfsense_web/components/assistant-ui/connector-popup/connect-forms/components/mcp-connect-form.tsx
index 17c6245bd..b619b84e1 100644
--- a/surfsense_web/components/assistant-ui/connector-popup/connect-forms/components/mcp-connect-form.tsx
+++ b/surfsense_web/components/assistant-ui/connector-popup/connect-forms/components/mcp-connect-form.tsx
@@ -1,9 +1,8 @@
"use client";
-import { Server } from "lucide-react";
+import { CheckCircle2, ChevronDown, ChevronUp, Server, XCircle } from "lucide-react";
import { type FC, useRef, useState } from "react";
-import { toast } from "sonner";
-import { Alert, AlertDescription } from "@/components/ui/alert";
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
import { Button } from "@/components/ui/button";
import { Label } from "@/components/ui/label";
import { Textarea } from "@/components/ui/textarea";
@@ -13,6 +12,7 @@ import {
extractServerName,
parseMCPConfig,
testMCPConnection,
+ type MCPConnectionTestResult,
} from "../../utils/mcp-config-validator";
export const MCPConnectForm: FC = ({ onSubmit, isSubmitting }) => {
@@ -20,6 +20,8 @@ export const MCPConnectForm: FC = ({ onSubmit, isSubmitting })
const [configJson, setConfigJson] = useState("");
const [jsonError, setJsonError] = useState(null);
const [isTesting, setIsTesting] = useState(false);
+ const [showDetails, setShowDetails] = useState(false);
+ const [testResult, setTestResult] = useState(null);
const DEFAULT_CONFIG = JSON.stringify(
{
@@ -65,26 +67,19 @@ export const MCPConnectForm: FC = ({ onSubmit, isSubmitting })
const handleTestConnection = async () => {
const serverConfig = parseConfig();
if (!serverConfig) {
- toast.error("Invalid configuration", {
- description: jsonError || "Please check your MCP server configuration JSON.",
+ setTestResult({
+ status: "error",
+ message: jsonError || "Invalid configuration",
+ tools: [],
});
return;
}
setIsTesting(true);
+ setTestResult(null);
const result = await testMCPConnection(serverConfig);
-
- if (result.status === "success") {
- toast.success("Connection Successful", {
- description: result.message,
- });
- } else {
- toast.error("Connection Failed", {
- description: result.message,
- });
- }
-
+ setTestResult(result);
setIsTesting(false);
};
@@ -153,17 +148,82 @@ export const MCPConnectForm: FC = ({ onSubmit, isSubmitting })
+ {/* Test Connection */}
+
+ {/* Test Result */}
+ {testResult && (
+
+ {testResult.status === "success" ? (
+
+ ) : (
+
+ )}
+
+
+
+ {testResult.status === "success" ? "Connection Successful" : "Connection Failed"}
+
+ {testResult.tools.length > 0 && (
+
+ )}
+
+
+ {testResult.message}
+ {showDetails && testResult.tools.length > 0 && (
+
+
+ Available tools:
+
+
+ {testResult.tools.map((tool) => (
+ - {tool.name}
+ ))}
+
+
+ )}
+
+
+
+ )}
diff --git a/surfsense_web/components/assistant-ui/connector-popup/connector-configs/components/mcp-config.tsx b/surfsense_web/components/assistant-ui/connector-popup/connector-configs/components/mcp-config.tsx
index 3e306f303..f7ca114ca 100644
--- a/surfsense_web/components/assistant-ui/connector-popup/connector-configs/components/mcp-config.tsx
+++ b/surfsense_web/components/assistant-ui/connector-popup/connector-configs/components/mcp-config.tsx
@@ -176,7 +176,7 @@ export const MCPConfig: FC = ({ connector, onConfigChange, onNam
variant="secondary"
className="w-full h-8 text-[13px] px-3 rounded-lg font-medium bg-white text-slate-700 hover:bg-slate-50 border-0 shadow-xs dark:bg-secondary dark:text-secondary-foreground dark:hover:bg-secondary/80"
>
- {isTesting ? "Testing Connection..." : "Test Connection"}
+ {isTesting ? "Testing Connection" : "Test Connection"}