diff --git a/README.md b/README.md index b312f71..21b51a7 100644 --- a/README.md +++ b/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: diff --git a/client/src/App.tsx b/client/src/App.tsx index d990db5..7e6a986 100644 --- a/client/src/App.tsx +++ b/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(() => { - return localStorage.getItem("lastCommand") || "mcp-server-everything"; - }); - const [args, setArgs] = useState(() => { - return localStorage.getItem("lastArgs") || ""; - }); + const [command, setCommand] = useState(getInitialCommand); + const [args, setArgs] = useState(getInitialArgs); - const [sseUrl, setSseUrl] = useState(() => { - return localStorage.getItem("lastSseUrl") || "http://localhost:3001/sse"; - }); + const [sseUrl, setSseUrl] = useState(getInitialSseUrl); const [transportType, setTransportType] = useState< "stdio" | "sse" | "streamable-http" - >(() => { - return ( - (localStorage.getItem("lastTransportType") as - | "stdio" - | "sse" - | "streamable-http") || "stdio" - ); - }); + >(getInitialTransportType); const [logLevel, setLogLevel] = useState("debug"); const [notifications, setNotifications] = useState([]); const [stdErrNotifications, setStdErrNotifications] = useState< diff --git a/client/src/utils/configUtils.ts b/client/src/utils/configUtils.ts index 86e1643..ef9bf38 100644 --- a/client/src/utils/configUtils.ts +++ b/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") || ""; +};