How to connect inspector to a locally developed TypeScript MCP server using SSE?

I have the following server:

import { McpServer, ResourceTemplate } from "@modelcontextprotocol/sdk/server/mcp.js";
import { SSEServerTransport } from "@modelcontextprotocol/sdk/server/sse.js";
import express from "express";
import { z } from "zod";

// Create an Express app
const app = express();

// Create an MCP server
const server = new McpServer({
  name: "Demo",
  version: "1.0.0"
});

// Add an addition tool
server.tool("add",
  { a: z.number(), b: z.number() },
  async ({ a, b }) => ({
    content: [{ type: "text", text: String(a + b) }]
  })
);

// Add a dynamic greeting resource
server.resource(
  "greeting",
  new ResourceTemplate("greeting://{name}", { list: undefined }),
  async (uri, { name }) => ({
    contents: [{
      uri: uri.href,
      text: `Hello, ${name}!`
    }]
  })
);

let transport: SSEServerTransport | null = null;

app.get("/sse", (req, res) => {
  transport = new SSEServerTransport("/messages", res);
  server.connect(transport);
});

app.post("/messages", (req, res) => {
  if (transport) {
    transport.handlePostMessage(req, res);
  }
});

app.listen(3001);

Which is an extension of the example server in the Typescript SDK repo.

I run the inspector with npx @modelcontextprotocol/inspector npm start -s src/index.ts and the UI comes up:

On clicking 'connect' I get a connection error in the UI, and on the console I have:

