diff --git a/README.md b/README.md index 98b4a616..98b57047 100644 --- a/README.md +++ b/README.md @@ -21,10 +21,13 @@ You can pass both arguments and environment variables to your MCP server. Argume npx @modelcontextprotocol/inspector build/index.js arg1 arg2 # Pass environment variables only -npx @modelcontextprotocol/inspector -e KEY=value -e KEY2=value2 build/index.js +npx @modelcontextprotocol/inspector -e KEY=value -e KEY2=$VALUE2 build/index.js # Pass both environment variables and arguments -npx @modelcontextprotocol/inspector -e KEY=value -e KEY2=value2 build/index.js arg1 arg2 +npx @modelcontextprotocol/inspector -e KEY=value -e KEY2=$VALUE2 build/index.js arg1 arg2 + +# Use -- to separate inspector flags from server arguments +npx @modelcontextprotocol/inspector -e KEY=$VALUE -- build/index.js -e server-flag ``` The inspector runs both a client UI (default port 5173) and an MCP proxy server (default port 3000). Open the client UI in your browser to use the inspector. You can customize the ports if needed: diff --git a/bin/cli.js b/bin/cli.js index 96951383..94348fbc 100755 --- a/bin/cli.js +++ b/bin/cli.js @@ -16,17 +16,25 @@ async function main() { const envVars = {}; const mcpServerArgs = []; let command = null; + let parsingFlags = true; for (let i = 0; i < args.length; i++) { - if (args[i] === "-e" && i + 1 < args.length) { + const arg = args[i]; + + if (parsingFlags && arg === "--") { + parsingFlags = false; + continue; + } + + if (parsingFlags && arg === "-e" && i + 1 < args.length) { const [key, value] = args[++i].split("="); if (key && value) { envVars[key] = value; } } else if (!command) { - command = args[i]; + command = arg; } else { - mcpServerArgs.push(args[i]); + mcpServerArgs.push(arg); } } diff --git a/client/src/components/Sidebar.tsx b/client/src/components/Sidebar.tsx index bdd817f6..f70335e8 100644 --- a/client/src/components/Sidebar.tsx +++ b/client/src/components/Sidebar.tsx @@ -56,7 +56,7 @@ const Sidebar = ({ }: SidebarProps) => { const [theme, setTheme] = useTheme(); const [showEnvVars, setShowEnvVars] = useState(false); - const [shownEnvVars, setShownEnvVars] = useState>({}); + const [shownEnvVars, setShownEnvVars] = useState>(new Set()); return (
@@ -149,8 +149,12 @@ const Sidebar = ({ newEnv[newKey] = value; setEnv(newEnv); setShownEnvVars((prev) => { - const { [key]: shown, ...rest } = prev; - return shown ? { ...rest, [newKey]: true } : rest; + const next = new Set(prev); + if (next.has(key)) { + next.delete(key); + next.add(newKey); + } + return next; }); }} className="font-mono" @@ -170,7 +174,7 @@ const Sidebar = ({
{ @@ -185,16 +189,24 @@ const Sidebar = ({ size="icon" className="h-9 w-9 p-0 shrink-0" onClick={() => { - setShownEnvVars((prev) => ({ - ...prev, - [key]: !prev[key], - })); + setShownEnvVars((prev) => { + const next = new Set(prev); + if (next.has(key)) { + next.delete(key); + } else { + next.add(key); + } + return next; + }); }} + aria-label={shownEnvVars.has(key) ? "Hide value" : "Show value"} + aria-pressed={shownEnvVars.has(key)} + title={shownEnvVars.has(key) ? "Hide value" : "Show value"} > - {shownEnvVars[key] ? ( - + {shownEnvVars.has(key) ? ( +
@@ -208,7 +220,6 @@ const Sidebar = ({ const newEnv = { ...env }; newEnv[key] = ""; setEnv(newEnv); - setShownEnvVars({}); }} > Add Environment Variable