Add MCP proxy address config support, better error messages

2025-04-01 17:35:25 +05:30
parent fa7f9c80cd
commit 51c7eda6a6
12 changed files with 483 additions and 87 deletions
--- a/client/package.json
+++ b/client/package.json
@@ -32,6 +32,7 @@
    "@radix-ui/react-select": "^2.1.2",
    "@radix-ui/react-slot": "^1.1.0",
    "@radix-ui/react-tabs": "^1.1.1",
+    "@radix-ui/react-tooltip": "^1.1.8",
    "@types/prismjs": "^1.26.5",
    "class-variance-authority": "^0.7.0",
    "clsx": "^2.1.1",
--- a/client/src/App.tsx
+++ b/client/src/App.tsx
@@ -20,7 +20,6 @@ import {
 import React, { Suspense, useEffect, useRef, useState } from "react";
 import { useConnection } from "./lib/hooks/useConnection";
 import { useDraggablePane } from "./lib/hooks/useDraggablePane";
-
 import { StdErrNotification } from "./lib/notificationTypes";

 import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
@@ -47,10 +46,12 @@ import Sidebar from "./components/Sidebar";
 import ToolsTab from "./components/ToolsTab";
 import { DEFAULT_INSPECTOR_CONFIG } from "./lib/constants";
 import { InspectorConfig } from "./lib/configurationTypes";
+import {
+  getMCPProxyAddress,
+  getMCPServerRequestTimeout,
+} from "./utils/configUtils";

 const params = new URLSearchParams(window.location.search);
-const PROXY_PORT = params.get("proxyPort") ?? "6277";
-const PROXY_SERVER_URL = `http://${window.location.hostname}:${PROXY_PORT}`;
 const CONFIG_LOCAL_STORAGE_KEY = "inspectorConfig_v1";

 const App = () => {
@@ -95,7 +96,13 @@ const App = () => {

  const [config, setConfig] = useState<InspectorConfig>(() => {
    const savedConfig = localStorage.getItem(CONFIG_LOCAL_STORAGE_KEY);
-    return savedConfig ? JSON.parse(savedConfig) : DEFAULT_INSPECTOR_CONFIG;
+    if (savedConfig) {
+      return {
+        ...DEFAULT_INSPECTOR_CONFIG,
+        ...JSON.parse(savedConfig),
+      } as InspectorConfig;
+    }
+    return DEFAULT_INSPECTOR_CONFIG;
  });
  const [bearerToken, setBearerToken] = useState<string>(() => {
    return localStorage.getItem("lastBearerToken") || "";
@@ -152,8 +159,8 @@ const App = () => {
    sseUrl,
    env,
    bearerToken,
-    proxyServerUrl: PROXY_SERVER_URL,
-    requestTimeout: config.MCP_SERVER_REQUEST_TIMEOUT.value as number,
+    proxyServerUrl: getMCPProxyAddress(config),
+    requestTimeout: getMCPServerRequestTimeout(config),
    onNotification: (notification) => {
      setNotifications((prev) => [...prev, notification as ServerNotification]);
    },
@@ -214,7 +221,7 @@ const App = () => {
  }, [connectMcpServer]);

  useEffect(() => {
-    fetch(`${PROXY_SERVER_URL}/config`)
+    fetch(`${getMCPProxyAddress(config)}/config`)
      .then((response) => response.json())
      .then((data) => {
        setEnv(data.defaultEnvironment);
@@ -228,6 +235,7 @@ const App = () => {
      .catch((error) =>
        console.error("Error fetching default environment:", error),
      );
+    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  useEffect(() => {
--- a/client/src/components/Sidebar.tsx
+++ b/client/src/components/Sidebar.tsx
@@ -10,6 +10,7 @@ import {
  EyeOff,
  RotateCcw,
  Settings,
+  HelpCircle,
 } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
@@ -26,12 +27,17 @@ import {
  LoggingLevelSchema,
 } from "@modelcontextprotocol/sdk/types.js";
 import { InspectorConfig } from "@/lib/configurationTypes";
-
+import { ConnectionStatus } from "@/lib/constants";
 import useTheme from "../lib/useTheme";
 import { version } from "../../../package.json";
+import {
+  Tooltip,
+  TooltipTrigger,
+  TooltipContent,
+} from "@/components/ui/tooltip";

 interface SidebarProps {
-  connectionStatus: "disconnected" | "connected" | "error";
+  connectionStatus: ConnectionStatus;
  transportType: "stdio" | "sse";
  setTransportType: (type: "stdio" | "sse") => void;
  command: string;
@@ -177,6 +183,7 @@ const Sidebar = ({
                variant="outline"
                onClick={() => setShowEnvVars(!showEnvVars)}
                className="flex items-center w-full"
+                data-testid="env-vars-button"
              >
                {showEnvVars ? (
                  <ChevronDown className="w-4 h-4 mr-2" />
@@ -298,6 +305,7 @@ const Sidebar = ({
              variant="outline"
              onClick={() => setShowConfig(!showConfig)}
              className="flex items-center w-full"
+              data-testid="config-button"
            >
              {showConfig ? (
                <ChevronDown className="w-4 h-4 mr-2" />
@@ -313,9 +321,19 @@ const Sidebar = ({
                  const configKey = key as keyof InspectorConfig;
                  return (
                    <div key={key} className="space-y-2">
-                      <label className="text-sm font-medium">
-                        {configItem.description}
-                      </label>
+                      <div className="flex items-center gap-1">
+                        <label className="text-sm font-medium text-green-600">
+                          {configKey}
+                        </label>
+                        <Tooltip>
+                          <TooltipTrigger asChild>
+                            <HelpCircle className="h-4 w-4 text-muted-foreground" />
+                          </TooltipTrigger>
+                          <TooltipContent>
+                            {configItem.description}
+                          </TooltipContent>
+                        </Tooltip>
+                      </div>
                      {typeof configItem.value === "number" ? (
                        <Input
                          type="number"
@@ -375,7 +393,11 @@ const Sidebar = ({
          </div>

          <div className="space-y-2">
-            <Button className="w-full" onClick={onConnect}>
+            <Button
+              data-testid="connect-button"
+              className="w-full"
+              onClick={onConnect}
+            >
              {connectionStatus === "connected" ? (
                <>
                  <RotateCcw className="w-4 h-4 mr-2" />
@@ -391,20 +413,32 @@ const Sidebar = ({

            <div className="flex items-center justify-center space-x-2 mb-4">
              <div
-                className={`w-2 h-2 rounded-full ${
-                  connectionStatus === "connected"
-                    ? "bg-green-500"
-                    : connectionStatus === "error"
-                      ? "bg-red-500"
-                      : "bg-gray-500"
-                }`}
+                className={`w-2 h-2 rounded-full ${(() => {
+                  switch (connectionStatus) {
+                    case "connected":
+                      return "bg-green-500";
+                    case "error":
+                      return "bg-red-500";
+                    case "error-connecting-to-proxy":
+                      return "bg-red-500";
+                    default:
+                      return "bg-gray-500";
+                  }
+                })()}`}
              />
              <span className="text-sm text-gray-600">
-                {connectionStatus === "connected"
-                  ? "Connected"
-                  : connectionStatus === "error"
-                    ? "Connection Error"
-                    : "Disconnected"}
+                {(() => {
+                  switch (connectionStatus) {
+                    case "connected":
+                      return "Connected";
+                    case "error":
+                      return "Connection Error, is your MCP server running?";
+                    case "error-connecting-to-proxy":
+                      return "Error Connecting to MCP Inspector Proxy - Check Console logs";
+                    default:
+                      return "Disconnected";
+                  }
+                })()}
              </span>
            </div>

--- a/client/src/components/tests/Sidebar.test.tsx
+++ b/client/src/components/tests/Sidebar.test.tsx
@@ -1,8 +1,9 @@
 import { render, screen, fireEvent } from "@testing-library/react";
 import { describe, it, beforeEach, jest } from "@jest/globals";
 import Sidebar from "../Sidebar";
-import { DEFAULT_INSPECTOR_CONFIG } from "../../lib/constants";
-import { InspectorConfig } from "../../lib/configurationTypes";
+import { DEFAULT_INSPECTOR_CONFIG } from "@/lib/constants";
+import { InspectorConfig } from "@/lib/configurationTypes";
+import { TooltipProvider } from "@/components/ui/tooltip";

 // Mock theme hook
 jest.mock("../../lib/useTheme", () => ({
@@ -35,11 +36,15 @@ describe("Sidebar Environment Variables", () => {
  };

  const renderSidebar = (props = {}) => {
-    return render(<Sidebar {...defaultProps} {...props} />);
+    return render(
+      <TooltipProvider>
+        <Sidebar {...defaultProps} {...props} />
+      </TooltipProvider>,
+    );
  };

  const openEnvVarsSection = () => {
-    const button = screen.getByText("Environment Variables");
+    const button = screen.getByTestId("env-vars-button");
    fireEvent.click(button);
  };

@@ -215,7 +220,11 @@ describe("Sidebar Environment Variables", () => {
      const updatedEnv = setEnv.mock.calls[0][0] as Record<string, string>;

      // Rerender with the updated env
-      rerender(<Sidebar {...defaultProps} env={updatedEnv} setEnv={setEnv} />);
+      rerender(
+        <TooltipProvider>
+          <Sidebar {...defaultProps} env={updatedEnv} setEnv={setEnv} />
+        </TooltipProvider>,
+      );

      // Second key edit
      const secondKeyInput = screen.getByDisplayValue("SECOND_KEY");
@@ -246,7 +255,11 @@ describe("Sidebar Environment Variables", () => {
      fireEvent.change(keyInput, { target: { value: "NEW_KEY" } });

      // Rerender with updated env
-      rerender(<Sidebar {...defaultProps} env={{ NEW_KEY: "test_value" }} />);
+      rerender(
+        <TooltipProvider>
+          <Sidebar {...defaultProps} env={{ NEW_KEY: "test_value" }} />
+        </TooltipProvider>,
+      );

      // Value should still be visible
      const updatedValueInput = screen.getByDisplayValue("test_value");
@@ -311,7 +324,7 @@ describe("Sidebar Environment Variables", () => {

  describe("Configuration Operations", () => {
    const openConfigSection = () => {
-      const button = screen.getByText("Configuration");
+      const button = screen.getByTestId("config-button");
      fireEvent.click(button);
    };

@@ -326,12 +339,14 @@ describe("Sidebar Environment Variables", () => {
      );
      fireEvent.change(timeoutInput, { target: { value: "5000" } });

-      expect(setConfig).toHaveBeenCalledWith({
-        MCP_SERVER_REQUEST_TIMEOUT: {
-          description: "Timeout for requests to the MCP server (ms)",
-          value: 5000,
-        },
-      });
+      expect(setConfig).toHaveBeenCalledWith(
+        expect.objectContaining({
+          MCP_SERVER_REQUEST_TIMEOUT: {
+            description: "Timeout for requests to the MCP server (ms)",
+            value: 5000,
+          },
+        }),
+      );
    });

    it("should handle invalid timeout values entered by user", () => {
@@ -345,12 +360,14 @@ describe("Sidebar Environment Variables", () => {
      );
      fireEvent.change(timeoutInput, { target: { value: "abc1" } });

-      expect(setConfig).toHaveBeenCalledWith({
-        MCP_SERVER_REQUEST_TIMEOUT: {
-          description: "Timeout for requests to the MCP server (ms)",
-          value: 0,
-        },
-      });
+      expect(setConfig).toHaveBeenCalledWith(
+        expect.objectContaining({
+          MCP_SERVER_REQUEST_TIMEOUT: {
+            description: "Timeout for requests to the MCP server (ms)",
+            value: 0,
+          },
+        }),
+      );
    });

    it("should maintain configuration state after multiple updates", () => {
@@ -361,7 +378,6 @@ describe("Sidebar Environment Variables", () => {
      });

      openConfigSection();
-
      // First update
      const timeoutInput = screen.getByTestId(
        "MCP_SERVER_REQUEST_TIMEOUT-input",
@@ -373,11 +389,13 @@ describe("Sidebar Environment Variables", () => {

      // Rerender with the updated config
      rerender(
-        <Sidebar
-          {...defaultProps}
-          config={updatedConfig}
-          setConfig={setConfig}
-        />,
+        <TooltipProvider>
+          <Sidebar
+            {...defaultProps}
+            config={updatedConfig}
+            setConfig={setConfig}
+          />
+        </TooltipProvider>,
      );

      // Second update
@@ -387,12 +405,14 @@ describe("Sidebar Environment Variables", () => {
      fireEvent.change(updatedTimeoutInput, { target: { value: "3000" } });

      // Verify the final state matches what we expect
-      expect(setConfig).toHaveBeenLastCalledWith({
-        MCP_SERVER_REQUEST_TIMEOUT: {
-          description: "Timeout for requests to the MCP server (ms)",
-          value: 3000,
-        },
-      });
+      expect(setConfig).toHaveBeenLastCalledWith(
+        expect.objectContaining({
+          MCP_SERVER_REQUEST_TIMEOUT: {
+            description: "Timeout for requests to the MCP server (ms)",
+            value: 3000,
+          },
+        }),
+      );
    });
  });
 });
--- a/client/src/components/ui/tooltip.tsx
+++ b/client/src/components/ui/tooltip.tsx
@@ -0,0 +1,30 @@
+"use client";
+
+import * as React from "react";
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+
+import { cn } from "@/lib/utils";
+
+const TooltipProvider = TooltipPrimitive.Provider;
+
+const Tooltip = TooltipPrimitive.Root;
+
+const TooltipTrigger = TooltipPrimitive.Trigger;
+
+const TooltipContent = React.forwardRef<
+  React.ElementRef<typeof TooltipPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <TooltipPrimitive.Content
+    ref={ref}
+    sideOffset={sideOffset}
+    className={cn(
+      "z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-tooltip-content-transform-origin]",
+      className,
+    )}
+    {...props}
+  />
+));
+TooltipContent.displayName = TooltipPrimitive.Content.displayName;
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };
--- a/client/src/lib/configurationTypes.ts
+++ b/client/src/lib/configurationTypes.ts
@@ -15,4 +15,5 @@ export type InspectorConfig = {
   * Maximum time in milliseconds to wait for a response from the MCP server before timing out.
   */
  MCP_SERVER_REQUEST_TIMEOUT: ConfigItem;
+  MCP_PROXY_FULL_ADDRESS: ConfigItem;
 };
--- a/client/src/lib/constants.ts
+++ b/client/src/lib/constants.ts
@@ -8,9 +8,26 @@ export const SESSION_KEYS = {
  CLIENT_INFORMATION: "mcp_client_information",
 } as const;

+export type ConnectionStatus =
+  | "disconnected"
+  | "connected"
+  | "error"
+  | "error-connecting-to-proxy";
+
+export const DEFAULT_MCP_PROXY_LISTEN_PORT = "6277";
+
+/**
+ * Default configuration for the MCP Inspector, Currently persisted in local_storage in the Browser.
+ * Future plans: Provide json config file + Browser local_storage to override default values
+ **/
 export const DEFAULT_INSPECTOR_CONFIG: InspectorConfig = {
  MCP_SERVER_REQUEST_TIMEOUT: {
    description: "Timeout for requests to the MCP server (ms)",
    value: 10000,
  },
+  MCP_PROXY_FULL_ADDRESS: {
+    description:
+      "Set this if you are running the MCP Inspector Proxy on a non-default address. Example: http://10.1.1.22:5577",
+    value: "",
+  },
 } as const;
--- a/client/src/lib/hooks/useConnection.ts
+++ b/client/src/lib/hooks/useConnection.ts
@@ -27,7 +27,7 @@ import {
 import { useState } from "react";
 import { toast } from "react-toastify";
 import { z } from "zod";
-import { SESSION_KEYS } from "../constants";
+import { ConnectionStatus, SESSION_KEYS } from "../constants";
 import { Notification, StdErrNotificationSchema } from "../notificationTypes";
 import { auth } from "@modelcontextprotocol/sdk/client/auth.js";
 import { authProvider } from "../auth";
@@ -70,9 +70,8 @@ export function useConnection({
  onPendingRequest,
  getRoots,
 }: UseConnectionOptions) {
-  const [connectionStatus, setConnectionStatus] = useState<
-    "disconnected" | "connected" | "error"
-  >("disconnected");
+  const [connectionStatus, setConnectionStatus] =
+    useState<ConnectionStatus>("disconnected");
  const [serverCapabilities, setServerCapabilities] =
    useState<ServerCapabilities | null>(null);
  const [mcpClient, setMcpClient] = useState<Client | null>(null);
@@ -193,6 +192,20 @@ export function useConnection({
    }
  };

+  const checkProxyHealth = async () => {
+    try {
+      const proxyHealthUrl = new URL(`${proxyServerUrl}/health`);
+      const proxyHealthResponse = await fetch(proxyHealthUrl);
+      const proxyHealth = await proxyHealthResponse.json();
+      if (proxyHealth?.status !== "ok") {
+        throw new Error("MCP Proxy Server is not healthy");
+      }
+    } catch (e) {
+      console.error("Couldn't connect to MCP Proxy Server", e);
+      throw e;
+    }
+  };
+
  const handleAuthError = async (error: unknown) => {
    if (error instanceof SseError && error.code === 401) {
      sessionStorage.setItem(SESSION_KEYS.SERVER_URL, sseUrl);
@@ -205,33 +218,39 @@ export function useConnection({
  };

  const connect = async (_e?: unknown, retryCount: number = 0) => {
-    try {
-      const client = new Client<Request, Notification, Result>(
-        {
-          name: "mcp-inspector",
-          version: packageJson.version,
-        },
-        {
-          capabilities: {
-            sampling: {},
-            roots: {
-              listChanged: true,
-            },
+    const client = new Client<Request, Notification, Result>(
+      {
+        name: "mcp-inspector",
+        version: packageJson.version,
+      },
+      {
+        capabilities: {
+          sampling: {},
+          roots: {
+            listChanged: true,
          },
        },
-      );
+      },
+    );

-      const backendUrl = new URL(`${proxyServerUrl}/sse`);
+    const mcpProxyServerUrl = new URL(`${proxyServerUrl}/sse`);
+    try {
+      await checkProxyHealth();
+    } catch {
+      setConnectionStatus("error-connecting-to-proxy");
+      return;
+    }

-      backendUrl.searchParams.append("transportType", transportType);
-      if (transportType === "stdio") {
-        backendUrl.searchParams.append("command", command);
-        backendUrl.searchParams.append("args", args);
-        backendUrl.searchParams.append("env", JSON.stringify(env));
-      } else {
-        backendUrl.searchParams.append("url", sseUrl);
-      }
+    mcpProxyServerUrl.searchParams.append("transportType", transportType);
+    if (transportType === "stdio") {
+      mcpProxyServerUrl.searchParams.append("command", command);
+      mcpProxyServerUrl.searchParams.append("args", args);
+      mcpProxyServerUrl.searchParams.append("env", JSON.stringify(env));
+    } else {
+      mcpProxyServerUrl.searchParams.append("url", sseUrl);
+    }

+    try {
      // Inject auth manually instead of using SSEClientTransport, because we're
      // proxying through the inspector server first.
      const headers: HeadersInit = {};
@@ -242,7 +261,7 @@ export function useConnection({
        headers["Authorization"] = `Bearer ${token}`;
      }

-      const clientTransport = new SSEClientTransport(backendUrl, {
+      const clientTransport = new SSEClientTransport(mcpProxyServerUrl, {
        eventSourceInit: {
          fetch: (url, init) => fetch(url, { ...init, headers }),
        },
@@ -282,7 +301,10 @@ export function useConnection({
      try {
        await client.connect(clientTransport);
      } catch (error) {
-        console.error("Failed to connect to MCP server:", error);
+        console.error(
+          `Failed to connect to MCP Server via the MCP Inspector Proxy: ${mcpProxyServerUrl}:`,
+          error,
+        );
        const shouldRetry = await handleAuthError(error);
        if (shouldRetry) {
          return connect(undefined, retryCount + 1);
--- a/client/src/main.tsx
+++ b/client/src/main.tsx
@@ -4,10 +4,13 @@ import { ToastContainer } from "react-toastify";
 import "react-toastify/dist/ReactToastify.css";
 import App from "./App.tsx";
 import "./index.css";
+import { TooltipProvider } from "./components/ui/tooltip.tsx";

 createRoot(document.getElementById("root")!).render(
  <StrictMode>
-    <App />
-    <ToastContainer />
+    <TooltipProvider>
+      <App />
+      <ToastContainer />
+    </TooltipProvider>
  </StrictMode>,
 );
--- a/client/src/utils/configUtils.ts
+++ b/client/src/utils/configUtils.ts
@@ -0,0 +1,14 @@
+import { InspectorConfig } from "@/lib/configurationTypes";
+import { DEFAULT_MCP_PROXY_LISTEN_PORT } from "@/lib/constants";
+
+export const getMCPProxyAddress = (config: InspectorConfig): string => {
+  const proxyFullAddress = config.MCP_PROXY_FULL_ADDRESS.value as string;
+  if (proxyFullAddress) {
+    return proxyFullAddress;
+  }
+  return `http://${window.location.hostname}:${DEFAULT_MCP_PROXY_LISTEN_PORT}`;
+};
+
+export const getMCPServerRequestTimeout = (config: InspectorConfig): number => {
+  return config.MCP_SERVER_REQUEST_TIMEOUT.value as number;
+};
--- a/package-lock.json
+++ b/package-lock.json
@@ -44,6 +44,7 @@
        "@radix-ui/react-select": "^2.1.2",
        "@radix-ui/react-slot": "^1.1.0",
        "@radix-ui/react-tabs": "^1.1.1",
+        "@radix-ui/react-tooltip": "^1.1.8",
        "@types/prismjs": "^1.26.5",
        "class-variance-authority": "^0.7.0",
        "clsx": "^2.1.1",
@@ -3383,6 +3384,244 @@
        }
      }
    },
+    "node_modules/@radix-ui/react-tooltip": {
+      "version": "1.1.8",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-tooltip/-/react-tooltip-1.1.8.tgz",
+      "integrity": "sha512-YAA2cu48EkJZdAMHC0dqo9kialOcRStbtiY4nJPaht7Ptrhcvpo+eDChaM6BIs8kL6a8Z5l5poiqLnXcNduOkA==",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.1",
+        "@radix-ui/react-compose-refs": "1.1.1",
+        "@radix-ui/react-context": "1.1.1",
+        "@radix-ui/react-dismissable-layer": "1.1.5",
+        "@radix-ui/react-id": "1.1.0",
+        "@radix-ui/react-popper": "1.2.2",
+        "@radix-ui/react-portal": "1.1.4",
+        "@radix-ui/react-presence": "1.1.2",
+        "@radix-ui/react-primitive": "2.0.2",
+        "@radix-ui/react-slot": "1.1.2",
+        "@radix-ui/react-use-controllable-state": "1.1.0",
+        "@radix-ui/react-visually-hidden": "1.1.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-tooltip/node_modules/@radix-ui/primitive": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.1.1.tgz",
+      "integrity": "sha512-SJ31y+Q/zAyShtXJc8x83i9TYdbAfHZ++tUZnvjJJqFjzsdUnKsxPL6IEtBlxKkU7yzer//GQtZSV4GbldL3YA=="
+    },
+    "node_modules/@radix-ui/react-tooltip/node_modules/@radix-ui/react-arrow": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-arrow/-/react-arrow-1.1.2.tgz",
+      "integrity": "sha512-G+KcpzXHq24iH0uGG/pF8LyzpFJYGD4RfLjCIBfGdSLXvjLHST31RUiRVrupIBMvIppMgSzQ6l66iAxl03tdlg==",
+      "dependencies": {
+        "@radix-ui/react-primitive": "2.0.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-tooltip/node_modules/@radix-ui/react-compose-refs": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.1.tgz",
+      "integrity": "sha512-Y9VzoRDSJtgFMUCoiZBDVo084VQ5hfpXxVE+NgkdNsjiDBByiImMZKKhxMwCbdHvhlENG6a833CbFkOQvTricw==",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-tooltip/node_modules/@radix-ui/react-dismissable-layer": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.1.5.tgz",
+      "integrity": "sha512-E4TywXY6UsXNRhFrECa5HAvE5/4BFcGyfTyK36gP+pAW1ed7UTK4vKwdr53gAJYwqbfCWC6ATvJa3J3R/9+Qrg==",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.1",
+        "@radix-ui/react-compose-refs": "1.1.1",
+        "@radix-ui/react-primitive": "2.0.2",
+        "@radix-ui/react-use-callback-ref": "1.1.0",
+        "@radix-ui/react-use-escape-keydown": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-tooltip/node_modules/@radix-ui/react-popper": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-popper/-/react-popper-1.2.2.tgz",
+      "integrity": "sha512-Rvqc3nOpwseCyj/rgjlJDYAgyfw7OC1tTkKn2ivhaMGcYt8FSBlahHOZak2i3QwkRXUXgGgzeEe2RuqeEHuHgA==",
+      "dependencies": {
+        "@floating-ui/react-dom": "^2.0.0",
+        "@radix-ui/react-arrow": "1.1.2",
+        "@radix-ui/react-compose-refs": "1.1.1",
+        "@radix-ui/react-context": "1.1.1",
+        "@radix-ui/react-primitive": "2.0.2",
+        "@radix-ui/react-use-callback-ref": "1.1.0",
+        "@radix-ui/react-use-layout-effect": "1.1.0",
+        "@radix-ui/react-use-rect": "1.1.0",
+        "@radix-ui/react-use-size": "1.1.0",
+        "@radix-ui/rect": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-tooltip/node_modules/@radix-ui/react-portal": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-portal/-/react-portal-1.1.4.tgz",
+      "integrity": "sha512-sn2O9k1rPFYVyKd5LAJfo96JlSGVFpa1fS6UuBJfrZadudiw5tAmru+n1x7aMRQ84qDM71Zh1+SzK5QwU0tJfA==",
+      "dependencies": {
+        "@radix-ui/react-primitive": "2.0.2",
+        "@radix-ui/react-use-layout-effect": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-tooltip/node_modules/@radix-ui/react-presence": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-presence/-/react-presence-1.1.2.tgz",
+      "integrity": "sha512-18TFr80t5EVgL9x1SwF/YGtfG+l0BS0PRAlCWBDoBEiDQjeKgnNZRVJp/oVBl24sr3Gbfwc/Qpj4OcWTQMsAEg==",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.1",
+        "@radix-ui/react-use-layout-effect": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-tooltip/node_modules/@radix-ui/react-primitive": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.0.2.tgz",
+      "integrity": "sha512-Ec/0d38EIuvDF+GZjcMU/Ze6MxntVJYO/fRlCPhCaVUyPY9WTalHJw54tp9sXeJo3tlShWpy41vQRgLRGOuz+w==",
+      "dependencies": {
+        "@radix-ui/react-slot": "1.1.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-tooltip/node_modules/@radix-ui/react-slot": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.1.2.tgz",
+      "integrity": "sha512-YAKxaiGsSQJ38VzKH86/BPRC4rh+b1Jpa+JneA5LRE7skmLPNAyeG8kPJj/oo4STLvlrs8vkf/iYyc3A5stYCQ==",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-tooltip/node_modules/@radix-ui/react-visually-hidden": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-visually-hidden/-/react-visually-hidden-1.1.2.tgz",
+      "integrity": "sha512-1SzA4ns2M1aRlvxErqhLHsBHoS5eI5UUcI2awAMgGUp4LoaoWOKYmvqDY2s/tltuPkh3Yk77YF/r3IRj+Amx4Q==",
+      "dependencies": {
+        "@radix-ui/react-primitive": "2.0.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
    "node_modules/@radix-ui/react-use-callback-ref": {
      "version": "1.1.0",
      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.1.0.tgz",
--- a/server/src/index.ts
+++ b/server/src/index.ts
@@ -38,7 +38,7 @@ app.use(cors());

 let webAppTransports: SSEServerTransport[] = [];

-const createTransport = async (req: express.Request) => {
+const createTransport = async (req: express.Request): Promise<Transport> => {
  const query = req.query;
  console.log("Query parameters:", query);

@@ -70,6 +70,7 @@ const createTransport = async (req: express.Request) => {
    const headers: HeadersInit = {
      Accept: "text/event-stream",
    };
+
    for (const key of SSE_HEADERS_PASSTHROUGH) {
      if (req.headers[key] === undefined) {
        continue;
@@ -172,6 +173,12 @@ app.post("/message", async (req, res) => {
  }
 });

+app.get("/health", (req, res) => {
+  res.json({
+    status: "ok",
+  });
+});
+
 app.get("/config", (req, res) => {
  try {
    res.json({