@modelcontextprotocol/inspector 0.1.1

package/client/dist/index.html

@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>MCP Inspector</title>
+    <script type="module" crossorigin src="/assets/index-Dnx-KnuX.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-DJlejpJa.css">
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>

package/client/dist/vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

package/package.json

@@ -0,0 +1,61 @@
+{
+  "name": "@modelcontextprotocol/inspector",
+  "version": "0.1.1",
+  "description": "Model Context Protocol inspector",
+  "license": "MIT",
+  "author": "Anthropic, PBC (https://anthropic.com)",
+  "homepage": "https://modelcontextprotocol.github.io",
+  "bugs": "https://github.com/modelcontextprotocol/inspector/issues",
+  "type": "module",
+  "bin": {
+    "mcp-inspector": "./bin/cli.js"
+  },
+  "files": [
+    "bin",
+    "client/bin",
+    "client/dist",
+    "server/build"
+  ],
+  "workspaces": [
+    "client",
+    "server"
+  ],
+  "scripts": {
+    "dev": "concurrently \"cd client && npm run dev\" \"cd server && npm run dev\"",
+    "build-server": "cd server && npm run build",
+    "build-client": "cd client && npm run build",
+    "build": "npm run build-server && npm run build-client",
+    "start-server": "cd server && npm run start",
+    "start-client": "cd client && npm run preview",
+    "start": "./bin/cli.js",
+    "prepare": "npm run build",
+    "prettier-fix": "prettier --write ."
+  },
+  "dependencies": {
+    "@modelcontextprotocol/sdk": "0.5.0",
+    "@radix-ui/react-icons": "^1.3.0",
+    "@radix-ui/react-label": "^2.1.0",
+    "@radix-ui/react-select": "^2.1.2",
+    "@radix-ui/react-slot": "^1.1.0",
+    "@radix-ui/react-tabs": "^1.1.1",
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^2.1.1",
+    "lucide-react": "^0.447.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-toastify": "^10.0.6",
+    "serve-handler": "^6.1.6",
+    "tailwind-merge": "^2.5.3",
+    "tailwindcss-animate": "^1.0.7",
+    "concurrently": "^9.0.1",
+    "cors": "^2.8.5",
+    "eventsource": "^2.0.2",
+    "express": "^4.21.0",
+    "ws": "^8.18.0",
+    "zod": "^3.23.8"
+  },
+  "devDependencies": {
+    "prettier": "3.3.3",
+    "@types/node": "^22.7.5"
+  }
+}

package/server/build/client.js

@@ -0,0 +1,76 @@
+import { Client } from "mcp-typescript/client/index.js";
+import { SSEClientTransport } from "mcp-typescript/client/sse.js";
+import { StdioClientTransport } from "mcp-typescript/client/stdio.js";
+import { ListResourcesResultSchema, ReadResourceResultSchema, ListPromptsResultSchema, GetPromptResultSchema, ListToolsResultSchema, CallToolResultSchema, } from "mcp-typescript/types.js";
+export class McpClient {
+    client;
+    transport;
+    constructor(name, version) {
+        this.client = new Client({
+            name,
+            version,
+        });
+    }
+    async connect(url) {
+        const urlObj = typeof url === "string" ? new URL(url) : url;
+        if (urlObj.protocol === "http:" || urlObj.protocol === "https:") {
+            this.transport = new SSEClientTransport();
+        }
+        else {
+            throw new Error(`Unsupported protocol: ${urlObj.protocol}`);
+        }
+        await this.transport.connect(urlObj);
+        await this.client.connect(this.transport);
+    }
+    async connectStdio(command, args = []) {
+        this.transport = new StdioClientTransport();
+        await this.transport.spawn({ command, args });
+        await this.client.connect(this.transport);
+    }
+    async close() {
+        await this.client.close();
+    }
+    // Resource Operations
+    async listResources() {
+        return await this.client.request({
+            method: "resources/list",
+        }, ListResourcesResultSchema);
+    }
+    async readResource(params) {
+        return await this.client.request({
+            method: "resources/read",
+            params,
+        }, ReadResourceResultSchema);
+    }
+    // Prompt Operations
+    async listPrompts() {
+        return await this.client.request({
+            method: "prompts/list",
+        }, ListPromptsResultSchema);
+    }
+    async getPrompt(params) {
+        return await this.client.request({
+            method: "prompts/get",
+            params,
+        }, GetPromptResultSchema);
+    }
+    // Tool Operations
+    async listTools() {
+        return await this.client.request({
+            method: "tools/list",
+        }, ListToolsResultSchema);
+    }
+    async callTool(params) {
+        return await this.client.request({
+            method: "tools/call",
+            params,
+        }, CallToolResultSchema);
+    }
+    getServerCapabilities() {
+        return this.client.getServerCapabilities();
+    }
+    getServerVersion() {
+        return this.client.getServerVersion();
+    }
+}
+export default McpClient;

