5104952239
* This fixes #188 * In App.tsx - import LoggingLevel from sdk - add [logLevel, setLogLevel] useState with value of type LoggingLevel initialized to "debug" - add useEffect that stores the new logLevel in localStorage as "logLevel" - added sendLogLevelRequest function that takes a level argument of type LoggingLevel and sends the appropriate request. It calls setLogLevel when done, to update the local UI - pass logLevel and sendLogLevelRequest to Sidebar component as props * In Sidebar.tsx - Import LoggingLevel and LoggingLevelSchema from sdk - add props and prop types for logLevel and sendLogLevelRequest and loggingSupported - add Select component populated with the enum values of LoggingLevelSchema, shown only if loggingSupported is true and connectionStatus is "connected" *
404 lines
14 KiB
TypeScript
404 lines
14 KiB
TypeScript
import { useState } from "react";
|
||
import {
|
||
Play,
|
||
ChevronDown,
|
||
ChevronRight,
|
||
CircleHelp,
|
||
Bug,
|
||
Github,
|
||
Eye,
|
||
EyeOff,
|
||
} from "lucide-react";
|
||
import { Button } from "@/components/ui/button";
|
||
import { Input } from "@/components/ui/input";
|
||
import {
|
||
Select,
|
||
SelectContent,
|
||
SelectItem,
|
||
SelectTrigger,
|
||
SelectValue,
|
||
} from "@/components/ui/select";
|
||
import { StdErrNotification } from "@/lib/notificationTypes";
|
||
import {
|
||
LoggingLevel,
|
||
LoggingLevelSchema,
|
||
} from "@modelcontextprotocol/sdk/types.js";
|
||
|
||
import useTheme from "../lib/useTheme";
|
||
import { version } from "../../../package.json";
|
||
|
||
interface SidebarProps {
|
||
connectionStatus: "disconnected" | "connected" | "error";
|
||
transportType: "stdio" | "sse";
|
||
setTransportType: (type: "stdio" | "sse") => void;
|
||
command: string;
|
||
setCommand: (command: string) => void;
|
||
args: string;
|
||
setArgs: (args: string) => void;
|
||
sseUrl: string;
|
||
setSseUrl: (url: string) => void;
|
||
env: Record<string, string>;
|
||
setEnv: (env: Record<string, string>) => void;
|
||
bearerToken: string;
|
||
setBearerToken: (token: string) => void;
|
||
onConnect: () => void;
|
||
stdErrNotifications: StdErrNotification[];
|
||
logLevel: LoggingLevel;
|
||
sendLogLevelRequest: (level: LoggingLevel) => void;
|
||
loggingSupported: boolean;
|
||
}
|
||
|
||
const Sidebar = ({
|
||
connectionStatus,
|
||
transportType,
|
||
setTransportType,
|
||
command,
|
||
setCommand,
|
||
args,
|
||
setArgs,
|
||
sseUrl,
|
||
setSseUrl,
|
||
env,
|
||
setEnv,
|
||
bearerToken,
|
||
setBearerToken,
|
||
onConnect,
|
||
stdErrNotifications,
|
||
logLevel,
|
||
sendLogLevelRequest,
|
||
loggingSupported,
|
||
}: SidebarProps) => {
|
||
const [theme, setTheme] = useTheme();
|
||
const [showEnvVars, setShowEnvVars] = useState(false);
|
||
const [showBearerToken, setShowBearerToken] = useState(false);
|
||
const [shownEnvVars, setShownEnvVars] = useState<Set<string>>(new Set());
|
||
|
||
return (
|
||
<div className="w-80 bg-card border-r border-border flex flex-col h-full">
|
||
<div className="flex items-center justify-between p-4 border-b border-gray-200">
|
||
<div className="flex items-center">
|
||
<h1 className="ml-2 text-lg font-semibold">
|
||
MCP Inspector v{version}
|
||
</h1>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="p-4 flex-1 overflow-auto">
|
||
<div className="space-y-4">
|
||
<div className="space-y-2">
|
||
<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)}
|
||
className="font-mono"
|
||
/>
|
||
</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)}
|
||
className="font-mono"
|
||
/>
|
||
</div>
|
||
</>
|
||
) : (
|
||
<>
|
||
<div className="space-y-2">
|
||
<label className="text-sm font-medium">URL</label>
|
||
<Input
|
||
placeholder="URL"
|
||
value={sseUrl}
|
||
onChange={(e) => setSseUrl(e.target.value)}
|
||
className="font-mono"
|
||
/>
|
||
</div>
|
||
<div className="space-y-2">
|
||
<Button
|
||
variant="outline"
|
||
onClick={() => setShowBearerToken(!showBearerToken)}
|
||
className="flex items-center w-full"
|
||
>
|
||
{showBearerToken ? (
|
||
<ChevronDown className="w-4 h-4 mr-2" />
|
||
) : (
|
||
<ChevronRight className="w-4 h-4 mr-2" />
|
||
)}
|
||
Authentication
|
||
</Button>
|
||
{showBearerToken && (
|
||
<div className="space-y-2">
|
||
<label className="text-sm font-medium">Bearer Token</label>
|
||
<Input
|
||
placeholder="Bearer Token"
|
||
value={bearerToken}
|
||
onChange={(e) => setBearerToken(e.target.value)}
|
||
className="font-mono"
|
||
type="password"
|
||
/>
|
||
</div>
|
||
)}
|
||
</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], idx) => (
|
||
<div key={idx} className="space-y-2 pb-4">
|
||
<div className="flex gap-2">
|
||
<Input
|
||
placeholder="Key"
|
||
value={key}
|
||
onChange={(e) => {
|
||
const newKey = e.target.value;
|
||
const newEnv = { ...env };
|
||
delete newEnv[key];
|
||
newEnv[newKey] = value;
|
||
setEnv(newEnv);
|
||
setShownEnvVars((prev) => {
|
||
const next = new Set(prev);
|
||
if (next.has(key)) {
|
||
next.delete(key);
|
||
next.add(newKey);
|
||
}
|
||
return next;
|
||
});
|
||
}}
|
||
className="font-mono"
|
||
/>
|
||
<Button
|
||
variant="destructive"
|
||
size="icon"
|
||
className="h-9 w-9 p-0 shrink-0"
|
||
onClick={() => {
|
||
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
||
const { [key]: _removed, ...rest } = env;
|
||
setEnv(rest);
|
||
}}
|
||
>
|
||
×
|
||
</Button>
|
||
</div>
|
||
<div className="flex gap-2">
|
||
<Input
|
||
type={shownEnvVars.has(key) ? "text" : "password"}
|
||
placeholder="Value"
|
||
value={value}
|
||
onChange={(e) => {
|
||
const newEnv = { ...env };
|
||
newEnv[key] = e.target.value;
|
||
setEnv(newEnv);
|
||
}}
|
||
className="font-mono"
|
||
/>
|
||
<Button
|
||
variant="outline"
|
||
size="icon"
|
||
className="h-9 w-9 p-0 shrink-0"
|
||
onClick={() => {
|
||
setShownEnvVars((prev) => {
|
||
const next = new Set(prev);
|
||
if (next.has(key)) {
|
||
next.delete(key);
|
||
} else {
|
||
next.add(key);
|
||
}
|
||
return next;
|
||
});
|
||
}}
|
||
aria-label={
|
||
shownEnvVars.has(key) ? "Hide value" : "Show value"
|
||
}
|
||
aria-pressed={shownEnvVars.has(key)}
|
||
title={
|
||
shownEnvVars.has(key) ? "Hide value" : "Show value"
|
||
}
|
||
>
|
||
{shownEnvVars.has(key) ? (
|
||
<Eye className="h-4 w-4" aria-hidden="true" />
|
||
) : (
|
||
<EyeOff className="h-4 w-4" aria-hidden="true" />
|
||
)}
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
))}
|
||
<Button
|
||
variant="outline"
|
||
className="w-full mt-2"
|
||
onClick={() => {
|
||
const key = "";
|
||
const newEnv = { ...env };
|
||
newEnv[key] = "";
|
||
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>
|
||
|
||
{loggingSupported && connectionStatus === "connected" && (
|
||
<div className="space-y-2">
|
||
<label className="text-sm font-medium">Logging Level</label>
|
||
<Select
|
||
value={logLevel}
|
||
onValueChange={(value: LoggingLevel) =>
|
||
sendLogLevelRequest(value)
|
||
}
|
||
>
|
||
<SelectTrigger>
|
||
<SelectValue placeholder="Select logging level" />
|
||
</SelectTrigger>
|
||
<SelectContent>
|
||
{Object.values(LoggingLevelSchema.enum).map((level) => (
|
||
<SelectItem value={level}>{level}</SelectItem>
|
||
))}
|
||
</SelectContent>
|
||
</Select>
|
||
</div>
|
||
)}
|
||
|
||
{stdErrNotifications.length > 0 && (
|
||
<>
|
||
<div className="mt-4 border-t border-gray-200 pt-4">
|
||
<h3 className="text-sm font-medium">
|
||
Error output from MCP server
|
||
</h3>
|
||
<div className="mt-2 max-h-80 overflow-y-auto">
|
||
{stdErrNotifications.map((notification, index) => (
|
||
<div
|
||
key={index}
|
||
className="text-sm text-red-500 font-mono py-2 border-b border-gray-200 last:border-b-0"
|
||
>
|
||
{notification.params.content}
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className="p-4 border-t">
|
||
<div className="flex items-center justify-between">
|
||
<Select
|
||
value={theme}
|
||
onValueChange={(value: string) =>
|
||
setTheme(value as "system" | "light" | "dark")
|
||
}
|
||
>
|
||
<SelectTrigger className="w-[100px]" id="theme-select">
|
||
<SelectValue />
|
||
</SelectTrigger>
|
||
<SelectContent>
|
||
<SelectItem value="system">System</SelectItem>
|
||
<SelectItem value="light">Light</SelectItem>
|
||
<SelectItem value="dark">Dark</SelectItem>
|
||
</SelectContent>
|
||
</Select>
|
||
|
||
<div className="flex items-center space-x-2">
|
||
<a
|
||
href="https://modelcontextprotocol.io/docs/tools/inspector"
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
>
|
||
<Button variant="ghost" title="Inspector Documentation">
|
||
<CircleHelp className="w-4 h-4 text-gray-800" />
|
||
</Button>
|
||
</a>
|
||
<a
|
||
href="https://modelcontextprotocol.io/docs/tools/debugging"
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
>
|
||
<Button variant="ghost" title="Debugging Guide">
|
||
<Bug className="w-4 h-4 text-gray-800" />
|
||
</Button>
|
||
</a>
|
||
<a
|
||
href="https://github.com/modelcontextprotocol/inspector"
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
>
|
||
<Button
|
||
variant="ghost"
|
||
title="Report bugs or contribute on GitHub"
|
||
>
|
||
<Github className="w-4 h-4 text-gray-800" />
|
||
</Button>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default Sidebar;
|