From a3d542c0a3e36bd78f1dd5033fc66c227f15f15c Mon Sep 17 00:00:00 2001 From: Ashwin Bhat Date: Tue, 26 Nov 2024 13:12:45 -0500 Subject: [PATCH 1/2] make server port configurable via URL query param --- bin/cli.js | 3 ++- client/src/App.tsx | 9 +++++++-- 2 files changed, 9 insertions(+), 3 deletions(-) diff --git a/bin/cli.js b/bin/cli.js index 1a11b760c..62513a053 100755 --- a/bin/cli.js +++ b/bin/cli.js @@ -61,8 +61,9 @@ async function main() { // Make sure our server/client didn't immediately fail await Promise.any([server, client, delay(2 * 1000)]); + const portParam = SERVER_PORT === "3000" ? "" : `?port=${SERVER_PORT}`; console.log( - `\nšŸ” MCP Inspector is up and running at http://localhost:${CLIENT_PORT} šŸš€`, + `\nšŸ” MCP Inspector is up and running at http://localhost:${CLIENT_PORT}${portParam} šŸš€`, ); try { diff --git a/client/src/App.tsx b/client/src/App.tsx index c881869a4..312be8fb7 100644 --- a/client/src/App.tsx +++ b/client/src/App.tsx @@ -191,7 +191,10 @@ const App = () => { }, [args]); useEffect(() => { - fetch("http://localhost:3000/config") + const params = new URLSearchParams(window.location.search); + const serverPort = params.get('port') || '3000'; + + fetch(`http://localhost:${serverPort}/config`) .then((response) => response.json()) .then((data) => { setEnv(data.defaultEnvironment); @@ -404,7 +407,9 @@ const App = () => { }, ); - const backendUrl = new URL("http://localhost:3000/sse"); + const params = new URLSearchParams(window.location.search); + const serverPort = params.get('port') || '3000'; + const backendUrl = new URL(`http://localhost:${serverPort}/sse`); backendUrl.searchParams.append("transportType", transportType); if (transportType === "stdio") { From f876b1ec0d35d74701e8b3c37cd43e56c8ed25e2 Mon Sep 17 00:00:00 2001 From: Ashwin Bhat Date: Tue, 26 Nov 2024 13:27:13 -0500 Subject: [PATCH 2/2] consolidate server URL configuration --- bin/cli.js | 2 +- client/src/App.tsx | 22 +++++++++++----------- client/src/components/Sidebar.tsx | 13 +++++++------ 3 files changed, 19 insertions(+), 18 deletions(-) diff --git a/bin/cli.js b/bin/cli.js index 62513a053..1d648802a 100755 --- a/bin/cli.js +++ b/bin/cli.js @@ -61,7 +61,7 @@ async function main() { // Make sure our server/client didn't immediately fail await Promise.any([server, client, delay(2 * 1000)]); - const portParam = SERVER_PORT === "3000" ? "" : `?port=${SERVER_PORT}`; + const portParam = SERVER_PORT === "3000" ? "" : `?proxyPort=${SERVER_PORT}`; console.log( `\nšŸ” MCP Inspector is up and running at http://localhost:${CLIENT_PORT}${portParam} šŸš€`, ); diff --git a/client/src/App.tsx b/client/src/App.tsx index 312be8fb7..81ce70a3b 100644 --- a/client/src/App.tsx +++ b/client/src/App.tsx @@ -57,6 +57,10 @@ import ToolsTab from "./components/ToolsTab"; const DEFAULT_REQUEST_TIMEOUT_MSEC = 10000; +const params = new URLSearchParams(window.location.search); +const PROXY_PORT = params.get("proxyPort") ?? "3000"; +const PROXY_SERVER_URL = `http://localhost:${PROXY_PORT}`; + const App = () => { const [connectionStatus, setConnectionStatus] = useState< "disconnected" | "connected" | "error" @@ -82,7 +86,8 @@ const App = () => { const [args, setArgs] = useState(() => { return localStorage.getItem("lastArgs") || ""; }); - const [url, setUrl] = useState("http://localhost:3001/sse"); + + const [sseUrl, setSseUrl] = useState("http://localhost:3001/sse"); const [transportType, setTransportType] = useState<"stdio" | "sse">("stdio"); const [requestHistory, setRequestHistory] = useState< { request: string; response?: string }[] @@ -191,10 +196,7 @@ const App = () => { }, [args]); useEffect(() => { - const params = new URLSearchParams(window.location.search); - const serverPort = params.get('port') || '3000'; - - fetch(`http://localhost:${serverPort}/config`) + fetch(`${PROXY_SERVER_URL}/config`) .then((response) => response.json()) .then((data) => { setEnv(data.defaultEnvironment); @@ -407,9 +409,7 @@ const App = () => { }, ); - const params = new URLSearchParams(window.location.search); - const serverPort = params.get('port') || '3000'; - const backendUrl = new URL(`http://localhost:${serverPort}/sse`); + const backendUrl = new URL(`${PROXY_SERVER_URL}/sse`); backendUrl.searchParams.append("transportType", transportType); if (transportType === "stdio") { @@ -417,7 +417,7 @@ const App = () => { backendUrl.searchParams.append("args", args); backendUrl.searchParams.append("env", JSON.stringify(env)); } else { - backendUrl.searchParams.append("url", url); + backendUrl.searchParams.append("url", sseUrl); } const clientTransport = new SSEClientTransport(backendUrl); @@ -474,8 +474,8 @@ const App = () => { setCommand={setCommand} args={args} setArgs={setArgs} - url={url} - setUrl={setUrl} + sseUrl={sseUrl} + setSseUrl={setSseUrl} env={env} setEnv={setEnv} onConnect={connectMcpServer} diff --git a/client/src/components/Sidebar.tsx b/client/src/components/Sidebar.tsx index acbb7d8bf..9e9428e67 100644 --- a/client/src/components/Sidebar.tsx +++ b/client/src/components/Sidebar.tsx @@ -22,8 +22,8 @@ interface SidebarProps { setCommand: (command: string) => void; args: string; setArgs: (args: string) => void; - url: string; - setUrl: (url: string) => void; + sseUrl: string; + setSseUrl: (url: string) => void; env: Record; setEnv: (env: Record) => void; onConnect: () => void; @@ -38,8 +38,8 @@ const Sidebar = ({ setCommand, args, setArgs, - url, - setUrl, + sseUrl, + setSseUrl, env, setEnv, onConnect, @@ -75,6 +75,7 @@ const Sidebar = ({ + {transportType === "stdio" ? ( <>
@@ -99,8 +100,8 @@ const Sidebar = ({ setUrl(e.target.value)} + value={sseUrl} + onChange={(e) => setSseUrl(e.target.value)} />
)}