feat(client): initialize via search params

Author: kentcdodds

README.md

@@ -93,6 +93,16 @@ Example server configuration file:
 }
 ```
 
+You can also set the initial `transport` type, `serverUrl`, `serverCommand`, and `serverArgs` via query params, for example:
+
+```
+http://localhost:6274/?transport=sse&serverUrl=http://localhost:8787/sse
+http://localhost:6274/?transport=streamable-http&serverUrl=http://localhost:8787/mcp
+http://localhost:6274/?transport=stdio&serverCommand=npx&serverArgs=arg1%20arg2
+```
+
+Note that if both the query param and the corresponding localStorage item are set, the query param will take precedence.
+
 ### From this repository
 
 If you're working on the inspector itself:

client/src/App.tsx

@@ -51,7 +51,13 @@ import Sidebar from "./components/Sidebar";
 import ToolsTab from "./components/ToolsTab";
 import { DEFAULT_INSPECTOR_CONFIG } from "./lib/constants";
 import { InspectorConfig } from "./lib/configurationTypes";
-import { getMCPProxyAddress } from "./utils/configUtils";
+import {
+  getMCPProxyAddress,
+  getInitialSseUrl,
+  getInitialTransportType,
+  getInitialCommand,
+  getInitialArgs,
+} from "./utils/configUtils";
 
 const CONFIG_LOCAL_STORAGE_KEY = "inspectorConfig_v1";
 
@@ -71,26 +77,13 @@ const App = () => {
     prompts: null,
     tools: null,
   });
-  const [command, setCommand] = useState<string>(() => {
-    return localStorage.getItem("lastCommand") || "mcp-server-everything";
-  });
-  const [args, setArgs] = useState<string>(() => {
-    return localStorage.getItem("lastArgs") || "";
-  });
+  const [command, setCommand] = useState<string>(getInitialCommand);
+  const [args, setArgs] = useState<string>(getInitialArgs);
 
-  const [sseUrl, setSseUrl] = useState<string>(() => {
-    return localStorage.getItem("lastSseUrl") || "http://localhost:3001/sse";
-  });
+  const [sseUrl, setSseUrl] = useState<string>(getInitialSseUrl);
   const [transportType, setTransportType] = useState<
     "stdio" | "sse" | "streamable-http"
-  >(() => {
-    return (
-      (localStorage.getItem("lastTransportType") as
-        | "stdio"
-        | "sse"
-        | "streamable-http") || "stdio"
-    );
-  });
+  >(getInitialTransportType);
   const [logLevel, setLogLevel] = useState<LoggingLevel>("debug");
   const [notifications, setNotifications] = useState<ServerNotification[]>([]);
   const [stdErrNotifications, setStdErrNotifications] = useState<

client/src/utils/configUtils.ts

@@ -24,3 +24,46 @@ export const getMCPServerRequestMaxTotalTimeout = (
 ): number => {
   return config.MCP_REQUEST_MAX_TOTAL_TIMEOUT.value as number;
 };
+
+const getSearchParam = (key: string): string | null => {
+  try {
+    const url = new URL(window.location.href);
+    return url.searchParams.get(key);
+  } catch {
+    return null;
+  }
+};
+
+export const getInitialTransportType = ():
+  | "stdio"
+  | "sse"
+  | "streamable-http" => {
+  const param = getSearchParam("transport");
+  if (param === "stdio" || param === "sse" || param === "streamable-http") {
+    return param;
+  }
+  return (
+    (localStorage.getItem("lastTransportType") as
+      | "stdio"
+      | "sse"
+      | "streamable-http") || "stdio"
+  );
+};
+
+export const getInitialSseUrl = (): string => {
+  const param = getSearchParam("serverUrl");
+  if (param) return param;
+  return localStorage.getItem("lastSseUrl") || "http://localhost:3001/sse";
+};
+
+export const getInitialCommand = (): string => {
+  const param = getSearchParam("serverCommand");
+  if (param) return param;
+  return localStorage.getItem("lastCommand") || "mcp-server-everything";
+};
+
+export const getInitialArgs = (): string => {
+  const param = getSearchParam("serverArgs");
+  if (param) return param;
+  return localStorage.getItem("lastArgs") || "";
+};