refactor: simplify capability handling and remove context provider

- Remove redundant useEffect for capability checking
- Remove CapabilityContext provider pattern
- Set default tab to first supported capability
- Add fallback UI for unsupported capabilities
- Delete unused contexts.ts file

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,7 +56,12 @@ import SamplingTab, { PendingRequest } from "./components/SamplingTab";
 import Sidebar from "./components/Sidebar";
 import ToolsTab from "./components/ToolsTab";
 
-import { CapabilityContext, ServerCapabilities } from "@/lib/contexts";
+type ServerCapabilities = z.infer<typeof ServerCapabilitiesSchema>;
+
+type ServerCapabilities = z.infer<typeof ServerCapabilitiesSchema>;
+
+type ServerCapabilities = z.infer<typeof ServerCapabilitiesSchema>;
+
 
 const DEFAULT_REQUEST_TIMEOUT_MSEC = 10000;
 
@@ -220,12 +226,7 @@ const App = () => {
     rootsRef.current = roots;
   }, [roots]);
 
-  useEffect(() => {
+
-    if (mcpClient) {
-      const capabilities = mcpClient.getServerCapabilities();
-      setServerCapabilities(capabilities ?? null);
-    }
-  }, [mcpClient]);
 
   const pushHistory = (request: object, response?: object) => {
     setRequestHistory((prev) => [
@@ -498,18 +499,25 @@ const App = () => {
       <div className="flex-1 flex flex-col overflow-hidden">
         <div className="flex-1 overflow-auto">
           {mcpClient ? (
-            <CapabilityContext.Provider value={serverCapabilities}>
+            <Tabs
-              <Tabs defaultValue="resources" className="w-full p-4">
+              defaultValue={
+                serverCapabilities?.resources ? "resources" :
+                serverCapabilities?.prompts ? "prompts" :
+                serverCapabilities?.tools ? "tools" :
+                "ping"
+              }
+              className="w-full p-4"
+            >
               <TabsList className="mb-4 p-0">
-                  <TabsTrigger value="resources" disabled={!serverCapabilities?.resources}>
+                <TabsTrigger value="resources">
                   <Files className="w-4 h-4 mr-2" />
                   Resources
                 </TabsTrigger>
-                  <TabsTrigger value="prompts" disabled={!serverCapabilities?.prompts}>
+                <TabsTrigger value="prompts">
                   <MessageSquare className="w-4 h-4 mr-2" />
                   Prompts
                 </TabsTrigger>
-                  <TabsTrigger value="tools" disabled={!serverCapabilities?.tools}>
+                <TabsTrigger value="tools">
                   <Hammer className="w-4 h-4 mr-2" />
                   Tools
                 </TabsTrigger>
@@ -533,12 +541,22 @@ 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}
                       listResources={() => {
                         clearError("resources");
+                        if (serverCapabilities?.resources) {
                           listResources();
+                        }
                       }}
                       clearResources={() => {
                         setResources([]);
@@ -546,7 +564,9 @@ const App = () => {
                       }}
                       listResourceTemplates={() => {
                         clearError("resources");
+                        if (serverCapabilities?.resources) {
                           listResourceTemplates();
+                        }
                       }}
                       clearResourceTemplates={() => {
                         setResourceTemplates([]);
@@ -554,7 +574,9 @@ const App = () => {
                       }}
                       readResource={(uri) => {
                         clearError("resources");
+                        if (serverCapabilities?.resources) {
                           readResource(uri);
+                        }
                       }}
                       selectedResource={selectedResource}
                       setSelectedResource={(resource) => {
@@ -570,7 +592,9 @@ const App = () => {
                       prompts={prompts}
                       listPrompts={() => {
                         clearError("prompts");
+                        if (serverCapabilities?.prompts) {
                           listPrompts();
+                        }
                       }}
                       clearPrompts={() => {
                         setPrompts([]);
@@ -578,7 +602,9 @@ const App = () => {
                       }}
                       getPrompt={(name, args) => {
                         clearError("prompts");
+                        if (serverCapabilities?.prompts) {
                           getPrompt(name, args);
+                        }
                       }}
                       selectedPrompt={selectedPrompt}
                       setSelectedPrompt={(prompt) => {
@@ -593,7 +619,9 @@ const App = () => {
                       tools={tools}
                       listTools={() => {
                         clearError("tools");
+                        if (serverCapabilities?.tools) {
                           listTools();
+                        }
                       }}
                       clearTools={() => {
                         setTools([]);
@@ -601,7 +629,9 @@ const App = () => {
                       }}
                       callTool={(name, params) => {
                         clearError("tools");
+                        if (serverCapabilities?.tools) {
                           callTool(name, params);
+                        }
                       }}
                       selectedTool={selectedTool}
                       setSelectedTool={(tool) => {
@@ -634,9 +664,10 @@ const App = () => {
                       setRoots={setRoots}
                       onRootsChange={handleRootsChange}
                     />
+                  </>
+                )}
               </div>
             </Tabs>
-            </CapabilityContext.Provider>
           ) : (
             <div className="flex items-center justify-center h-full">
               <p className="text-lg text-gray-500">

client/src/lib/contexts.ts

@@ -1,12 +0,0 @@
-import { createContext, useContext } from "react";
-import { ServerCapabilitiesSchema } from "@modelcontextprotocol/sdk/types.js";
-import type { z } from "zod";
-
-export type ServerCapabilities = z.infer<typeof ServerCapabilitiesSchema>;
-
-export const CapabilityContext = createContext<ServerCapabilities | null>(null);
-
-export function useServerCapability(capability: keyof ServerCapabilities): boolean {
-  const capabilities = useContext(CapabilityContext);
-  return !!capabilities?.[capability];
-}