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

Merge pull request #54 from modelcontextprotocol/justin/redo-sidebars

Browse Source 
Revamp UI + panes
This commit is contained in:
Justin Spahr-Summers
2024-11-12 15:31:21 +00:00
committed by GitHub
parent ab9c130610 54012aca6a
commit e4faa19acb
4 changed files with 375 additions and 266 deletions
Download Patch File Download Diff File Expand all files Collapse all files

416
client/src/App.tsx
View File

@@ -22,21 +22,12 @@ import {
CompatibilityCallToolResult, CompatibilityCallToolResult,
ClientNotification, ClientNotification,
} from "@modelcontextprotocol/sdk/types.js"; } from "@modelcontextprotocol/sdk/types.js";
import { useEffect, useRef, useState } from "react"; import { useCallback, useEffect, useRef, useState } from "react";
// Add dark mode class based on system preference // Add dark mode class based on system preference
if (window.matchMedia("(prefers-color-scheme: dark)").matches) { if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
document.documentElement.classList.add("dark"); document.documentElement.classList.add("dark");
} }
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from "@/components/ui/select";
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs"; import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { import {
Bell, Bell,
@@ -44,12 +35,9 @@ import {
Hammer, Hammer,
Hash, Hash,
MessageSquare, MessageSquare,
Play,
Send, Send,
Terminal, Terminal,
FolderTree, FolderTree,
ChevronDown,
ChevronRight,
} from "lucide-react"; } from "lucide-react";
import { ZodType } from "zod"; import { ZodType } from "zod";
@@ -95,7 +83,6 @@ const App = () => {
const [notifications, setNotifications] = useState<ServerNotification[]>([]); const [notifications, setNotifications] = useState<ServerNotification[]>([]);
const [roots, setRoots] = useState<Root[]>([]); const [roots, setRoots] = useState<Root[]>([]);
const [env, setEnv] = useState<Record<string, string>>({}); const [env, setEnv] = useState<Record<string, string>>({});
const [showEnvVars, setShowEnvVars] = useState(false);
const [pendingSampleRequests, setPendingSampleRequests] = useState< const [pendingSampleRequests, setPendingSampleRequests] = useState<
Array< Array<
@@ -140,6 +127,49 @@ const App = () => {
>(); >();
const [nextToolCursor, setNextToolCursor] = useState<string | undefined>(); const [nextToolCursor, setNextToolCursor] = useState<string | undefined>();
const progressTokenRef = useRef(0); const progressTokenRef = useRef(0);
const [historyPaneHeight, setHistoryPaneHeight] = useState<number>(300);
const [isDragging, setIsDragging] = useState(false);
const dragStartY = useRef<number>(0);
const dragStartHeight = useRef<number>(0);
const handleDragStart = useCallback(
(e: React.MouseEvent) => {
setIsDragging(true);
dragStartY.current = e.clientY;
dragStartHeight.current = historyPaneHeight;
document.body.style.userSelect = "none";
},
[historyPaneHeight],
);
const handleDragMove = useCallback(
(e: MouseEvent) => {
if (!isDragging) return;
const deltaY = dragStartY.current - e.clientY;
const newHeight = Math.max(
100,
Math.min(800, dragStartHeight.current + deltaY),
);
setHistoryPaneHeight(newHeight);
},
[isDragging],
);
const handleDragEnd = useCallback(() => {
setIsDragging(false);
document.body.style.userSelect = "";
}, []);
useEffect(() => {
if (isDragging) {
window.addEventListener("mousemove", handleDragMove);
window.addEventListener("mouseup", handleDragEnd);
return () => {
window.removeEventListener("mousemove", handleDragMove);
window.removeEventListener("mouseup", handleDragEnd);
};
}
}, [isDragging, handleDragMove, handleDragEnd]);
useEffect(() => { useEffect(() => {
localStorage.setItem("lastCommand", command); localStorage.setItem("lastCommand", command);
@@ -353,231 +383,153 @@ const App = () => {
return ( return (
<div className="flex h-screen bg-background"> <div className="flex h-screen bg-background">
<Sidebar connectionStatus={connectionStatus} /> <Sidebar
connectionStatus={connectionStatus}
transportType={transportType}
setTransportType={setTransportType}
command={command}
setCommand={setCommand}
args={args}
setArgs={setArgs}
url={url}
setUrl={setUrl}
env={env}
setEnv={setEnv}
onConnect={connectMcpServer}
/>
<div className="flex-1 flex flex-col overflow-hidden"> <div className="flex-1 flex flex-col overflow-hidden">
<h1 className="text-2xl font-bold p-4">MCP Inspector</h1> <div className="flex-1 overflow-auto">
<div className="flex-1 overflow-auto flex"> {mcpClient ? (
<div className="flex-1"> <Tabs defaultValue="resources" className="w-full p-4">
<div className="p-4 bg-card shadow-md m-4 rounded-md"> <TabsList className="mb-4 p-0">
<h2 className="text-lg font-semibold mb-2">Connect MCP Server</h2> <TabsTrigger value="resources">
<div className="flex space-x-2 mb-2"> <Files className="w-4 h-4 mr-2" />
<Select Resources
value={transportType} </TabsTrigger>
onValueChange={(value: "stdio" | "sse") => <TabsTrigger value="prompts">
setTransportType(value) <MessageSquare className="w-4 h-4 mr-2" />
} Prompts
> </TabsTrigger>
<SelectTrigger className="w-[180px]"> <TabsTrigger value="requests" disabled>
<SelectValue placeholder="Select transport type" /> <Send className="w-4 h-4 mr-2" />
</SelectTrigger> Requests
<SelectContent> </TabsTrigger>
<SelectItem value="stdio">STDIO</SelectItem> <TabsTrigger value="tools">
<SelectItem value="sse">SSE</SelectItem> <Hammer className="w-4 h-4 mr-2" />
</SelectContent> Tools
</Select> </TabsTrigger>
{transportType === "stdio" ? ( <TabsTrigger value="console" disabled>
<> <Terminal className="w-4 h-4 mr-2" />
<Input Console
placeholder="Command" </TabsTrigger>
value={command} <TabsTrigger value="ping">
onChange={(e) => setCommand(e.target.value)} <Bell className="w-4 h-4 mr-2" />
/> Ping
<Input </TabsTrigger>
placeholder="Arguments (space-separated)" <TabsTrigger value="sampling" className="relative">
value={args} <Hash className="w-4 h-4 mr-2" />
onChange={(e) => setArgs(e.target.value)} Sampling
/> {pendingSampleRequests.length > 0 && (
</> <span className="absolute -top-1 -right-1 bg-red-500 text-white text-xs rounded-full h-4 w-4 flex items-center justify-center">
) : ( {pendingSampleRequests.length}
<Input </span>
placeholder="URL"
value={url}
onChange={(e) => setUrl(e.target.value)}
/>
)}
<Button onClick={connectMcpServer}>
<Play className="w-4 h-4 mr-2" />
Connect
</Button>
</div>
{transportType === "stdio" && (
<div className="mt-4">
<Button
variant="outline"
onClick={() => setShowEnvVars(!showEnvVars)}
className="flex items-center"
>
{showEnvVars ? (
<ChevronDown className="w-4 h-4 mr-2" />
) : (
<ChevronRight className="w-4 h-4 mr-2" />
)}
Environment Variables
</Button>
{showEnvVars && (
<div className="mt-2">
{Object.entries(env).map(([key, value]) => (
<div key={key} className="flex space-x-2 mb-2">
<Input
placeholder="Key"
value={key}
onChange={(e) =>
setEnv((prev) => ({
...prev,
[e.target.value]: value,
}))
}
/>
<Input
placeholder="Value"
value={value}
onChange={(e) =>
setEnv((prev) => ({
...prev,
[key]: e.target.value,
}))
}
/>
<Button
onClick={() =>
setEnv((prev) => {
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const { [key]: _, ...rest } = prev;
return rest;
})
}
>
Remove
</Button>
</div>
))}
<Button
onClick={() => setEnv((prev) => ({ ...prev, "": "" }))}
>
Add Environment Variable
</Button>
</div>
)} )}
</div> </TabsTrigger>
)} <TabsTrigger value="roots">
</div> <FolderTree className="w-4 h-4 mr-2" />
{mcpClient ? ( Roots
<Tabs defaultValue="resources" className="w-full p-4"> </TabsTrigger>
<TabsList className="mb-4 p-0"> </TabsList>
<TabsTrigger value="resources">
<Files className="w-4 h-4 mr-2" />
Resources
</TabsTrigger>
<TabsTrigger value="prompts">
<MessageSquare className="w-4 h-4 mr-2" />
Prompts
</TabsTrigger>
<TabsTrigger value="requests" disabled>
<Send className="w-4 h-4 mr-2" />
Requests
</TabsTrigger>
<TabsTrigger value="tools">
<Hammer className="w-4 h-4 mr-2" />
Tools
</TabsTrigger>
<TabsTrigger value="console" disabled>
<Terminal className="w-4 h-4 mr-2" />
Console
</TabsTrigger>
<TabsTrigger value="ping">
<Bell className="w-4 h-4 mr-2" />
Ping
</TabsTrigger>
<TabsTrigger value="sampling" className="relative">
<Hash className="w-4 h-4 mr-2" />
Sampling
{pendingSampleRequests.length > 0 && (
<span className="absolute -top-1 -right-1 bg-red-500 text-white text-xs rounded-full h-4 w-4 flex items-center justify-center">
{pendingSampleRequests.length}
</span>
)}
</TabsTrigger>
<TabsTrigger value="roots">
<FolderTree className="w-4 h-4 mr-2" />
Roots
</TabsTrigger>
</TabsList>
<div className="w-full"> <div className="w-full">
<ResourcesTab <ResourcesTab
resources={resources} resources={resources}
resourceTemplates={resourceTemplates} resourceTemplates={resourceTemplates}
listResources={listResources} listResources={listResources}
listResourceTemplates={listResourceTemplates} listResourceTemplates={listResourceTemplates}
readResource={readResource} readResource={readResource}
selectedResource={selectedResource} selectedResource={selectedResource}
setSelectedResource={setSelectedResource} setSelectedResource={setSelectedResource}
resourceContent={resourceContent} resourceContent={resourceContent}
nextCursor={nextResourceCursor} nextCursor={nextResourceCursor}
nextTemplateCursor={nextResourceTemplateCursor} nextTemplateCursor={nextResourceTemplateCursor}
error={error} error={error}
/> />
<PromptsTab <PromptsTab
prompts={prompts} prompts={prompts}
listPrompts={listPrompts} listPrompts={listPrompts}
getPrompt={getPrompt} getPrompt={getPrompt}
selectedPrompt={selectedPrompt} selectedPrompt={selectedPrompt}
setSelectedPrompt={setSelectedPrompt} setSelectedPrompt={setSelectedPrompt}
promptContent={promptContent} promptContent={promptContent}
nextCursor={nextPromptCursor} nextCursor={nextPromptCursor}
error={error} error={error}
/> />
<RequestsTab /> <RequestsTab />
<ToolsTab <ToolsTab
tools={tools} tools={tools}
listTools={listTools} listTools={listTools}
callTool={callTool} callTool={callTool}
selectedTool={selectedTool} selectedTool={selectedTool}
setSelectedTool={(tool) => { setSelectedTool={(tool) => {
setSelectedTool(tool); setSelectedTool(tool);
setToolResult(null); setToolResult(null);
}} }}
toolResult={toolResult} toolResult={toolResult}
nextCursor={nextToolCursor} nextCursor={nextToolCursor}
error={error} error={error}
/> />
<ConsoleTab /> <ConsoleTab />
<PingTab <PingTab
onPingClick={() => { onPingClick={() => {
void makeRequest( void makeRequest(
{ {
method: "ping" as const, method: "ping" as const,
}, },
EmptyResultSchema, EmptyResultSchema,
); );
}} }}
/> />
<SamplingTab <SamplingTab
pendingRequests={pendingSampleRequests} pendingRequests={pendingSampleRequests}
onApprove={handleApproveSampling} onApprove={handleApproveSampling}
onReject={handleRejectSampling} onReject={handleRejectSampling}
/> />
<RootsTab <RootsTab
roots={roots} roots={roots}
setRoots={setRoots} setRoots={setRoots}
onRootsChange={handleRootsChange} onRootsChange={handleRootsChange}
/> />
</div>
</Tabs>
) : (
<div className="flex items-center justify-center h-full">
<p className="text-lg text-gray-500">
Connect to an MCP server to start inspecting
</p>
</div> </div>
)} </Tabs>
) : (
<div className="flex items-center justify-center h-full">
<p className="text-lg text-gray-500">
Connect to an MCP server to start inspecting
</p>
</div>
)}
</div>
<div
className="relative border-t border-border"
style={{
height: `${historyPaneHeight}px`,
}}
>
<div
className="absolute w-full h-4 -top-2 cursor-row-resize flex items-center justify-center hover:bg-accent/50"
onMouseDown={handleDragStart}
>
<div className="w-8 h-1 rounded-full bg-border" />
</div>
<div className="h-full overflow-auto">
<HistoryAndNotifications
requestHistory={requestHistory}
serverNotifications={notifications}
/>
</div> </div>
</div> </div>
</div> </div>
<HistoryAndNotifications
requestHistory={requestHistory}
serverNotifications={notifications}
/>
</div> </div>
); );
}; };

6
client/src/components/History.tsx
View File

@@ -29,8 +29,8 @@ const HistoryAndNotifications = ({
}; };
return ( return (
<div className="w-64 bg-card shadow-md p-4 overflow-hidden flex flex-col h-full"> <div className="bg-card overflow-hidden flex h-full">
<div className="flex-1 overflow-y-auto mb-4 border-b pb-4"> <div className="flex-1 overflow-y-auto p-4 border-r">
<h2 className="text-lg font-semibold mb-4">History</h2> <h2 className="text-lg font-semibold mb-4">History</h2>
{requestHistory.length === 0 ? ( {requestHistory.length === 0 ? (
<p className="text-sm text-gray-500 italic">No history yet</p> <p className="text-sm text-gray-500 italic">No history yet</p>
@@ -107,7 +107,7 @@ const HistoryAndNotifications = ({
</ul> </ul>
)} )}
</div> </div>
<div className="flex-1 overflow-y-auto"> <div className="flex-1 overflow-y-auto p-4">
<h2 className="text-lg font-semibold mb-4">Server Notifications</h2> <h2 className="text-lg font-semibold mb-4">Server Notifications</h2>
{serverNotifications.length === 0 ? ( {serverNotifications.length === 0 ? (
<p className="text-sm text-gray-500 italic">No notifications yet</p> <p className="text-sm text-gray-500 italic">No notifications yet</p>

0
client/src/components/HistoryAndNotifications.tsx
View File

219
client/src/components/Sidebar.tsx
View File

@@ -1,39 +1,196 @@
import { Menu, Settings } from "lucide-react"; import { useState } from "react";
import { Play, ChevronDown, ChevronRight, Settings } from "lucide-react";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from "@/components/ui/select";
const Sidebar = ({ connectionStatus }: { connectionStatus: string }) => ( interface SidebarProps {
<div className="w-64 bg-card border-r border-border"> connectionStatus: "disconnected" | "connected" | "error";
<div className="flex items-center p-4 border-b border-gray-200"> transportType: "stdio" | "sse";
<Menu className="w-6 h-6 text-gray-500" /> setTransportType: (type: "stdio" | "sse") => void;
<h1 className="ml-2 text-lg font-semibold">MCP Inspector</h1> command: string;
</div> setCommand: (command: string) => void;
args: string;
setArgs: (args: string) => void;
url: string;
setUrl: (url: string) => void;
env: Record<string, string>;
setEnv: (env: Record<string, string>) => void;
onConnect: () => void;
}
<div className="p-4"> const Sidebar = ({
<div className="flex items-center space-x-2 mb-4"> connectionStatus,
<div transportType,
className={`w-2 h-2 rounded-full ${ setTransportType,
connectionStatus === "connected" command,
? "bg-green-500" setCommand,
: connectionStatus === "error" args,
? "bg-red-500" setArgs,
: "bg-gray-500" url,
}`} setUrl,
/> env,
<span className="text-sm text-gray-600"> setEnv,
{connectionStatus === "connected" onConnect,
? "Connected" }: SidebarProps) => {
: connectionStatus === "error" const [showEnvVars, setShowEnvVars] = useState(false);
? "Connection Error"
: "Disconnected"} return (
</span> <div className="w-80 bg-card border-r border-border flex flex-col h-full">
<div className="flex items-center p-4 border-b border-gray-200">
<Settings className="w-6 h-6 text-gray-500" />
<h1 className="ml-2 text-lg font-semibold">MCP Inspector</h1>
</div> </div>
<Button variant="outline" className="w-full justify-start"> <div className="p-4 flex-1 overflow-auto">
<Settings className="w-4 h-4 mr-2" /> <div className="space-y-4">
Connection Settings <div className="space-y-2">
</Button> <label className="text-sm font-medium">Transport Type</label>
<Select
value={transportType}
onValueChange={(value: "stdio" | "sse") =>
setTransportType(value)
}
>
<SelectTrigger>
<SelectValue placeholder="Select transport type" />
</SelectTrigger>
<SelectContent>
<SelectItem value="stdio">STDIO</SelectItem>
<SelectItem value="sse">SSE</SelectItem>
</SelectContent>
</Select>
</div>
{transportType === "stdio" ? (
<>
<div className="space-y-2">
<label className="text-sm font-medium">Command</label>
<Input
placeholder="Command"
value={command}
onChange={(e) => setCommand(e.target.value)}
/>
</div>
<div className="space-y-2">
<label className="text-sm font-medium">Arguments</label>
<Input
placeholder="Arguments (space-separated)"
value={args}
onChange={(e) => setArgs(e.target.value)}
/>
</div>
</>
) : (
<div className="space-y-2">
<label className="text-sm font-medium">URL</label>
<Input
placeholder="URL"
value={url}
onChange={(e) => setUrl(e.target.value)}
/>
</div>
)}
{transportType === "stdio" && (
<div className="space-y-2">
<Button
variant="outline"
onClick={() => setShowEnvVars(!showEnvVars)}
className="flex items-center w-full"
>
{showEnvVars ? (
<ChevronDown className="w-4 h-4 mr-2" />
) : (
<ChevronRight className="w-4 h-4 mr-2" />
)}
Environment Variables
</Button>
{showEnvVars && (
<div className="space-y-2">
{Object.entries(env).map(([key, value]) => (
<div key={key} className="grid grid-cols-[1fr,auto] gap-2">
<div className="space-y-1">
<Input
placeholder="Key"
value={key}
onChange={(e) => {
const newEnv = { ...env };
newEnv[e.target.value] = value;
setEnv(newEnv);
}}
/>
<Input
placeholder="Value"
value={value}
onChange={(e) => {
const newEnv = { ...env };
newEnv[key] = e.target.value;
setEnv(newEnv);
}}
/>
</div>
<Button
variant="destructive"
onClick={() => {
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const { [key]: removed, ...rest } = env;
setEnv(rest);
}}
>
Remove
</Button>
</div>
))}
<Button
variant="outline"
onClick={() => {
const newEnv = { ...env };
newEnv[""] = "";
setEnv(newEnv);
}}
>
Add Environment Variable
</Button>
</div>
)}
</div>
)}
<div className="space-y-2">
<Button className="w-full" onClick={onConnect}>
<Play className="w-4 h-4 mr-2" />
Connect
</Button>
<div className="flex items-center justify-center space-x-2 mb-4">
<div
className={`w-2 h-2 rounded-full ${
connectionStatus === "connected"
? "bg-green-500"
: connectionStatus === "error"
? "bg-red-500"
: "bg-gray-500"
}`}
/>
<span className="text-sm text-gray-600">
{connectionStatus === "connected"
? "Connected"
: connectionStatus === "error"
? "Connection Error"
: "Disconnected"}
</span>
</div>
</div>
</div>
</div>
</div> </div>
</div> );
); };
export default Sidebar; export default Sidebar;