New SSE connection
Query parameters: { transportType: 'sse', url: 'http://localhost:3001/sse' }
SSE transport: url=http://localhost:3001/sse
Error in /sse route: Error: SSE error: {"type":"error","message":""}
    at _eventSource.onerror (file:///Users/antontroynikov/.npm/_npx/5a9d879542beca3a/node_modules/@modelcontextprotocol/sdk/dist/esm/client/sse.js:23:31)
    at EventSource.emit (node:events:518:28)
    at _emit (/Users/antontroynikov/.npm/_npx/5a9d879542beca3a/node_modules/eventsource/lib/eventsource.js:287:17)
    at onConnectionClosed (/Users/antontroynikov/.npm/_npx/5a9d879542beca3a/node_modules/eventsource/lib/eventsource.js:58:5)
    at ClientRequest.<anonymous> (/Users/antontroynikov/.npm/_npx/5a9d879542beca3a/node_modules/eventsource/lib/eventsource.js:276:7)
    at ClientRequest.emit (node:events:518:28)
    at emitErrorEvent (node:_http_client:101:11)
    at Socket.socketErrorListener (node:_http_client:504:5)
    at Socket.emit (node:events:518:28)
    at emitErrorNT (node:internal/streams/destroy:169:8)

What am I doing wrong?

With SSE servers, the MCP client (in this case, the inspector) will no longer be responsible for their lifetime, so will not automatically start it up.

It should work to launch the SSE server separately, the connect to it from the inspector. (We should definitely update the README to make this clearer!)

I understand now, thanks! Up and running with SSE.

node version: v20.17.0
@modelcontextprotocol/sdk: 1.7.0
macos: 14.3.1

I have the same problem with the demo code and the same inspector debugging operation, but get different errors log

New SSE connection
Query parameters: {}
Invalid transport type: undefined
Error in /sse route: Error: Invalid transport type specified
    at createTransport (file:///Users/zhoujingchao/.npm/_npx/5a9d879542beca3a/node_modules/@modelcontextprotocol/inspector/server/build/index.js:72:15)
    at file:///Users/zhoujingchao/.npm/_npx/5a9d879542beca3a/node_modules/@modelcontextprotocol/inspector/server/build/index.js:82:44
    at Layer.handle [as handle_request] (/Users/zhoujingchao/.npm/_npx/5a9d879542beca3a/node_modules/express/lib/router/layer.js:95:5)
    at next (/Users/zhoujingchao/.npm/_npx/5a9d879542beca3a/node_modules/express/lib/router/route.js:149:13)
    at Route.dispatch (/Users/zhoujingchao/.npm/_npx/5a9d879542beca3a/node_modules/express/lib/router/route.js:119:3)
    at Layer.handle [as handle_request] (/Users/zhoujingchao/.npm/_npx/5a9d879542beca3a/node_modules/express/lib/router/layer.js:95:5)
    at /Users/zhoujingchao/.npm/_npx/5a9d879542beca3a/node_modules/express/lib/router/index.js:284:15
    at Function.process_params (/Users/zhoujingchao/.npm/_npx/5a9d879542beca3a/node_modules/express/lib/router/index.js:346:12)
    at next (/Users/zhoujingchao/.npm/_npx/5a9d879542beca3a/node_modules/express/lib/router/index.js:280:10)
    at cors (/Users/zhoujingchao/.npm/_npx/5a9d879542beca3a/node_modules/cors/lib/index.js:188:7)
Error in /sse route: SseError: SSE error: Non-200 status code (500)
    at _eventSource.onerror (file:///Users/zhoujingchao/.npm/_npx/5a9d879542beca3a/node_modules/@modelcontextprotocol/sdk/dist/esm/client/sse.js:69:31)
    at EventSource.failConnection_fn (file:///Users/zhoujingchao/.npm/_npx/5a9d879542beca3a/node_modules/eventsource/dist/index.js:234:53)
    at file:///Users/zhoujingchao/.npm/_npx/5a9d879542beca3a/node_modules/eventsource/dist/index.js:76:74
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
  code: 500,
  event: {
    type: 'error',
    message: 'Non-200 status code (500)',
    code: 500,
    defaultPrevented: false,
    cancelable: false,
    timeStamp: 6735.891083
  }
}

req.query is {}, is this a bug? source code:

const createTransport = async (req) => {
    const query = req.query;
    console.log("Query parameters:", query);
    const transportType = query.transportType;
    if (transportType === "stdio") {
        const command = query.command;
        const origArgs = shellParseArgs(query.args);
        const queryEnv = query.env ? JSON.parse(query.env) : {};
        const env = { ...process.env, ...defaultEnvironment, ...queryEnv };
        const { cmd, args } = findActualExecutable(command, origArgs);
        console.log(`Stdio transport: command=${cmd}, args=${args}`);
        const transport = new StdioClientTransport({
            command: cmd,
            args,
            env,
            stderr: "pipe",
        });
        await transport.start();
        console.log("Spawned stdio transport");
        return transport;
    }
    else if (transportType === "sse") {
        const url = query.url;
        const headers = {};
        for (const key of SSE_HEADERS_PASSTHROUGH) {
            if (req.headers[key] === undefined) {
                continue;
            }
            const value = req.headers[key];
            headers[key] = Array.isArray(value) ? value[value.length - 1] : value;
        }
        console.log(`SSE transport: url=${url}, headers=${Object.keys(headers)}`);
        const transport = new SSEClientTransport(new URL(url), {
            eventSourceInit: {
                fetch: (url, init) => fetch(url, { ...init, headers }),
            },
            requestInit: {
                headers,
            },
        });
        await transport.start();
        console.log("Connected to SSE transport");
        return transport;
    }
    else {
        console.error(`Invalid transport type: ${transportType}`);
        throw new Error("Invalid transport type specified");
    }
};
app.get("/sse", async (req, res) => {
    try {
        // todo-test
        console.log("req.query", req.query)
        console.log("req.headers", req.headers)
        console.log("New SSE connection");
        let backingServerTransport;
        try {
            backingServerTransport = await createTransport(req);
        }
        catch (error) {
            if (error instanceof SseError && error.code === 401) {
                console.error("Received 401 Unauthorized from MCP server:", error.message);
                res.status(401).json(error);
                return;
            }
            throw error;
        }
        console.log("Connected MCP client to backing server transport");
        const webAppTransport = new SSEServerTransport("/message", res);
        console.log("Created web app transport");
        webAppTransports.push(webAppTransport);
        console.log("Created web app transport");
        await webAppTransport.start();
        if (backingServerTransport instanceof StdioClientTransport) {
            backingServerTransport.stderr.on("data", (chunk) => {
                webAppTransport.send({
                    jsonrpc: "2.0",
                    method: "notifications/stderr",
                    params: {
                        content: chunk.toString(),
                    },
                });
            });
        }
        mcpProxy({
            transportToClient: webAppTransport,
            transportToServer: backingServerTransport,
        });
        console.log("Set up MCP proxy");
    }
    catch (error) {
        console.error("Error in /sse route:", error);
        res.status(500).json(error);
    }
});

@zhoujingchao

@zhoujingchao did you resolve the error?

chore(deps): bump vite to ^7.3.5 (CVE fixes)

chore(deps): bump vite to ^7.3.5 (CVE fixes) (#1709)

Navigation Menu

Repository navigation

How to connect inspector to a locally developed TypeScript MCP server using SSE? #129

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

How to connect inspector to a locally developed TypeScript MCP server using SSE? #129

Description

Activity

jspahrsummers commented on Jan 22, 2025

atroyn commented on Jan 22, 2025

zhoujingchao commented on Mar 22, 2025

jasonkang14 commented on Apr 27, 2025

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions