Merge pull request #105 from devin-open-source/devin/1733551277-capability-negotiation

feat: implement capability negotiation for UI tabs

client/src/App.tsx

@@ -19,10 +19,11 @@ import {
   Request,
   Resource,
   ResourceTemplate,
-  Result,
   Root,
   ServerNotification,
   Tool,
+  ServerCapabilitiesSchema,
+  Result,
 } from "@modelcontextprotocol/sdk/types.js";
 import { useCallback, useEffect, useRef, useState } from "react";
 
@@ -43,7 +44,7 @@ import {
 } from "lucide-react";
 
 import { toast } from "react-toastify";
-import { ZodType } from "zod";
+import { z, type ZodType } from "zod";
 import "./App.css";
 import ConsoleTab from "./components/ConsoleTab";
 import HistoryAndNotifications from "./components/History";
@@ -55,6 +56,8 @@ import SamplingTab, { PendingRequest } from "./components/SamplingTab";
 import Sidebar from "./components/Sidebar";
 import ToolsTab from "./components/ToolsTab";
 
+type ServerCapabilities = z.infer<typeof ServerCapabilitiesSchema>;
+
 const DEFAULT_REQUEST_TIMEOUT_MSEC = 10000;
 
 const params = new URLSearchParams(window.location.search);
@@ -67,6 +70,7 @@ const App = () => {
   const [connectionStatus, setConnectionStatus] = useState<
     "disconnected" | "connected" | "error"
   >("disconnected");
+  const [serverCapabilities, setServerCapabilities] = useState<ServerCapabilities | null>(null);
   const [resources, setResources] = useState<Resource[]>([]);
   const [resourceTemplates, setResourceTemplates] = useState<
     ResourceTemplate[]
@@ -455,6 +459,9 @@ const App = () => {
 
       await client.connect(clientTransport);
 
+      const capabilities = client.getServerCapabilities();
+      setServerCapabilities(capabilities ?? null);
+
       client.setRequestHandler(CreateMessageRequestSchema, (request) => {
         return new Promise<CreateMessageResult>((resolve, reject) => {
           setPendingSampleRequests((prev) => [
@@ -497,20 +504,27 @@ const App = () => {
         <div className="flex-1 overflow-auto">
           {mcpClient ? (
             <Tabs
-              defaultValue={window.location.hash.slice(1) || "resources"}
+              defaultValue={
+                Object.keys(serverCapabilities ?? {}).includes(window.location.hash.slice(1)) ?
+                window.location.hash.slice(1) :
+                serverCapabilities?.resources ? "resources" :
+                serverCapabilities?.prompts ? "prompts" :
+                serverCapabilities?.tools ? "tools" :
+                "ping"
+              }
               className="w-full p-4"
               onValueChange={(value) => (window.location.hash = value)}
             >
               <TabsList className="mb-4 p-0">
-                <TabsTrigger value="resources">
+                <TabsTrigger value="resources" disabled={!serverCapabilities?.resources}>
                   <Files className="w-4 h-4 mr-2" />
                   Resources
                 </TabsTrigger>
-                <TabsTrigger value="prompts">
+                <TabsTrigger value="prompts" disabled={!serverCapabilities?.prompts}>
                   <MessageSquare className="w-4 h-4 mr-2" />
                   Prompts
                 </TabsTrigger>
-                <TabsTrigger value="tools">
+                <TabsTrigger value="tools" disabled={!serverCapabilities?.tools}>
                   <Hammer className="w-4 h-4 mr-2" />
                   Tools
                 </TabsTrigger>
@@ -534,6 +548,14 @@ const App = () => {
               </TabsList>
 
               <div className="w-full">
+                {!serverCapabilities?.resources && !serverCapabilities?.prompts && !serverCapabilities?.tools ? (
+                  <div className="flex items-center justify-center p-4">
+                    <p className="text-lg text-gray-500">
+                      The connected server does not support any MCP capabilities
+                    </p>
+                  </div>
+                ) : (
+                  <>
                     <ResourcesTab
                       resources={resources}
                       resourceTemplates={resourceTemplates}
@@ -635,6 +657,8 @@ const App = () => {
                       setRoots={setRoots}
                       onRootsChange={handleRootsChange}
                     />
+                  </>
+                )}
               </div>
             </Tabs>
           ) : (