show server stderr in inspector UI

Author: ashwin-ant

client/src/App.tsx

@@ -12,17 +12,26 @@ import {
   ListPromptsResultSchema,
   ListResourcesResultSchema,
   ListResourceTemplatesResultSchema,
+  Request,
   ListRootsRequestSchema,
   ListToolsResultSchema,
   ProgressNotificationSchema,
   ReadResourceResultSchema,
   Resource,
   ResourceTemplate,
+  Result,
   Root,
   ServerNotification,
   Tool,
 } from "@modelcontextprotocol/sdk/types.js";
 import { useCallback, useEffect, useRef, useState } from "react";
+
+import {
+  StderrNotificationSchema,
+  StdErrNotification,
+  Notification,
+} from "./lib/notificationTypes";
+
 // Add dark mode class based on system preference
 if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
   document.documentElement.classList.add("dark");
@@ -87,6 +96,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>>({});
 
@@ -383,7 +395,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",
@@ -411,8 +423,6 @@ const App = () => {
       }
 
       const clientTransport = new SSEClientTransport(backendUrl);
-      await client.connect(clientTransport);
-
       client.setNotificationHandler(
         ProgressNotificationSchema,
         (notification) => {
@@ -423,6 +433,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) => [
@@ -459,6 +481,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 {
+  ClientNotificationSchema,
+  NotificationSchema as BaseNotificationSchema,
+} 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>;

server/src/index.ts

@@ -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.stderr) {
+      backingServerTransport.stderr.on("data", (chunk) => {
+        webAppTransport.send({
+          jsonrpc: "2.0",
+          method: "notifications/stderr",
+          params: {
+            content: chunk.toString(),
+          },
+        });
+      });
+    }
+
     mcpProxy({
       transportToClient: webAppTransport,
       transportToServer: backingServerTransport,