Detailed Stats page + HTTP Support #227

QuantGeekDev · 2025-03-29T17:18:51Z

This adds a detailed stats page to the stats tab of the inspector.
You can try it out today with npx mcp-debug for the inspector
This also adds experimental (direct from client, and streamable from server) support for the http specificatio

You can try creating a http server with mcp-framework if you don't have an implementation to test it with yet (mcp create serverNameHere --http --cors --port 1337

Motivation and Context

The MCP specification now includes the Streamable HTTP transport protocol, but the inspector currently lacks direct support for it. This PR adds an experimental implementation of the Streamable HTTP transport client, allowing developers to connect directly to MCP servers using this protocol without requiring a proxy. The main way to do this is via DIRECT (no proxy) connection, a new checkbox for this has been added to the UI.

This is being submitted as an experimental feature for now - I can provide a more thorough implementation and testing plan if this is something the team sees as valuable and would like to incorporate into the main codebase.

How Has This Been Tested?

The implementation has been tested with basic request/response patterns and SSE streaming connections against HTTP MCP servers built with mcp-framework. I will re-test it against the official SDK once it is available.

The debugging UI provides insights into the connection state, helping identify protocol compliance issues.

Breaking Changes

None. This implementation is additive and doesn't change existing functionality. Users can continue using existing transport methods.

Types of changes

Bug fix (non-breaking change which fixes an issue)
New feature (non-breaking change which adds functionality)
Breaking change (fix or feature that would cause existing functionality to change)
Documentation update

Checklist

I have read the MCP Documentation
My code follows the repository's style guidelines
New and existing tests pass locally
I have added appropriate error handling
I have added or updated documentation as needed

Additional context

This implementation focuses on the client-side of the Streamable HTTP transport protocol. The implementation includes:

Direct HTTP transport client following the MCP Streamable HTTP specification
Session management with automatic reconnection
Support for SSE streaming for server-to-client messages
Enhanced debugging UI with detailed connection stats

The debugging UI provides visibility into:

Connection state and metrics
HTTP status code tracking
Tool call monitoring
SSE stream events
Protocol compliance checks

This is being submitted as an experimental implementation to gauge interest. If the team finds value in this approach, I'd be happy to provide a more robust implementation with comprehensive testing and documentation.

Feat/http and stats

…mpatibility

Http fixes for pr

QuantGeekDev · 2025-03-29T17:53:37Z

I'd love to get some feedack. Please let me know if this would make sense and if I should keep iterating on this to make this merge ready, I can move pretty fast

…sion to 0.7.0

pulkitsharma07 · 2025-03-29T18:37:12Z

Why not add support for streamable transport first in the SDK modelcontextprotocol/typescript-sdk#220 and then use it here ? Check this #221 as well

Should a new transport implementation be part of the inspector ?

QuantGeekDev · 2025-03-29T23:40:21Z

Why not add support for streamable transport first in the SDK modelcontextprotocol/typescript-sdk#220 and then use it here ? Check this #221 as well

Should a new transport implementation be part of the inspector ?

Thanks for your response! I just assumed it was already being worked on so I rolled it up quickly and will patch it once the official sdk is updated. I posted a comment in the related issue you sent offering to implement it into the official sdk

seuros · 2025-03-31T00:07:24Z

README.md

 ```

 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:

 ```bash
-CLIENT_PORT=8080 SERVER_PORT=9000 npx @modelcontextprotocol/inspector node build/index.js
+CLIENT_PORT=8080 SERVER_PORT=9000 npx @modelcontextprotocol/inspector-server node build/index.js


seuros · 2025-03-31T00:07:53Z

bin/cli.js

