diff --git a/bin/cli.js b/bin/cli.js index 1a11b760c..1d648802a 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" ? "" : `?proxyPort=${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..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,7 +196,7 @@ const App = () => { }, [args]); useEffect(() => { - fetch("http://localhost:3000/config") + fetch(`${PROXY_SERVER_URL}/config`) .then((response) => response.json()) .then((data) => { setEnv(data.defaultEnvironment); @@ -404,7 +409,7 @@ const App = () => { }, ); - const backendUrl = new URL("http://localhost:3000/sse"); + const backendUrl = new URL(`${PROXY_SERVER_URL}/sse`); backendUrl.searchParams.append("transportType", transportType); if (transportType === "stdio") { @@ -412,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); @@ -469,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)} />
)}