Merge pull request #70 from modelcontextprotocol/ashwin/errorlog

show server stderr in inspector UI

Author: jspahrsummers

.github/workflows/main.yml

@@ -4,6 +4,8 @@ on:
       - main
 
   pull_request:
+  release:
+    types: [published]
 
 jobs:
   build:
@@ -21,3 +23,30 @@ jobs:
       # - run: npm ci
       - run: npm install --no-package-lock
       - run: npm run build
+
+  publish:
+    runs-on: ubuntu-latest
+    if: github.event_name == 'release'
+    environment: release
+    needs: build
+
+    permissions:
+      contents: read
+      id-token: write
+
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 18
+          cache: npm
+          registry-url: "https://registry.npmjs.org"
+
+      # Working around https://github.com/npm/cli/issues/4828
+      # - run: npm ci
+      - run: npm install --no-package-lock
+
+      # TODO: Add --provenance once the repo is public
+      - run: npm run publish-all
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

client/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@modelcontextprotocol/inspector-client",
-  "version": "0.1.7",
+  "version": "0.2.0",
   "description": "Client-side application for the Model Context Protocol inspector",
   "license": "MIT",
   "author": "Anthropic, PBC (https://anthropic.com)",
@@ -21,7 +21,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@modelcontextprotocol/sdk": "0.5.0",
+    "@modelcontextprotocol/sdk": "0.7.0",
     "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-label": "^2.1.0",
     "@radix-ui/react-select": "^2.1.2",

client/src/App.tsx

@@ -16,14 +16,22 @@ import {
   ListToolsResultSchema,
   ProgressNotificationSchema,
   ReadResourceResultSchema,
+  Request,
   Resource,
   ResourceTemplate,
+  Result,
   Root,
   ServerNotification,
   Tool,
 } from "@modelcontextprotocol/sdk/types.js";
 import { useCallback, useEffect, useRef, useState } from "react";
 
