Upgrade to SDK 0.5.0, add default request timeout

client/package.json

@@ -22,7 +22,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@modelcontextprotocol/sdk": "*",
+    "@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",

client/src/App.tsx

@@ -53,6 +53,8 @@ import SamplingTab, { PendingRequest } from "./components/SamplingTab";
 import Sidebar from "./components/Sidebar";
 import ToolsTab from "./components/ToolsTab";
 
+const DEFAULT_REQUEST_TIMEOUT_MSEC = 10000;
+
 const App = () => {
   const [connectionStatus, setConnectionStatus] = useState<
     "disconnected" | "connected" | "error"
@@ -220,7 +222,19 @@ const App = () => {
     }
 
     try {
-      const response = await mcpClient.request(request, schema);
+      const abortController = new AbortController();
+      const timeoutId = setTimeout(() => {
+        abortController.abort("Request timed out");
+      }, DEFAULT_REQUEST_TIMEOUT_MSEC);
+
+      let response;
+      try {
+        response = await mcpClient.request(request, schema, {
+          signal: abortController.signal,
+        });
+      } finally {
+        clearTimeout(timeoutId);
+      }
       pushHistory(request, response);
 
       if (tabKey !== undefined) {
@@ -229,10 +243,14 @@ const App = () => {
 
       return response;
     } catch (e: unknown) {
+      const errorString = (e as Error).message ?? String(e);
       if (tabKey === undefined) {
-        toast.error((e as Error).message);
+        toast.error(errorString);
       } else {
-        setErrors((prev) => ({ ...prev, [tabKey]: (e as Error).message }));
+        setErrors((prev) => ({
+          ...prev,
+          [tabKey]: errorString,
+        }));
       }
 
       throw e;
@@ -248,7 +266,7 @@ const App = () => {
       await mcpClient.notification(notification);
       pushHistory(notification);
     } catch (e: unknown) {
-      toast.error((e as Error).message);
+      toast.error((e as Error).message ?? String(e));
       throw e;
     }
   };
@@ -357,10 +375,21 @@ const App = () => {
 
   const connectMcpServer = async () => {
     try {
-      const client = new Client({
-        name: "mcp-inspector",
-        version: "0.0.1",
-      });
+      const client = new Client(
+        {
+          name: "mcp-inspector",
+          version: "0.0.1",
+        },
+        {
+          capabilities: {
+            // Support all client capabilities since we're an inspector tool
+            sampling: {},
+            roots: {
+              listChanged: true,
+            },
+          },
+        },
+      );
 
       const backendUrl = new URL("http://localhost:3000/sse");
 

client/src/components/ToolsTab.tsx

@@ -41,11 +41,12 @@ const ToolsTab = ({
 
     if ("content" in toolResult) {
       const structuredResult = toolResult as CallToolResult;
+      const isError = structuredResult.isError ?? false;
 
       return (
         <>
           <h4 className="font-semibold mb-2">
-            Tool Result: {structuredResult.isError ? "Error" : "Success"}
+            Tool Result: {isError ? "Error" : "Success"}
           </h4>
           {structuredResult.content.map((item, index) => (
             <div key={index} className="mb-2">

server/package.json

@@ -28,7 +28,7 @@
     "typescript": "^5.6.2"
   },
   "dependencies": {
-    "@modelcontextprotocol/sdk": "*",
+    "@modelcontextprotocol/sdk": "0.5.0",
     "cors": "^2.8.5",
     "eventsource": "^2.0.2",
     "express": "^4.21.0",