Skip to content

draft: add support for passing SSE host and port to the inspector #133

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
Guro wants to merge 2 commits into from
Closed

draft: add support for passing SSE host and port to the inspector #133

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
b19e7b1
add support for passing SSE host and port
Guro Jan 23, 2025
0af2e30
select SSE by default if seeHostPort was passed
Guro Jan 23, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 12 additions & 2 deletions bin/cli.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,6 +57,7 @@ async function main() {

const CLIENT_PORT = process.env.CLIENT_PORT ?? "5173";
const SERVER_PORT = process.env.SERVER_PORT ?? "3000";
const SSE_HOSTPORT = process.env.SSE_HOSTPORT;

console.log("Starting MCP inspector...");

Expand All @@ -79,6 +80,7 @@ async function main() {
env: {
...process.env,
PORT: SERVER_PORT,
SSE_HOSTPORT: SSE_HOSTPORT,
MCP_ENV_VARS: JSON.stringify(envVars),
},
signal: abort.signal,
Expand All @@ -94,9 +96,17 @@ 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}`;
const params = new URLSearchParams();
if (SERVER_PORT !== "3000") {
params.set("proxyPort", SERVER_PORT);
}
if (SSE_HOSTPORT) {
params.set("sseHostPort", SSE_HOSTPORT);
}
const queryString = params.toString() ? `?${params.toString()}` : "";

console.log(
`\n🔍 MCP Inspector is up and running at http://localhost:${CLIENT_PORT}${portParam} 🚀`,
`\n🔍 MCP Inspector is up and running at http://localhost:${CLIENT_PORT}${queryString} 🚀`,
);

try {
Expand Down
10 changes: 8 additions & 2 deletions client/src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,10 @@ const params = new URLSearchParams(window.location.search);
const PROXY_PORT = params.get("proxyPort") ?? "3000";
const PROXY_SERVER_URL = `http://localhost:${PROXY_PORT}`;

const sseParam = params.get("sseHostPort");
const SSE_HOST_PORT = sseParam ?? "localhost:3001";
const SSE_SERVER_URL = `http://${SSE_HOST_PORT}`;

const App = () => {
const [resources, setResources] = useState<Resource[]>([]);
const [resourceTemplates, setResourceTemplates] = useState<
Expand All @@ -71,8 +75,10 @@ const App = () => {
return localStorage.getItem("lastArgs") || "";
});

const [sseUrl, setSseUrl] = useState<string>("http://localhost:3001/sse");
const [transportType, setTransportType] = useState<"stdio" | "sse">("stdio");
const [sseUrl, setSseUrl] = useState<string>(SSE_SERVER_URL);
const [transportType, setTransportType] = useState<"stdio" | "sse">(
sseParam ? "sse" : "stdio",
);
const [notifications, setNotifications] = useState<ServerNotification[]>([]);
const [stdErrNotifications, setStdErrNotifications] = useState<
StdErrNotification[]
Expand Down