package/server/build/index.js

@@ -0,0 +1,93 @@
+#!/usr/bin/env node
+import cors from "cors";
+import EventSource from "eventsource";
+import { SSEClientTransport } from "@modelcontextprotocol/sdk/client/sse.js";
+import { StdioClientTransport, getDefaultEnvironment, } from "@modelcontextprotocol/sdk/client/stdio.js";
+import { SSEServerTransport } from "@modelcontextprotocol/sdk/server/sse.js";
+import express from "express";
+import mcpProxy from "./mcpProxy.js";
+// Polyfill EventSource for an SSE client in Node.js
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+global.EventSource = EventSource;
+const app = express();
+app.use(cors());
+let webAppTransports = [];
+const createTransport = async (query) => {
+    console.log("Query parameters:", query);
+    const transportType = query.transportType;
+    if (transportType === "stdio") {
+        const command = query.command;
+        const args = query.args.split(/\s+/);
+        const env = query.env ? JSON.parse(query.env) : undefined;
+        console.log(`Stdio transport: command=${command}, args=${args}, env=${JSON.stringify(env)}`);
+        const transport = new StdioClientTransport({ command, args, env });
+        await transport.start();
+        console.log("Spawned stdio transport");
+        return transport;
+    }
+    else if (transportType === "sse") {
+        const url = query.url;
+        console.log(`SSE transport: url=${url}`);
+        const transport = new SSEClientTransport(new URL(url));
+        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 {
+        console.log("New SSE connection");
+        const backingServerTransport = await createTransport(req.query);
+        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();
+        mcpProxy({
+            transportToClient: webAppTransport,
+            transportToServer: backingServerTransport,
+            onerror: (error) => {
+                console.error(error);
+            },
+        });
+        console.log("Set up MCP proxy");
+    }
+    catch (error) {
+        console.error("Error in /sse route:", error);
+        res.status(500).json(error);
+    }
+});
+app.post("/message", async (req, res) => {
+    try {
+        const sessionId = req.query.sessionId;
+        console.log(`Received message for sessionId ${sessionId}`);
+        const transport = webAppTransports.find((t) => t.sessionId === sessionId);
+        if (!transport) {
+            res.status(404).end("Session not found");
+            return;
+        }
+        await transport.handlePostMessage(req, res);
+    }
+    catch (error) {
+        console.error("Error in /message route:", error);
+        res.status(500).json(error);
+    }
+});
+app.get("/default-environment", (req, res) => {
+    try {
+        res.json(getDefaultEnvironment());
+    }
+    catch (error) {
+        console.error("Error in /default-environment route:", error);
+        res.status(500).json(error);
+    }
+});
+const PORT = process.env.PORT || 3000;
+app.listen(PORT, () => {
+    console.log(`Server is running on port ${PORT}`);
+});

package/server/build/mcpProxy.js

@@ -0,0 +1,26 @@
+export default function mcpProxy({ transportToClient, transportToServer, onerror, }) {
+    let transportToClientClosed = false;
+    let transportToServerClosed = false;
+    transportToClient.onmessage = (message) => {
+        transportToServer.send(message).catch(onerror);
+    };
+    transportToServer.onmessage = (message) => {
+        transportToClient.send(message).catch(onerror);
+    };
+    transportToClient.onclose = () => {
+        if (transportToServerClosed) {
+            return;
+        }
+        transportToClientClosed = true;
+        transportToServer.close().catch(onerror);
+    };
+    transportToServer.onclose = () => {
+        if (transportToClientClosed) {
+            return;
+        }
+        transportToServerClosed = true;
+        transportToClient.close().catch(onerror);
+    };
+    transportToClient.onerror = onerror;
+    transportToServer.onerror = onerror;
+}