modelcontextprotocol/inspector
Watch
1
0
Fork
You've already forked inspector
 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 2

Merge branch 'main' into clarify-proxy-role-in-readme

Browse source
This commit is contained in:
Cliff Hall 2025-05-30 18:37:40 -04:00 • committed by GitHub
commit 291c59eaf9
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
11 changed files with 164 additions and 56 deletions
Download patch file Download diff file Expand all files Collapse all files

10
README.md
View file

@ -19,6 +19,16 @@ Note that the proxy is not a network proxy for intercepting traffic. Instead, it
- Node.js: ^22.7.5
### Quick Start (UI mode)
To get up and running right away with the UI, just execute the following:
```bash
npx @modelcontextprotocol/inspector
```
The server will start up and the UI will be accessible at `http://localhost:6274`.
### From an MCP server repository
To inspect an MCP server implementation, there's no need to clone this repo. Instead, use `npx`. For example, if your server is built at `build/index.js`:

8
client/src/App.tsx
View file

@ -611,7 +611,7 @@ const App = () => {
className="w-full p-4"
onValueChange={(value) => (window.location.hash = value)}
>
<TabsList className="mb-4 p-0">
<TabsList className="mb-4 py-0">
<TabsTrigger
value="resources"
disabled={!serverCapabilities?.resources}
@ -662,7 +662,7 @@ const App = () => {
!serverCapabilities?.tools ? (
<>
<div className="flex items-center justify-center p-4">
<p className="text-lg text-gray-500">
<p className="text-lg text-gray-500 dark:text-gray-400">
The connected server does not support any MCP
capabilities
</p>
@ -816,7 +816,7 @@ const App = () => {
</Tabs>
) : (
<div className="flex flex-col items-center justify-center h-full gap-4">
<p className="text-lg text-gray-500">
<p className="text-lg text-gray-500 dark:text-gray-400">
Connect to an MCP server to start inspecting
</p>
<div className="flex items-center gap-2">
@ -841,7 +841,7 @@ const App = () => {
}}
>
<div
className="absolute w-full h-4 -top-2 cursor-row-resize flex items-center justify-center hover:bg-accent/50"
className="absolute w-full h-4 -top-2 cursor-row-resize flex items-center justify-center hover:bg-accent/50 dark:hover:bg-input/40"
onMouseDown={handleDragStart}
>
<div className="w-8 h-1 rounded-full bg-border" />

12
client/src/components/History.tsx
View file

@ -29,7 +29,9 @@ const HistoryAndNotifications = ({
<div className="flex-1 overflow-y-auto p-4 border-r">
<h2 className="text-lg font-semibold mb-4">History</h2>
{requestHistory.length === 0 ? (
<p className="text-sm text-gray-500 italic">No history yet</p>
<p className="text-sm text-gray-500 dark:text-gray-400 italic">
No history yet
</p>
) : (
<ul className="space-y-3">
{requestHistory
@ -38,7 +40,7 @@ const HistoryAndNotifications = ({
.map((request, index) => (
<li
key={index}
className="text-sm text-foreground bg-secondary p-2 rounded"
className="text-sm text-foreground bg-secondary py-2 px-3 rounded"
>
<div
className="flex justify-between items-center cursor-pointer"
@ -93,7 +95,9 @@ const HistoryAndNotifications = ({
<div className="flex-1 overflow-y-auto p-4">
<h2 className="text-lg font-semibold mb-4">Server Notifications</h2>
{serverNotifications.length === 0 ? (
<p className="text-sm text-gray-500 italic">No notifications yet</p>
<p className="text-sm text-gray-500 dark:text-gray-400 italic">
No notifications yet
</p>
) : (
<ul className="space-y-3">
{serverNotifications
@ -102,7 +106,7 @@ const HistoryAndNotifications = ({
.map((notification, index) => (
<li
key={index}
className="text-sm text-foreground bg-secondary p-2 rounded"
className="text-sm text-foreground bg-secondary py-2 px-3 rounded"
>
<div
className="flex justify-between items-center cursor-pointer"

6
client/src/components/ListPane.tsx
View file

@ -21,8 +21,8 @@ const ListPane = <T extends object>({
buttonText,
isButtonDisabled,
}: ListPaneProps<T>) => (
<div className="bg-card rounded-lg shadow">
<div className="p-4 border-b border-gray-200 dark:border-gray-800">
<div className="bg-card border border-border rounded-lg shadow">
<div className="p-4 border-b border-gray-200 dark:border-border">
<h3 className="font-semibold dark:text-white">{title}</h3>
</div>
<div className="p-4">
@ -46,7 +46,7 @@ const ListPane = <T extends object>({
{items.map((item, index) => (
<div
key={index}
className="flex items-center p-2 rounded hover:bg-gray-50 dark:hover:bg-gray-700 cursor-pointer"
className="flex items-center py-2 px-4 rounded hover:bg-gray-50 dark:hover:bg-secondary cursor-pointer"
onClick={() => setSelectedItem(item)}
>
{renderItem(item)}

6
client/src/components/PromptsTab.tsx
View file

@ -110,8 +110,8 @@ const PromptsTab = ({
isButtonDisabled={!nextCursor && prompts.length > 0}
/>
<div className="bg-card rounded-lg shadow">
<div className="p-4 border-b border-gray-200 dark:border-gray-800">
<div className="bg-card border border-border rounded-lg shadow">
<div className="p-4 border-b border-gray-200 dark:border-border">
<h3 className="font-semibold">
{selectedPrompt ? selectedPrompt.name : "Select a prompt"}
</h3>
@ -126,7 +126,7 @@ const PromptsTab = ({
) : selectedPrompt ? (
<div className="space-y-4">
{selectedPrompt.description && (
<p className="text-sm text-gray-600">
<p className="text-sm text-gray-600 dark:text-gray-400">
{selectedPrompt.description}
</p>
)}

6
client/src/components/ResourcesTab.tsx
View file

@ -173,8 +173,8 @@ const ResourcesTab = ({
isButtonDisabled={!nextTemplateCursor && resourceTemplates.length > 0}
/>
<div className="bg-card rounded-lg shadow">
<div className="p-4 border-b border-gray-200 dark:border-gray-800 flex justify-between items-center">
<div className="bg-card border border-border rounded-lg shadow">
<div className="p-4 border-b border-gray-200 dark:border-border flex justify-between items-center">
<h3
className="font-semibold truncate"
title={selectedResource?.name || selectedTemplate?.name}
@ -234,7 +234,7 @@ const ResourcesTab = ({
/>
) : selectedTemplate ? (
<div className="space-y-4">
<p className="text-sm text-gray-600">
<p className="text-sm text-gray-600 dark:text-gray-400">
{selectedTemplate.description}
</p>
{selectedTemplate.uriTemplate

4
client/src/components/Sidebar.tsx
View file

@ -215,7 +215,7 @@ const Sidebar = ({
return (
<div className="w-80 bg-card border-r border-border flex flex-col h-full">
<div className="flex items-center justify-between p-4 border-b border-gray-200 dark:border-gray-800">
<div className="flex items-center justify-between p-4 border-b border-gray-200 dark:border-border">
<div className="flex items-center">
<h1 className="ml-2 text-lg font-semibold">
MCP Inspector v{version}
@ -646,7 +646,7 @@ const Sidebar = ({
}
})()}`}
/>
<span className="text-sm text-gray-600">
<span className="text-sm text-gray-600 dark:text-gray-400">
{(() => {
switch (connectionStatus) {
case "connected":

8
client/src/components/ToolsTab.tsx
View file

@ -77,8 +77,8 @@ const ToolsTab = ({
isButtonDisabled={!nextCursor && tools.length > 0}
/>
<div className="bg-card rounded-lg shadow">
<div className="p-4 border-b border-gray-200 dark:border-gray-800">
<div className="bg-card border border-border rounded-lg shadow">
<div className="p-4 border-b border-gray-200 dark:border-border">
<h3 className="font-semibold">
{selectedTool ? selectedTool.name : "Select a tool"}
</h3>
@ -86,7 +86,7 @@ const ToolsTab = ({
<div className="p-4">
{selectedTool ? (
<div className="space-y-4">
<p className="text-sm text-gray-600">
<p className="text-sm text-gray-600 dark:text-gray-400">
{selectedTool.description}
</p>
{Object.entries(selectedTool.inputSchema.properties ?? []).map(
@ -96,7 +96,7 @@ const ToolsTab = ({
<div key={key}>
<Label
htmlFor={key}
className="block text-sm font-medium text-gray-700"
className="block text-sm font-medium text-gray-700 dark:text-gray-300"
>
{key}
</Label>

4
client/src/index.css
View file

@ -93,8 +93,8 @@ h1 {
--accent-foreground: 210 40% 98%;
--destructive: 0 62.8% 30.6%;
--destructive-foreground: 210 40% 98%;
--border: 217.2 32.6% 17.5%;
--input: 217.2 32.6% 17.5%;
--border: 217.2 24% 24%;
--input: 217.2 24% 24%;
--ring: 212.7 26.8% 83.9%;
--chart-1: 220 70% 50%;
--chart-2: 160 60% 45%;

98
client/src/lib/hooks/__tests__/useConnection.test.tsx
View file

@ -28,10 +28,18 @@ jest.mock("@modelcontextprotocol/sdk/client/index.js", () => ({
}));
jest.mock("@modelcontextprotocol/sdk/client/sse.js", () => ({
SSEClientTransport: jest.fn(),
SSEClientTransport: jest.fn((url) => ({
toString: () => url,
})),
SseError: jest.fn(),
}));
jest.mock("@modelcontextprotocol/sdk/client/streamableHttp.js", () => ({
StreamableHTTPClientTransport: jest.fn((url) => ({
toString: () => url,
})),
}));
jest.mock("@modelcontextprotocol/sdk/client/auth.js", () => ({
auth: jest.fn().mockResolvedValue("AUTHORIZED"),
}));
@ -163,4 +171,92 @@ describe("useConnection", () => {
result.current.makeRequest(mockRequest, mockSchema),
).rejects.toThrow("MCP client not connected");
});
describe("URL Port Handling", () => {
const SSEClientTransport = jest.requireMock(
"@modelcontextprotocol/sdk/client/sse.js",
).SSEClientTransport;
const StreamableHTTPClientTransport = jest.requireMock(
"@modelcontextprotocol/sdk/client/streamableHttp.js",
).StreamableHTTPClientTransport;
beforeEach(() => {
jest.clearAllMocks();
});
test("preserves HTTPS port number when connecting", async () => {
const props = {
...defaultProps,
sseUrl: "https://example.com:8443/api",
transportType: "sse" as const,
};
const { result } = renderHook(() => useConnection(props));
await act(async () => {
await result.current.connect();
});
const call = SSEClientTransport.mock.calls[0][0];
expect(call.toString()).toContain(
"url=https%3A%2F%2Fexample.com%3A8443%2Fapi",
);
});
test("preserves HTTP port number when connecting", async () => {
const props = {
...defaultProps,
sseUrl: "http://localhost:3000/api",
transportType: "sse" as const,
};
const { result } = renderHook(() => useConnection(props));
await act(async () => {
await result.current.connect();
});
const call = SSEClientTransport.mock.calls[0][0];
expect(call.toString()).toContain(
"url=http%3A%2F%2Flocalhost%3A3000%2Fapi",
);
});
test("uses default port for HTTPS when not specified", async () => {
const props = {
...defaultProps,
sseUrl: "https://example.com/api",
transportType: "sse" as const,
};
const { result } = renderHook(() => useConnection(props));
await act(async () => {
await result.current.connect();
});
const call = SSEClientTransport.mock.calls[0][0];
expect(call.toString()).toContain("url=https%3A%2F%2Fexample.com%2Fapi");
expect(call.toString()).not.toContain("%3A443");
});
test("preserves port number in streamable-http transport", async () => {
const props = {
...defaultProps,
sseUrl: "https://example.com:8443/api",
transportType: "streamable-http" as const,
};
const { result } = renderHook(() => useConnection(props));
await act(async () => {
await result.current.connect();
});
const call = StreamableHTTPClientTransport.mock.calls[0][0];
expect(call.toString()).toContain(
"url=https%3A%2F%2Fexample.com%3A8443%2Fapi",
);
});
});
});

58
server/src/index.ts
View file

@ -48,7 +48,8 @@ app.use((req, res, next) => {
next();
});
const webAppTransports: Map<string, Transport> = new Map<string, Transport>(); // Transports by sessionId
const webAppTransports: Map<string, Transport> = new Map<string, Transport>(); // Web app transports by web app sessionId
const serverTransports: Map<string, Transport> = new Map<string, Transport>(); // Server Transports by web app sessionId
const createTransport = async (req: express.Request): Promise<Transport> => {
const query = req.query;
@ -137,8 +138,6 @@ const createTransport = async (req: express.Request): Promise<Transport> => {
}
};
let backingServerTransport: Transport | undefined;
app.get("/mcp", async (req, res) => {
const sessionId = req.headers["mcp-session-id"] as string;
console.log(`Received GET message for sessionId ${sessionId}`);
@ -161,12 +160,12 @@ app.get("/mcp", async (req, res) => {
app.post("/mcp", async (req, res) => {
const sessionId = req.headers["mcp-session-id"] as string | undefined;
console.log(`Received POST message for sessionId ${sessionId}`);
let serverTransport: Transport | undefined;
if (!sessionId) {
try {
console.log("New streamable-http connection");
try {
await backingServerTransport?.close();
backingServerTransport = await createTransport(req);
serverTransport = await createTransport(req);
} catch (error) {
if (error instanceof SseError && error.code === 401) {
console.error(
@ -180,12 +179,13 @@ app.post("/mcp", async (req, res) => {
throw error;
}
console.log("Connected MCP client to backing server transport");
console.log("Connected MCP client to server transport");
const webAppTransport = new StreamableHTTPServerTransport({
sessionIdGenerator: randomUUID,
onsessioninitialized: (sessionId) => {
webAppTransports.set(sessionId, webAppTransport);
serverTransports.set(sessionId, serverTransport!);
console.log("Created streamable web app transport " + sessionId);
},
});
@ -194,7 +194,7 @@ app.post("/mcp", async (req, res) => {
mcpProxy({
transportToClient: webAppTransport,
transportToServer: backingServerTransport,
transportToServer: serverTransport,
});
await (webAppTransport as StreamableHTTPServerTransport).handleRequest(
@ -229,10 +229,9 @@ app.post("/mcp", async (req, res) => {
app.get("/stdio", async (req, res) => {
try {
console.log("New connection");
let serverTransport: Transport | undefined;
try {
await backingServerTransport?.close();
backingServerTransport = await createTransport(req);
serverTransport = await createTransport(req);
} catch (error) {
if (error instanceof SseError && error.code === 401) {
console.error(
@ -250,26 +249,24 @@ app.get("/stdio", async (req, res) => {
const webAppTransport = new SSEServerTransport("/message", res);
webAppTransports.set(webAppTransport.sessionId, webAppTransport);
console.log("Created web app transport");
serverTransports.set(webAppTransport.sessionId, serverTransport);
console.log("Created client/server transports");
await webAppTransport.start();
(backingServerTransport as StdioClientTransport).stderr!.on(
"data",
(chunk) => {
webAppTransport.send({
jsonrpc: "2.0",
method: "notifications/stderr",
params: {
content: chunk.toString(),
},
});
},
);
(serverTransport as StdioClientTransport).stderr!.on("data", (chunk) => {
webAppTransport.send({
jsonrpc: "2.0",
method: "notifications/stderr",
params: {
content: chunk.toString(),
},
});
});
mcpProxy({
transportToClient: webAppTransport,
transportToServer: backingServerTransport,
transportToServer: serverTransport,
});
console.log("Set up MCP proxy");
@ -284,10 +281,9 @@ app.get("/sse", async (req, res) => {
console.log(
"New SSE connection. NOTE: The sse transport is deprecated and has been replaced by streamable-http",
);
let serverTransport: Transport | undefined;
try {
await backingServerTransport?.close();
backingServerTransport = await createTransport(req);
serverTransport = await createTransport(req);
} catch (error) {
if (error instanceof SseError && error.code === 401) {
console.error(
@ -305,13 +301,15 @@ app.get("/sse", async (req, res) => {
const webAppTransport = new SSEServerTransport("/message", res);
webAppTransports.set(webAppTransport.sessionId, webAppTransport);
console.log("Created web app transport");
console.log("Created client transport");
serverTransports.set(webAppTransport.sessionId, serverTransport);
console.log("Created server transport");
await webAppTransport.start();
mcpProxy({
transportToClient: webAppTransport,
transportToServer: backingServerTransport,
transportToServer: serverTransport,
});
console.log("Set up MCP proxy");