@@ -64,7 +64,7 @@ async function main() {
  const CLIENT_PORT = process.env.CLIENT_PORT ?? "5173";
  const SERVER_PORT = process.env.SERVER_PORT ?? "3000";

-  console.log("Starting MCP inspector...");
+  console.log("Starting MCP Debug inspector...");


seuros · 2025-03-31T00:08:15Z

bin/cli.js

@@ -102,7 +102,7 @@ async function main() {
  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://127.0.0.1:${CLIENT_PORT}${portParam} 🚀`,
+    `\n🔍 MCP Debug Inspector is up and running at http://127.0.0.1:${CLIENT_PORT}${portParam} 🚀`,


seuros · 2025-03-31T00:08:36Z

client/package.json

-  "name": "@modelcontextprotocol/inspector-client",
-  "version": "0.7.0",
-  "description": "Client-side application for the Model Context Protocol inspector",
+  "name": "mcp-debug-client",


🔙 all this file

seuros · 2025-03-31T00:09:08Z

client/src/components/Sidebar.tsx

@@ -29,8 +29,8 @@ import { version } from "../../../package.json";

 interface SidebarProps {
  connectionStatus: "disconnected" | "connected" | "error";
-  transportType: "stdio" | "sse";
-  setTransportType: (type: "stdio" | "sse") => void;
+  transportType: "stdio" | "sse" | "streamableHttp";


"stdio" | "sse" | "http";

seuros · 2025-03-31T00:09:47Z

client/src/components/ui/accordion.tsx

@@ -0,0 +1,58 @@
+import * as React from "react";


seuros · 2025-03-31T00:10:01Z

client/src/components/ui/badge.tsx

@@ -0,0 +1,36 @@
+import * as React from "react";


seuros · 2025-03-31T00:11:54Z

This can be split into 2 PRs. The Stats page and the new SDK spec.

The stats page should have a screenshoot of the page in the PR.

cliffhall · 2025-03-31T17:18:18Z

This can be split into 2 PRs. The Stats page and the new SDK spec.
The stats page should have a screenshoot of the page in the PR.

I agree, this is a big PR and a lot of it just needs to be backed out as it stands. Reducing this to just adding a stats page will make it much easier to review and have confidence in. Also it would be good if you could include a screenshot of this stats page so we can see the scope of it before pulling down your branch to test locally.

idyll · 2025-04-02T02:25:37Z

I've tested this PR with my streaming server... I very much appreciate it @QuantGeekDev

I did notice that when my server returned the new protocol version 2025-03-26 it refused to connect.
(Which would make sense for the SSE but not for the new Streaming...)

QuantGeekDev and others added 17 commits March 27, 2025 20:09

feat: add http streaming with json responses

2cb025a

Update README with MCP Debug fork features

ae21eca

Rename package and CLI to mcp-debug

fed7ae5

Fix package dependencies and CLI arguments handling

80d5dc7

Add missing dependencies for Node.js 18 compatibility

5cf85a5

Bump version to 0.7.1

7aa799f

Remove enhanced features log and bump version to 0.7.2

c4a675e

add direct http transport

55d870d

feat: add stats page

930d254

fix: type errors in StreamableHttpStats.tsx

11d536e

Merge pull request #1 from QuantGeekDev/feat/http-and-stats

4f5fcd4

Feat/http and stats

Merge branch 'main' into feat/http-and-stats

c8e72be

Merge branch 'main' of https://github.com/modelcontextprotocol/inspector

72f3356

fix: restore makeRequest wrapper and fix build errors

09d7ff5

fix: make SamplingTab handlers optional and fix useConnection type co…

0b2c150

…mpatibility

Fix HTTP transport handling in useConnection hook

cd424b1

Merge pull request #2 from QuantGeekDev/http-fixes-for-pr

80ac236

Http fixes for pr

QuantGeekDev added 2 commits March 29, 2025 18:57

Merge HTTP fixes and better error handling from fork

2e0b30b

Change package name to @modelcontextprotocol/inspector-server and ver…

aedb7da

…sion to 0.7.0

seuros suggested changes Mar 31, 2025

View reviewed changes

cliffhall added enhancement New feature or request waiting on submitter Waiting for the submitter to provide more info labels Mar 31, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Detailed Stats page + HTTP Support #227

Detailed Stats page + HTTP Support #227

QuantGeekDev commented Mar 29, 2025

QuantGeekDev commented Mar 29, 2025 •

edited

Loading

pulkitsharma07 commented Mar 29, 2025

QuantGeekDev commented Mar 29, 2025

seuros Mar 31, 2025

seuros Mar 31, 2025

seuros Mar 31, 2025

seuros Mar 31, 2025

seuros Mar 31, 2025

seuros Mar 31, 2025

seuros Mar 31, 2025

seuros commented Mar 31, 2025

cliffhall commented Mar 31, 2025 •

edited

Loading

idyll commented Apr 2, 2025

Detailed Stats page + HTTP Support #227

Are you sure you want to change the base?

Detailed Stats page + HTTP Support #227

Conversation

QuantGeekDev commented Mar 29, 2025

Motivation and Context

How Has This Been Tested?

Breaking Changes

Types of changes

Checklist

Additional context

QuantGeekDev commented Mar 29, 2025 • edited Loading

pulkitsharma07 commented Mar 29, 2025

QuantGeekDev commented Mar 29, 2025

seuros Mar 31, 2025

Choose a reason for hiding this comment

seuros Mar 31, 2025

Choose a reason for hiding this comment

seuros Mar 31, 2025

Choose a reason for hiding this comment

seuros Mar 31, 2025

Choose a reason for hiding this comment

seuros Mar 31, 2025

Choose a reason for hiding this comment

seuros Mar 31, 2025

Choose a reason for hiding this comment

seuros Mar 31, 2025

Choose a reason for hiding this comment

seuros commented Mar 31, 2025

cliffhall commented Mar 31, 2025 • edited Loading

idyll commented Apr 2, 2025

QuantGeekDev commented Mar 29, 2025 •

edited

Loading

cliffhall commented Mar 31, 2025 •

edited

Loading