Merge pull request #105 from devin-open-source/devin/1733551277-capability-negotiation
feat: implement capability negotiation for UI tabs
This commit is contained in:
Ashwin Bhat
@@ -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,107 +548,117 @@ const App = () => {
|
||||
</TabsList>
|
||||
|
||||
<div className="w-full">
|
||||
<ResourcesTab
|
||||
resources={resources}
|
||||
resourceTemplates={resourceTemplates}
|
||||
listResources={() => {
|
||||
clearError("resources");
|
||||
listResources();
|
||||
}}
|
||||
clearResources={() => {
|
||||
setResources([]);
|
||||
setNextResourceCursor(undefined);
|
||||
}}
|
||||
listResourceTemplates={() => {
|
||||
clearError("resources");
|
||||
listResourceTemplates();
|
||||
}}
|
||||
clearResourceTemplates={() => {
|
||||
setResourceTemplates([]);
|
||||
setNextResourceTemplateCursor(undefined);
|
||||
}}
|
||||
readResource={(uri) => {
|
||||
clearError("resources");
|
||||
readResource(uri);
|
||||
}}
|
||||
selectedResource={selectedResource}
|
||||
setSelectedResource={(resource) => {
|
||||
clearError("resources");
|
||||
setSelectedResource(resource);
|
||||
}}
|
||||
resourceContent={resourceContent}
|
||||
nextCursor={nextResourceCursor}
|
||||
nextTemplateCursor={nextResourceTemplateCursor}
|
||||
error={errors.resources}
|
||||
/>
|
||||
<PromptsTab
|
||||
prompts={prompts}
|
||||
listPrompts={() => {
|
||||
clearError("prompts");
|
||||
listPrompts();
|
||||
}}
|
||||
clearPrompts={() => {
|
||||
setPrompts([]);
|
||||
setNextPromptCursor(undefined);
|
||||
}}
|
||||
getPrompt={(name, args) => {
|
||||
clearError("prompts");
|
||||
getPrompt(name, args);
|
||||
}}
|
||||
selectedPrompt={selectedPrompt}
|
||||
setSelectedPrompt={(prompt) => {
|
||||
clearError("prompts");
|
||||
setSelectedPrompt(prompt);
|
||||
}}
|
||||
promptContent={promptContent}
|
||||
nextCursor={nextPromptCursor}
|
||||
error={errors.prompts}
|
||||
/>
|
||||
<ToolsTab
|
||||
tools={tools}
|
||||
listTools={() => {
|
||||
clearError("tools");
|
||||
listTools();
|
||||
}}
|
||||
clearTools={() => {
|
||||
setTools([]);
|
||||
setNextToolCursor(undefined);
|
||||
}}
|
||||
callTool={(name, params) => {
|
||||
clearError("tools");
|
||||
callTool(name, params);
|
||||
}}
|
||||
selectedTool={selectedTool}
|
||||
setSelectedTool={(tool) => {
|
||||
clearError("tools");
|
||||
setSelectedTool(tool);
|
||||
setToolResult(null);
|
||||
}}
|
||||
toolResult={toolResult}
|
||||
nextCursor={nextToolCursor}
|
||||
error={errors.tools}
|
||||
/>
|
||||
<ConsoleTab />
|
||||
<PingTab
|
||||
onPingClick={() => {
|
||||
void makeRequest(
|
||||
{
|
||||
method: "ping" as const,
|
||||
},
|
||||
EmptyResultSchema,
|
||||
);
|
||||
}}
|
||||
/>
|
||||
<SamplingTab
|
||||
pendingRequests={pendingSampleRequests}
|
||||
onApprove={handleApproveSampling}
|
||||
onReject={handleRejectSampling}
|
||||
/>
|
||||
<RootsTab
|
||||
roots={roots}
|
||||
setRoots={setRoots}
|
||||
onRootsChange={handleRootsChange}
|
||||
/>
|
||||
{!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");
|
||||
listResources();
|
||||
}}
|
||||
clearResources={() => {
|
||||
setResources([]);
|
||||
setNextResourceCursor(undefined);
|
||||
}}
|
||||
listResourceTemplates={() => {
|
||||
clearError("resources");
|
||||
listResourceTemplates();
|
||||
}}
|
||||
clearResourceTemplates={() => {
|
||||
setResourceTemplates([]);
|
||||
setNextResourceTemplateCursor(undefined);
|
||||
}}
|
||||
readResource={(uri) => {
|
||||
clearError("resources");
|
||||
readResource(uri);
|
||||
}}
|
||||
selectedResource={selectedResource}
|
||||
setSelectedResource={(resource) => {
|
||||
clearError("resources");
|
||||
setSelectedResource(resource);
|
||||
}}
|
||||
resourceContent={resourceContent}
|
||||
nextCursor={nextResourceCursor}
|
||||
nextTemplateCursor={nextResourceTemplateCursor}
|
||||
error={errors.resources}
|
||||
/>
|
||||
<PromptsTab
|
||||
prompts={prompts}
|
||||
listPrompts={() => {
|
||||
clearError("prompts");
|
||||
listPrompts();
|
||||
}}
|
||||
clearPrompts={() => {
|
||||
setPrompts([]);
|
||||
setNextPromptCursor(undefined);
|
||||
}}
|
||||
getPrompt={(name, args) => {
|
||||
clearError("prompts");
|
||||
getPrompt(name, args);
|
||||
}}
|
||||
selectedPrompt={selectedPrompt}
|
||||
setSelectedPrompt={(prompt) => {
|
||||
clearError("prompts");
|
||||
setSelectedPrompt(prompt);
|
||||
}}
|
||||
promptContent={promptContent}
|
||||
nextCursor={nextPromptCursor}
|
||||
error={errors.prompts}
|
||||
/>
|
||||
<ToolsTab
|
||||
tools={tools}
|
||||
listTools={() => {
|
||||
clearError("tools");
|
||||
listTools();
|
||||
}}
|
||||
clearTools={() => {
|
||||
setTools([]);
|
||||
setNextToolCursor(undefined);
|
||||
}}
|
||||
callTool={(name, params) => {
|
||||
clearError("tools");
|
||||
callTool(name, params);
|
||||
}}
|
||||
selectedTool={selectedTool}
|
||||
setSelectedTool={(tool) => {
|
||||
clearError("tools");
|
||||
setSelectedTool(tool);
|
||||
setToolResult(null);
|
||||
}}
|
||||
toolResult={toolResult}
|
||||
nextCursor={nextToolCursor}
|
||||
error={errors.tools}
|
||||
/>
|
||||
<ConsoleTab />
|
||||
<PingTab
|
||||
onPingClick={() => {
|
||||
void makeRequest(
|
||||
{
|
||||
method: "ping" as const,
|
||||
},
|
||||
EmptyResultSchema,
|
||||
);
|
||||
}}
|
||||
/>
|
||||
<SamplingTab
|
||||
pendingRequests={pendingSampleRequests}
|
||||
onApprove={handleApproveSampling}
|
||||
onReject={handleRejectSampling}
|
||||
/>
|
||||
<RootsTab
|
||||
roots={roots}
|
||||
setRoots={setRoots}
|
||||
onRootsChange={handleRootsChange}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</Tabs>
|
||||
) : (
|
||||
|
||||
Reference in New Issue
Block a user