hzhang/inspector
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: simplify capability handling and remove context provider

Browse Source 
- 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
This commit is contained in:
Devin AI
2024-12-09 10:11:03 +00:00
parent e96b3be159
commit d857e1462b
2 changed files with 178 additions and 159 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
client/src/App.tsx
View File

@@ -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 defaultValue="resources" className="w-full p-4">
<Tabs
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">

12
client/src/lib/contexts.ts
View File

@@ -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];
}