+import {
+  Notification,
+  StdErrNotification,
+  StdErrNotificationSchema
+} from "./lib/notificationTypes";
+
 import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import {
   Bell,
@@ -82,6 +90,9 @@ const App = () => {
   >([]);
   const [mcpClient, setMcpClient] = useState<Client | null>(null);
   const [notifications, setNotifications] = useState<ServerNotification[]>([]);
+  const [stdErrNotifications, setStdErrNotifications] = useState<
+    StdErrNotification[]
+  >([]);
   const [roots, setRoots] = useState<Root[]>([]);
   const [env, setEnv] = useState<Record<string, string>>({});
 
@@ -380,7 +391,7 @@ const App = () => {
 
   const connectMcpServer = async () => {
     try {
-      const client = new Client(
+      const client = new Client<Request, Notification, Result>(
         {
           name: "mcp-inspector",
           version: "0.0.1",
@@ -408,8 +419,6 @@ const App = () => {
       }
 
       const clientTransport = new SSEClientTransport(backendUrl);
-      await client.connect(clientTransport);
-
       client.setNotificationHandler(
         ProgressNotificationSchema,
         (notification) => {
@@ -420,6 +429,18 @@ const App = () => {
         },
       );
 
+      client.setNotificationHandler(
+        StdErrNotificationSchema,
+        (notification) => {
+          setStdErrNotifications((prevErrorNotifications) => [
+            ...prevErrorNotifications,
+            notification,
+          ]);
+        },
+      );
+
+      await client.connect(clientTransport);
+
       client.setRequestHandler(CreateMessageRequestSchema, (request) => {
         return new Promise<CreateMessageResult>((resolve, reject) => {
           setPendingSampleRequests((prev) => [
@@ -456,6 +477,7 @@ const App = () => {
         env={env}
         setEnv={setEnv}
         onConnect={connectMcpServer}
+        stdErrNotifications={stdErrNotifications}
       />
       <div className="flex-1 flex flex-col overflow-hidden">
         <div className="flex-1 overflow-auto">

client/src/components/Sidebar.tsx

@@ -10,6 +10,7 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
+import { StdErrNotification } from "@/lib/notificationTypes";
 
 interface SidebarProps {
   connectionStatus: "disconnected" | "connected" | "error";
@@ -24,6 +25,7 @@ interface SidebarProps {
   env: Record<string, string>;
   setEnv: (env: Record<string, string>) => void;
   onConnect: () => void;
+  stdErrNotifications: StdErrNotification[];
 }
 
 const Sidebar = ({
@@ -39,6 +41,7 @@ const Sidebar = ({
   env,
   setEnv,
   onConnect,
+  stdErrNotifications,
 }: SidebarProps) => {
   const [showEnvVars, setShowEnvVars] = useState(false);
 
@@ -187,6 +190,25 @@ const Sidebar = ({
                     : "Disconnected"}
               </span>
             </div>
+            {stdErrNotifications.length > 0 && (
+              <>
+                <div className="mt-4 border-t border-gray-200 pt-4">
+                  <h3 className="text-sm font-medium">
+                    Error output from MCP server
+                  </h3>
+                  <div className="mt-2 max-h-80 overflow-y-auto">
+                    {stdErrNotifications.map((notification, index) => (
+                      <div
+                        key={index}
+                        className="text-sm text-red-500 font-mono py-2 border-b border-gray-200 last:border-b-0"
+                      >
+                        {notification.params.content}
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              </>
+            )}
           </div>
         </div>
       </div>

client/src/lib/notificationTypes.ts

@@ -0,0 +1,19 @@
+import {
+  NotificationSchema as BaseNotificationSchema,
+  ClientNotificationSchema,
+} from "@modelcontextprotocol/sdk/types.js";
+import { z } from "zod";
+
+export const StdErrNotificationSchema = BaseNotificationSchema.extend({
+  method: z.literal("notifications/stderr"),
+  params: z.object({
+    content: z.string(),
+  }),
+});
+
+export const NotificationSchema = ClientNotificationSchema.or(
+  StdErrNotificationSchema,
+);
+
+export type StdErrNotification = z.infer<typeof StdErrNotificationSchema>;
+export type Notification = z.infer<typeof NotificationSchema>;

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@modelcontextprotocol/inspector",
-  "version": "0.1.7",
+  "version": "0.2.0",
   "description": "Model Context Protocol inspector",
   "license": "MIT",
   "author": "Anthropic, PBC (https://anthropic.com)",
@@ -29,11 +29,12 @@
     "start-client": "cd client && npm run preview",
     "start": "./bin/cli.js",
     "prepare": "npm run build",
-    "prettier-fix": "prettier --write ."
+    "prettier-fix": "prettier --write .",
+    "publish-all": "npm publish --workspaces --access public && npm publish --access public"
   },
   "dependencies": {
-    "@modelcontextprotocol/inspector-client": "0.1.0",
-    "@modelcontextprotocol/inspector-server": "0.1.0",
+    "@modelcontextprotocol/inspector-client": "0.2.0",
+    "@modelcontextprotocol/inspector-server": "0.2.0",
     "concurrently": "^9.0.1"
   },
   "devDependencies": {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@modelcontextprotocol/inspector-server",
-  "version": "0.1.7",
+  "version": "0.2.0",
   "description": "Server-side application for the Model Context Protocol inspector",
   "license": "MIT",
   "author": "Anthropic, PBC (https://anthropic.com)",
@@ -27,7 +27,7 @@
     "typescript": "^5.6.2"
   },
   "dependencies": {
-    "@modelcontextprotocol/sdk": "0.5.0",
+    "@modelcontextprotocol/sdk": "0.7.0",
     "cors": "^2.8.5",
     "eventsource": "^2.0.2",
     "express": "^4.21.0",

server/package.json

@@ -1,8 +1,8 @@
 #!/usr/bin/env node
 
-import { parseArgs } from "node:util";
 import cors from "cors";
 import EventSource from "eventsource";
+import { parseArgs } from "node:util";
 
 import { SSEClientTransport } from "@modelcontextprotocol/sdk/client/sse.js";
 import {
@@ -42,7 +42,12 @@ const createTransport = async (query: express.Request["query"]) => {
     console.log(
       `Stdio transport: command=${command}, args=${args}, env=${JSON.stringify(env)}`,
     );
-    const transport = new StdioClientTransport({ command, args, env });
+    const transport = new StdioClientTransport({
+      command,
+      args,
+      env,
+      stderr: "pipe",
+    });
     await transport.start();
     console.log("Spawned stdio transport");
     return transport;
@@ -75,6 +80,18 @@ app.get("/sse", async (req, res) => {
 
     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,
@@ -121,4 +138,4 @@ app.get("/config", (req, res) => {
 });
 
 const PORT = process.env.PORT || 3000;
-app.listen(PORT, () => {});
+app.listen(PORT, () => { });