+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 | + + + + + + + + + + + + + + + + | #!/usr/bin/env node + +import { join, dirname } from "path"; +import { fileURLToPath } from "url"; +import handler from "serve-handler"; +import http from "http"; + +const __dirname = dirname(fileURLToPath(import.meta.url)); +const distPath = join(__dirname, "../dist"); + +const server = http.createServer((request, response) => { + return handler(request, response, { public: distPath }); +}); + +const port = process.env.PORT || 5173; +server.listen(port, () => {}); + |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| File | ++ | Statements | ++ | Branches | ++ | Functions | ++ | Lines | ++ |
|---|---|---|---|---|---|---|---|---|---|
| cli.js | +
+
+ |
+ 0% | +0/16 | +0% | +0/1 | +0% | +0/1 | +0% | +0/16 | +
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| File | ++ | Statements | ++ | Branches | ++ | Functions | ++ | Lines | ++ |
|---|---|---|---|---|---|---|---|---|---|
| postcss.config.js | +
+
+ |
+ 0% | +0/6 | +0% | +0/1 | +0% | +0/1 | +0% | +0/6 | +
| tailwind.config.js | +
+
+ |
+ 0% | +0/58 | +0% | +0/1 | +0% | +0/1 | +0% | +0/58 | +
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 | + + + + + + | export default { + plugins: { + tailwindcss: {}, + autoprefixer: {}, + }, +}; + |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 +82 +83 +84 +85 +86 +87 +88 +89 +90 +91 +92 +93 +94 +95 +96 +97 +98 +99 +100 +101 +102 +103 +104 +105 +106 +107 +108 +109 +110 +111 +112 +113 +114 +115 +116 +117 +118 +119 +120 +121 +122 +123 +124 +125 +126 +127 +128 +129 +130 +131 +132 +133 +134 +135 +136 +137 +138 +139 +140 +141 +142 +143 +144 +145 +146 +147 +148 +149 +150 +151 +152 +153 +154 +155 +156 +157 +158 +159 +160 +161 +162 +163 +164 +165 +166 +167 +168 +169 +170 +171 +172 +173 +174 +175 +176 +177 +178 +179 +180 +181 +182 +183 +184 +185 +186 +187 +188 +189 +190 +191 +192 +193 +194 +195 +196 +197 +198 +199 +200 +201 +202 +203 +204 +205 +206 +207 +208 +209 +210 +211 +212 +213 +214 +215 +216 +217 +218 +219 +220 +221 +222 +223 +224 +225 +226 +227 +228 +229 +230 +231 +232 +233 +234 +235 +236 +237 +238 +239 +240 +241 +242 +243 +244 +245 +246 +247 +248 +249 +250 +251 +252 +253 +254 +255 +256 +257 +258 +259 +260 +261 +262 +263 +264 +265 +266 +267 +268 +269 +270 +271 +272 +273 +274 +275 +276 +277 +278 +279 +280 +281 +282 +283 +284 +285 +286 +287 +288 +289 +290 +291 +292 +293 +294 +295 +296 +297 +298 +299 +300 +301 +302 +303 +304 +305 +306 +307 +308 +309 +310 +311 +312 +313 +314 +315 +316 +317 +318 +319 +320 +321 +322 +323 +324 +325 +326 +327 +328 +329 +330 +331 +332 +333 +334 +335 +336 +337 +338 +339 +340 +341 +342 +343 +344 +345 +346 +347 +348 +349 +350 +351 +352 +353 +354 +355 +356 +357 +358 +359 +360 +361 +362 +363 +364 +365 +366 +367 +368 +369 +370 +371 +372 +373 +374 +375 +376 +377 +378 +379 +380 +381 +382 +383 +384 +385 +386 +387 +388 +389 +390 +391 +392 +393 +394 +395 +396 +397 +398 +399 +400 +401 +402 +403 +404 +405 +406 +407 +408 +409 +410 +411 +412 +413 +414 +415 +416 +417 +418 +419 +420 +421 +422 +423 +424 +425 +426 +427 +428 +429 +430 +431 +432 +433 +434 +435 +436 +437 +438 +439 +440 +441 +442 +443 +444 +445 +446 +447 +448 +449 +450 +451 +452 +453 +454 +455 +456 +457 +458 +459 +460 +461 +462 +463 +464 +465 +466 +467 +468 +469 +470 +471 +472 +473 +474 +475 +476 +477 +478 +479 +480 +481 +482 +483 +484 +485 +486 +487 +488 +489 +490 +491 +492 +493 +494 +495 +496 +497 +498 +499 +500 +501 +502 +503 +504 +505 +506 +507 +508 +509 +510 +511 +512 +513 +514 +515 +516 +517 +518 +519 +520 +521 +522 +523 +524 +525 +526 +527 +528 +529 +530 +531 +532 +533 +534 +535 +536 +537 | 1x +1x + + + + + + + + + + + + + + + + + +1x +1x + + + +1x + + + + + + + +1x + + +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x + +1x +1x +1x + +1x +16x +16x + +16x +16x +16x +16x +16x +16x +16x +16x +16x +16x +16x +16x +16x +7x +16x +16x +7x +16x + +16x +16x +16x +16x + +16x +16x +16x + +16x + + + + + + +16x +16x +16x + +16x + + + + + + + +16x + + + + + + + +16x +16x +16x +16x +16x +16x + +16x +16x + +16x +16x + +16x +16x +16x + +16x +16x +16x +16x + +16x +16x +16x +16x +16x +16x +16x +16x +16x +16x +16x +16x +16x +16x +16x +16x + + +16x + + +16x +1x +1x +1x +1x +1x +16x +16x + +16x + + + + + + + + + + + + + + + + + + + + + + +16x +10x +16x + +16x +8x +16x + +16x +7x +7x +7x +7x +7x +7x +7x +7x +7x +7x +7x +7x + +7x +16x + +16x +7x +16x + +16x +7x +7x +7x +16x + +16x + + + +16x + + + + + + + + + + + + +16x + + + + + + + + + + + + + + + + +16x + + + + + + + + + + + +16x + + + + + + + + + + + + +16x + + + + + + + + + + + +16x + + + + + + + + + + + + +16x + + + + + + + + + + + + + + + + + +16x + + + +16x +16x +16x +16x +16x +16x +16x +16x +16x +16x +16x +16x +16x +16x +16x +16x +16x +16x +16x +16x +9x +9x +9x + +9x +7x +5x +5x + +9x +9x + +9x +9x +9x + +9x +9x +9x + +9x +9x +9x + +9x +9x +9x + +9x +9x +9x + +9x +1x +1x +1x + +9x +9x +9x + +9x +9x + +9x +9x +5x +5x + +5x +5x + +4x +4x +4x +4x +4x + + + +4x + + + +4x + + + +4x + + + +4x + + + +4x +4x + + + +4x +4x +4x +4x +4x +4x +4x +4x + + + +4x + + + +4x + + + +4x +4x + + + +4x +4x +4x +4x +4x +4x +4x + + + +4x + + + +4x + + + +4x +4x + + + + +4x +4x +4x +4x +4x +4x +4x + + + + + + + +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x + +9x +9x + +7x +7x + +7x +7x + +16x +16x +16x +16x +16x +16x + +16x +16x +16x + +16x +16x +16x +16x +16x +16x +16x +16x +16x +16x +16x + +16x + +1x + | import { useDraggablePane } from "./lib/hooks/useDraggablePane";
+import { useConnection } from "./lib/hooks/useConnection";
+import {
+ ClientRequest,
+ CompatibilityCallToolResult,
+ CompatibilityCallToolResultSchema,
+ CreateMessageResult,
+ EmptyResultSchema,
+ GetPromptResultSchema,
+ ListPromptsResultSchema,
+ ListResourcesResultSchema,
+ ListResourceTemplatesResultSchema,
+ ReadResourceResultSchema,
+ ListToolsResultSchema,
+ Resource,
+ ResourceTemplate,
+ Root,
+ ServerNotification,
+ Tool
+} from "@modelcontextprotocol/sdk/types.js";
+import { useEffect, useRef, useState } from "react";
+
+import { StdErrNotification } from "./lib/notificationTypes";
+
+import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import {
+ Bell,
+ Files,
+ FolderTree,
+ Hammer,
+ Hash,
+ MessageSquare,
+} from "lucide-react";
+
+import { z } from "zod";
+import "./App.css";
+import ConsoleTab from "./components/ConsoleTab";
+import HistoryAndNotifications from "./components/History";
+import PingTab from "./components/PingTab";
+import PromptsTab, { Prompt } from "./components/PromptsTab";
+import ResourcesTab from "./components/ResourcesTab";
+import RootsTab from "./components/RootsTab";
+import SamplingTab, { PendingRequest } from "./components/SamplingTab";
+import Sidebar from "./components/Sidebar";
+import ToolsTab from "./components/ToolsTab";
+
+const params = new URLSearchParams(window.location.search);
+const PROXY_PORT = params.get("proxyPort") ?? "3000";
+const PROXY_SERVER_URL = `http://localhost:${PROXY_PORT}`;
+
+const App = () => {
+ const [resources, setResources] = useState<Resource[]>([]);
+ const [resourceTemplates, setResourceTemplates] = useState<
+ ResourceTemplate[]
+ >([]);
+ const [resourceContent, setResourceContent] = useState<string>("");
+ const [prompts, setPrompts] = useState<Prompt[]>([]);
+ const [promptContent, setPromptContent] = useState<string>("");
+ const [tools, setTools] = useState<Tool[]>([]);
+ const [toolResult, setToolResult] =
+ useState<CompatibilityCallToolResult | null>(null);
+ const [errors, setErrors] = useState<Record<string, string | null>>({
+ resources: null,
+ prompts: null,
+ tools: null,
+ });
+ const [command, setCommand] = useState<string>(() => {
+ return localStorage.getItem("lastCommand") || "mcp-server-everything";
+ });
+ const [args, setArgs] = useState<string>(() => {
+ return localStorage.getItem("lastArgs") || "";
+ });
+
+ const [sseUrl, setSseUrl] = useState<string>("http://localhost:3001/sse");
+ const [transportType, setTransportType] = useState<"stdio" | "sse">("stdio");
+ const [notifications, setNotifications] = useState<ServerNotification[]>([]);
+ const [stdErrNotifications, setStdErrNotifications] = useState<
+ StdErrNotification[]
+ >([]);
+ const [roots, setRoots] = useState<Root[]>([]);
+ const [env, setEnv] = useState<Record<string, string>>({});
+
+ const [pendingSampleRequests, setPendingSampleRequests] = useState<
+ Array<
+ PendingRequest & {
+ resolve: (result: CreateMessageResult) => void;
+ reject: (error: Error) => void;
+ }
+ >
+ >([]);
+ const nextRequestId = useRef(0);
+ const rootsRef = useRef<Root[]>([]);
+
+ const handleApproveSampling = (id: number, result: CreateMessageResult) => {
+ setPendingSampleRequests((prev) => {
+ const request = prev.find((r) => r.id === id);
+ request?.resolve(result);
+ return prev.filter((r) => r.id !== id);
+ });
+ };
+
+ const handleRejectSampling = (id: number) => {
+ setPendingSampleRequests((prev) => {
+ const request = prev.find((r) => r.id === id);
+ request?.reject(new Error("Sampling request rejected"));
+ return prev.filter((r) => r.id !== id);
+ });
+ };
+
+ const [selectedResource, setSelectedResource] = useState<Resource | null>(
+ null,
+ );
+ const [selectedPrompt, setSelectedPrompt] = useState<Prompt | null>(null);
+ const [selectedTool, setSelectedTool] = useState<Tool | null>(null);
+ const [nextResourceCursor, setNextResourceCursor] = useState<
+ string | undefined
+ >();
+ const [nextResourceTemplateCursor, setNextResourceTemplateCursor] = useState<
+ string | undefined
+ >();
+ const [nextPromptCursor, setNextPromptCursor] = useState<
+ string | undefined
+ >();
+ const [nextToolCursor, setNextToolCursor] = useState<string | undefined>();
+ const progressTokenRef = useRef(0);
+
+ const {
+ height: historyPaneHeight,
+ handleDragStart
+ } = useDraggablePane(300);
+
+ const {
+ connectionStatus,
+ serverCapabilities,
+ mcpClient,
+ requestHistory,
+ makeRequest: makeConnectionRequest,
+ sendNotification,
+ connect: connectMcpServer
+ } = useConnection({
+ transportType,
+ command,
+ args,
+ sseUrl,
+ env,
+ proxyServerUrl: PROXY_SERVER_URL,
+ onNotification: (notification) => {
+ setNotifications(prev => [...prev, notification as ServerNotification]);
+ },
+ onStdErrNotification: (notification) => {
+ setStdErrNotifications(prev => [...prev, notification as StdErrNotification]);
+ },
+ onPendingRequest: (request, resolve, reject) => {
+ setPendingSampleRequests(prev => [
+ ...prev,
+ { id: nextRequestId.current++, request, resolve, reject }
+ ]);
+ },
+ getRoots: () => rootsRef.current
+ });
+
+ const makeRequest = async <T extends z.ZodType>(
+ request: ClientRequest,
+ schema: T,
+ tabKey?: keyof typeof errors,
+ ) => {
+ try {
+ const response = await makeConnectionRequest(request, schema);
+ if (tabKey !== undefined) {
+ clearError(tabKey);
+ }
+ return response;
+ } catch (e) {
+ const errorString = (e as Error).message ?? String(e);
+ if (tabKey !== undefined) {
+ setErrors((prev) => ({
+ ...prev,
+ [tabKey]: errorString,
+ }));
+ }
+ throw e;
+ }
+ };
+
+ useEffect(() => {
+ localStorage.setItem("lastCommand", command);
+ }, [command]);
+
+ useEffect(() => {
+ localStorage.setItem("lastArgs", args);
+ }, [args]);
+
+ useEffect(() => {
+ fetch(`${PROXY_SERVER_URL}/config`)
+ .then((response) => response.json())
+ .then((data) => {
+ setEnv(data.defaultEnvironment);
+ if (data.defaultCommand) {
+ setCommand(data.defaultCommand);
+ }
+ if (data.defaultArgs) {
+ setArgs(data.defaultArgs);
+ }
+ })
+ .catch((error) =>
+ console.error("Error fetching default environment:", error),
+ );
+ }, []);
+
+ useEffect(() => {
+ rootsRef.current = roots;
+ }, [roots]);
+
+ useEffect(() => {
+ if (!window.location.hash) {
+ window.location.hash = "resources";
+ }
+ }, []);
+
+ const clearError = (tabKey: keyof typeof errors) => {
+ setErrors((prev) => ({ ...prev, [tabKey]: null }));
+ };
+
+ const listResources = async () => {
+ const response = await makeRequest(
+ {
+ method: "resources/list" as const,
+ params: nextResourceCursor ? { cursor: nextResourceCursor } : {},
+ },
+ ListResourcesResultSchema,
+ "resources",
+ );
+ setResources(resources.concat(response.resources ?? []));
+ setNextResourceCursor(response.nextCursor);
+ };
+
+ const listResourceTemplates = async () => {
+ const response = await makeRequest(
+ {
+ method: "resources/templates/list" as const,
+ params: nextResourceTemplateCursor
+ ? { cursor: nextResourceTemplateCursor }
+ : {},
+ },
+ ListResourceTemplatesResultSchema,
+ "resources",
+ );
+ setResourceTemplates(
+ resourceTemplates.concat(response.resourceTemplates ?? []),
+ );
+ setNextResourceTemplateCursor(response.nextCursor);
+ };
+
+ const readResource = async (uri: string) => {
+ const response = await makeRequest(
+ {
+ method: "resources/read" as const,
+ params: { uri },
+ },
+ ReadResourceResultSchema,
+ "resources",
+ );
+ setResourceContent(JSON.stringify(response, null, 2));
+ };
+
+ const listPrompts = async () => {
+ const response = await makeRequest(
+ {
+ method: "prompts/list" as const,
+ params: nextPromptCursor ? { cursor: nextPromptCursor } : {},
+ },
+ ListPromptsResultSchema,
+ "prompts",
+ );
+ setPrompts(response.prompts);
+ setNextPromptCursor(response.nextCursor);
+ };
+
+ const getPrompt = async (name: string, args: Record<string, string> = {}) => {
+ const response = await makeRequest(
+ {
+ method: "prompts/get" as const,
+ params: { name, arguments: args },
+ },
+ GetPromptResultSchema,
+ "prompts",
+ );
+ setPromptContent(JSON.stringify(response, null, 2));
+ };
+
+ const listTools = async () => {
+ const response = await makeRequest(
+ {
+ method: "tools/list" as const,
+ params: nextToolCursor ? { cursor: nextToolCursor } : {},
+ },
+ ListToolsResultSchema,
+ "tools",
+ );
+ setTools(response.tools);
+ setNextToolCursor(response.nextCursor);
+ };
+
+ const callTool = async (name: string, params: Record<string, unknown>) => {
+ const response = await makeRequest(
+ {
+ method: "tools/call" as const,
+ params: {
+ name,
+ arguments: params,
+ _meta: {
+ progressToken: progressTokenRef.current++,
+ },
+ },
+ },
+ CompatibilityCallToolResultSchema,
+ "tools",
+ );
+ setToolResult(response);
+ };
+
+ const handleRootsChange = async () => {
+ await sendNotification({ method: "notifications/roots/list_changed" });
+ };
+
+ return (
+ <div className="flex h-screen bg-background">
+ <Sidebar
+ connectionStatus={connectionStatus}
+ transportType={transportType}
+ setTransportType={setTransportType}
+ command={command}
+ setCommand={setCommand}
+ args={args}
+ setArgs={setArgs}
+ sseUrl={sseUrl}
+ setSseUrl={setSseUrl}
+ env={env}
+ setEnv={setEnv}
+ onConnect={connectMcpServer}
+ stdErrNotifications={stdErrNotifications}
+ />
+ <div className="flex-1 flex flex-col overflow-hidden">
+ <div className="flex-1 overflow-auto">
+ {mcpClient ? (
+ <Tabs
+ 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" disabled={!serverCapabilities?.resources}>
+ <Files className="w-4 h-4 mr-2" />
+ Resources
+ </TabsTrigger>
+ <TabsTrigger value="prompts" disabled={!serverCapabilities?.prompts}>
+ <MessageSquare className="w-4 h-4 mr-2" />
+ Prompts
+ </TabsTrigger>
+ <TabsTrigger value="tools" disabled={!serverCapabilities?.tools}>
+ <Hammer className="w-4 h-4 mr-2" />
+ Tools
+ </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">
+ {!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>
+ ) : (
+ <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>
+ );
+};
+
+export default App;
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 | 1x + +1x +4x +4x +4x + +4x +4x + + +1x + | import { TabsContent } from "@/components/ui/tabs";
+
+const ConsoleTab = () => (
+ <TabsContent value="console" className="h-96">
+ <div className="bg-gray-900 text-gray-100 p-4 rounded-lg h-full font-mono text-sm overflow-auto">
+ <div className="opacity-50">Welcome to MCP Client Console</div>
+ {/* Console output would go here */}
+ </div>
+ </TabsContent>
+);
+
+export default ConsoleTab;
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 +82 +83 +84 +85 +86 +87 +88 +89 +90 +91 +92 +93 +94 +95 +96 +97 +98 +99 +100 +101 +102 +103 +104 +105 +106 +107 +108 +109 +110 +111 +112 +113 +114 +115 +116 +117 +118 +119 +120 +121 +122 +123 +124 +125 +126 +127 +128 +129 +130 +131 +132 +133 +134 +135 +136 +137 +138 +139 +140 +141 +142 +143 +144 +145 +146 +147 +148 +149 +150 +151 +152 +153 +154 +155 +156 +157 +158 +159 +160 +161 +162 +163 +164 | 1x +1x +1x + +1x +21x +21x +21x + + +21x +21x + +21x +21x + +21x + +21x +1x +1x + +21x +1x +1x + +21x + + + +21x +21x +21x +21x +21x +18x + +3x +3x +3x +3x +3x +6x +6x +6x + +6x +6x +6x +1x + + +6x +6x +6x +6x +6x +6x +1x +5x +6x +6x +6x +1x +1x +1x +1x + +1x +1x +1x +1x + +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x + +1x +1x +1x +1x + +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x + +1x + +6x +3x +3x + +21x +21x +21x +21x +19x + +2x +2x +2x +2x +2x +4x +4x +4x + +4x +4x +4x + +4x +4x +4x +4x +4x +4x +4x +1x +1x +1x + +1x +1x +1x + + +1x + +1x +1x +1x +1x +1x +1x +1x + +4x +2x +2x + +21x +21x + +21x + +1x + | import { ServerNotification } from "@modelcontextprotocol/sdk/types.js";
+import { Copy } from "lucide-react";
+import { useState } from "react";
+
+const HistoryAndNotifications = ({
+ requestHistory,
+ serverNotifications,
+}: {
+ requestHistory: Array<{ request: string; response?: string }>;
+ serverNotifications: ServerNotification[];
+}) => {
+ const [expandedRequests, setExpandedRequests] = useState<{
+ [key: number]: boolean;
+ }>({});
+ const [expandedNotifications, setExpandedNotifications] = useState<{
+ [key: number]: boolean;
+ }>({});
+
+ const toggleRequestExpansion = (index: number) => {
+ setExpandedRequests((prev) => ({ ...prev, [index]: !prev[index] }));
+ };
+
+ const toggleNotificationExpansion = (index: number) => {
+ setExpandedNotifications((prev) => ({ ...prev, [index]: !prev[index] }));
+ };
+
+ const copyToClipboard = (text: string) => {
+ navigator.clipboard.writeText(text);
+ };
+
+ return (
+ <div className="bg-card overflow-hidden flex h-full">
+ <div className="flex-1 overflow-y-auto p-4 border-r">
+ <h2 className="text-lg font-semibold mb-4">History</h2>
+ {requestHistory.length === 0 ? (
+ <p className="text-sm text-gray-500 italic">No history yet</p>
+ ) : (
+ <ul className="space-y-3">
+ {requestHistory
+ .slice()
+ .reverse()
+ .map((request, index) => (
+ <li
+ key={index}
+ className="text-sm text-foreground bg-secondary p-2 rounded"
+ >
+ <div
+ className="flex justify-between items-center cursor-pointer"
+ onClick={() =>
+ toggleRequestExpansion(requestHistory.length - 1 - index)
+ }
+ >
+ <span className="font-mono">
+ {requestHistory.length - index}.{" "}
+ {JSON.parse(request.request).method}
+ </span>
+ <span>
+ {expandedRequests[requestHistory.length - 1 - index]
+ ? "â–¼"
+ : "â–¶"}
+ </span>
+ </div>
+ {expandedRequests[requestHistory.length - 1 - index] && (
+ <>
+ <div className="mt-2">
+ <div className="flex justify-between items-center mb-1">
+ <span className="font-semibold text-blue-600">
+ Request:
+ </span>
+ <button
+ onClick={() => copyToClipboard(request.request)}
+ className="text-blue-500 hover:text-blue-700"
+ >
+ <Copy size={16} />
+ </button>
+ </div>
+ <pre className="whitespace-pre-wrap break-words bg-background p-2 rounded">
+ {JSON.stringify(JSON.parse(request.request), null, 2)}
+ </pre>
+ </div>
+ {request.response && (
+ <div className="mt-2">
+ <div className="flex justify-between items-center mb-1">
+ <span className="font-semibold text-green-600">
+ Response:
+ </span>
+ <button
+ onClick={() => copyToClipboard(request.response!)}
+ className="text-blue-500 hover:text-blue-700"
+ >
+ <Copy size={16} />
+ </button>
+ </div>
+ <pre className="whitespace-pre-wrap break-words bg-background p-2 rounded">
+ {JSON.stringify(
+ JSON.parse(request.response),
+ null,
+ 2,
+ )}
+ </pre>
+ </div>
+ )}
+ </>
+ )}
+ </li>
+ ))}
+ </ul>
+ )}
+ </div>
+ <div className="flex-1 overflow-y-auto p-4">
+ <h2 className="text-lg font-semibold mb-4">Server Notifications</h2>
+ {serverNotifications.length === 0 ? (
+ <p className="text-sm text-gray-500 italic">No notifications yet</p>
+ ) : (
+ <ul className="space-y-3">
+ {serverNotifications
+ .slice()
+ .reverse()
+ .map((notification, index) => (
+ <li
+ key={index}
+ className="text-sm text-foreground bg-secondary p-2 rounded"
+ >
+ <div
+ className="flex justify-between items-center cursor-pointer"
+ onClick={() => toggleNotificationExpansion(index)}
+ >
+ <span className="font-mono">
+ {serverNotifications.length - index}.{" "}
+ {notification.method}
+ </span>
+ <span>{expandedNotifications[index] ? "â–¼" : "â–¶"}</span>
+ </div>
+ {expandedNotifications[index] && (
+ <div className="mt-2">
+ <div className="flex justify-between items-center mb-1">
+ <span className="font-semibold text-purple-600">
+ Details:
+ </span>
+ <button
+ onClick={() =>
+ copyToClipboard(JSON.stringify(notification))
+ }
+ className="text-blue-500 hover:text-blue-700"
+ >
+ <Copy size={16} />
+ </button>
+ </div>
+ <pre className="whitespace-pre-wrap break-words bg-background p-2 rounded">
+ {JSON.stringify(notification, null, 2)}
+ </pre>
+ </div>
+ )}
+ </li>
+ ))}
+ </ul>
+ )}
+ </div>
+ </div>
+ );
+};
+
+export default HistoryAndNotifications;
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 | 1x + + + + + + + + + + + + +1x +44x +44x +44x +44x +44x +44x +44x +44x +44x +44x +44x +44x +44x +44x +44x +44x +44x +44x +44x + +44x +44x +44x +44x +44x +44x +44x +44x + +44x +44x +44x +74x +74x +74x +74x + +74x +74x +44x +44x +44x +44x + + +1x + | import { Button } from "./ui/button";
+
+type ListPaneProps<T> = {
+ items: T[];
+ listItems: () => void;
+ clearItems: () => void;
+ setSelectedItem: (item: T) => void;
+ renderItem: (item: T) => React.ReactNode;
+ title: string;
+ buttonText: string;
+ isButtonDisabled?: boolean;
+};
+
+const ListPane = <T extends object>({
+ items,
+ listItems,
+ clearItems,
+ setSelectedItem,
+ renderItem,
+ title,
+ buttonText,
+ isButtonDisabled,
+}: ListPaneProps<T>) => (
+ <div className="bg-card rounded-lg shadow">
+ <div className="p-4 border-b border-gray-200 dark:border-gray-700">
+ <h3 className="font-semibold dark:text-white">{title}</h3>
+ </div>
+ <div className="p-4">
+ <Button
+ variant="outline"
+ className="w-full mb-4"
+ onClick={listItems}
+ disabled={isButtonDisabled}
+ >
+ {buttonText}
+ </Button>
+ <Button
+ variant="outline"
+ className="w-full mb-4"
+ onClick={clearItems}
+ disabled={items.length === 0}
+ >
+ Clear
+ </Button>
+ <div className="space-y-2 overflow-y-auto max-h-96">
+ {items.map((item, index) => (
+ <div
+ key={index}
+ className="flex items-center p-2 rounded hover:bg-gray-50 dark:hover:bg-gray-700 cursor-pointer"
+ onClick={() => setSelectedItem(item)}
+ >
+ {renderItem(item)}
+ </div>
+ ))}
+ </div>
+ </div>
+ </div>
+);
+
+export default ListPane;
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 | 1x +1x + +1x +9x +9x +9x +9x +9x +9x + +9x + +9x +9x +9x +9x + +9x + +1x + | import { TabsContent } from "@/components/ui/tabs";
+import { Button } from "@/components/ui/button";
+
+const PingTab = ({ onPingClick }: { onPingClick: () => void }) => {
+ return (
+ <TabsContent value="ping" className="grid grid-cols-2 gap-4">
+ <div className="col-span-2 flex justify-center items-center">
+ <Button
+ onClick={onPingClick}
+ className="bg-gradient-to-r from-purple-500 to-pink-500 hover:from-purple-600 hover:to-pink-600 text-white font-bold py-6 px-12 rounded-full shadow-lg transform transition duration-300 hover:scale-110 focus:outline-none focus:ring-4 focus:ring-purple-300 animate-pulse"
+ >
+ <span className="text-3xl mr-2">🚀</span>
+ MEGA PING
+ <span className="text-3xl ml-2">💥</span>
+ </Button>
+ </div>
+ </TabsContent>
+ );
+};
+
+export default PingTab;
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 +82 +83 +84 +85 +86 +87 +88 +89 +90 +91 +92 +93 +94 +95 +96 +97 +98 +99 +100 +101 +102 +103 +104 +105 +106 +107 +108 +109 +110 +111 +112 +113 +114 +115 +116 +117 +118 +119 +120 +121 +122 +123 +124 +125 +126 +127 +128 +129 +130 +131 +132 +133 +134 +135 +136 +137 +138 +139 +140 +141 +142 | 1x +1x +1x +1x +1x +1x + +1x +1x +1x + + + + + + + + + + + +1x +10x +10x +10x +10x +10x +10x +10x +10x +10x +10x + + + + + + + + + +10x +10x + +10x +1x +1x + +10x +1x +1x +1x +1x + +10x +10x +10x +10x +10x +10x +10x + + + +10x +12x +12x +12x +12x + +10x +10x +10x +10x + +10x +10x +10x +10x +10x +10x +10x +10x +1x +1x +1x +1x +1x +9x +4x +4x +4x +4x +4x + +4x +8x +8x +8x +8x +8x +8x +8x +1x + +8x +8x +8x +8x +8x +4x + +8x + +8x +4x +4x + +4x +4x +1x +1x +1x +1x +1x + +4x + +5x +5x + +5x +5x + +10x +10x +10x + +10x + +1x + | import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { TabsContent } from "@/components/ui/tabs";
+import { Textarea } from "@/components/ui/textarea";
+import { ListPromptsResult } from "@modelcontextprotocol/sdk/types.js";
+import { AlertCircle } from "lucide-react";
+import { useState } from "react";
+import ListPane from "./ListPane";
+
+export type Prompt = {
+ name: string;
+ description?: string;
+ arguments?: {
+ name: string;
+ description?: string;
+ required?: boolean;
+ }[];
+};
+
+const PromptsTab = ({
+ prompts,
+ listPrompts,
+ clearPrompts,
+ getPrompt,
+ selectedPrompt,
+ setSelectedPrompt,
+ promptContent,
+ nextCursor,
+ error,
+}: {
+ prompts: Prompt[];
+ listPrompts: () => void;
+ clearPrompts: () => void;
+ getPrompt: (name: string, args: Record<string, string>) => void;
+ selectedPrompt: Prompt | null;
+ setSelectedPrompt: (prompt: Prompt) => void;
+ promptContent: string;
+ nextCursor: ListPromptsResult["nextCursor"];
+ error: string | null;
+}) => {
+ const [promptArgs, setPromptArgs] = useState<Record<string, string>>({});
+
+ const handleInputChange = (argName: string, value: string) => {
+ setPromptArgs((prev) => ({ ...prev, [argName]: value }));
+ };
+
+ const handleGetPrompt = () => {
+ if (selectedPrompt) {
+ getPrompt(selectedPrompt.name, promptArgs);
+ }
+ };
+
+ return (
+ <TabsContent value="prompts" className="grid grid-cols-2 gap-4">
+ <ListPane
+ items={prompts}
+ listItems={listPrompts}
+ clearItems={clearPrompts}
+ setSelectedItem={(prompt) => {
+ setSelectedPrompt(prompt);
+ setPromptArgs({});
+ }}
+ renderItem={(prompt) => (
+ <>
+ <span className="flex-1">{prompt.name}</span>
+ <span className="text-sm text-gray-500">{prompt.description}</span>
+ </>
+ )}
+ title="Prompts"
+ buttonText={nextCursor ? "List More Prompts" : "List Prompts"}
+ isButtonDisabled={!nextCursor && prompts.length > 0}
+ />
+
+ <div className="bg-card rounded-lg shadow">
+ <div className="p-4 border-b border-gray-200">
+ <h3 className="font-semibold">
+ {selectedPrompt ? selectedPrompt.name : "Select a prompt"}
+ </h3>
+ </div>
+ <div className="p-4">
+ {error ? (
+ <Alert variant="destructive">
+ <AlertCircle className="h-4 w-4" />
+ <AlertTitle>Error</AlertTitle>
+ <AlertDescription>{error}</AlertDescription>
+ </Alert>
+ ) : selectedPrompt ? (
+ <div className="space-y-4">
+ {selectedPrompt.description && (
+ <p className="text-sm text-gray-600">
+ {selectedPrompt.description}
+ </p>
+ )}
+ {selectedPrompt.arguments?.map((arg) => (
+ <div key={arg.name}>
+ <Label htmlFor={arg.name}>{arg.name}</Label>
+ <Input
+ id={arg.name}
+ placeholder={`Enter ${arg.name}`}
+ value={promptArgs[arg.name] || ""}
+ onChange={(e) =>
+ handleInputChange(arg.name, e.target.value)
+ }
+ />
+ {arg.description && (
+ <p className="text-xs text-gray-500 mt-1">
+ {arg.description}
+ {arg.required && (
+ <span className="text-xs mt-1 ml-1">(Required)</span>
+ )}
+ </p>
+ )}
+ </div>
+ ))}
+ <Button onClick={handleGetPrompt} className="w-full">
+ Get Prompt
+ </Button>
+ {promptContent && (
+ <Textarea
+ value={promptContent}
+ readOnly
+ className="h-64 font-mono"
+ />
+ )}
+ </div>
+ ) : (
+ <Alert>
+ <AlertDescription>
+ Select a prompt from the list to view and use it
+ </AlertDescription>
+ </Alert>
+ )}
+ </div>
+ </div>
+ </TabsContent>
+ );
+};
+
+export default PromptsTab;
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 +82 +83 +84 +85 +86 +87 +88 +89 +90 +91 +92 +93 +94 +95 +96 +97 +98 +99 +100 +101 +102 +103 +104 +105 +106 +107 +108 +109 +110 +111 +112 +113 +114 +115 +116 +117 +118 +119 +120 +121 +122 +123 +124 +125 +126 +127 +128 +129 +130 +131 +132 +133 +134 +135 +136 +137 +138 +139 +140 +141 +142 +143 +144 +145 +146 +147 +148 +149 +150 +151 +152 +153 +154 +155 +156 +157 +158 +159 +160 +161 +162 +163 +164 +165 +166 +167 +168 +169 +170 +171 +172 +173 +174 +175 +176 +177 +178 +179 +180 +181 +182 +183 +184 +185 +186 +187 +188 +189 +190 +191 +192 +193 +194 +195 +196 +197 +198 +199 +200 +201 +202 +203 +204 +205 +206 | 1x +1x +1x +1x + + + + + + +1x +1x +1x + +1x +16x +16x +16x +16x +16x +16x +16x +16x +16x +16x +16x +16x +16x +16x + + + + + + + + + + + + + +16x +16x +16x +16x +16x +16x + +16x +1x +1x +1x +1x +1x +1x +1x +1x + +16x +1x +1x +1x +1x + +1x +1x +1x + +16x +16x +16x +16x +16x +16x +16x + + + + +16x +24x +24x +24x +24x +24x +24x +24x + +16x +16x +16x +16x + +16x +16x +16x +16x +16x +2x +2x +2x +2x +16x +24x +24x +24x +24x +24x +24x +24x + +16x +16x +16x + +16x +16x + +16x +16x +16x +16x +16x + +16x +2x +14x +4x +10x +16x +16x +2x +2x +2x +2x + +2x + +2x + +16x +16x +16x +1x +1x +1x +1x +1x +15x +2x +2x +2x +13x +4x +4x +4x +4x +4x +4x +4x +8x +8x +8x +8x +8x +8x + +8x +8x +8x +8x +8x +8x +2x +2x +2x +2x + +8x +8x +8x + +4x +4x +4x +4x +4x + +4x +4x + +9x +9x + +9x +9x + +16x +16x +16x + +16x + +1x + | import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { TabsContent } from "@/components/ui/tabs";
+import {
+ ListResourcesResult,
+ Resource,
+ ResourceTemplate,
+ ListResourceTemplatesResult,
+} from "@modelcontextprotocol/sdk/types.js";
+import { AlertCircle, ChevronRight, FileText, RefreshCw } from "lucide-react";
+import ListPane from "./ListPane";
+import { useState } from "react";
+
+const ResourcesTab = ({
+ resources,
+ resourceTemplates,
+ listResources,
+ clearResources,
+ listResourceTemplates,
+ clearResourceTemplates,
+ readResource,
+ selectedResource,
+ setSelectedResource,
+ resourceContent,
+ nextCursor,
+ nextTemplateCursor,
+ error,
+}: {
+ resources: Resource[];
+ resourceTemplates: ResourceTemplate[];
+ listResources: () => void;
+ clearResources: () => void;
+ listResourceTemplates: () => void;
+ clearResourceTemplates: () => void;
+ readResource: (uri: string) => void;
+ selectedResource: Resource | null;
+ setSelectedResource: (resource: Resource | null) => void;
+ resourceContent: string;
+ nextCursor: ListResourcesResult["nextCursor"];
+ nextTemplateCursor: ListResourceTemplatesResult["nextCursor"];
+ error: string | null;
+}) => {
+ const [selectedTemplate, setSelectedTemplate] =
+ useState<ResourceTemplate | null>(null);
+ const [templateValues, setTemplateValues] = useState<Record<string, string>>(
+ {},
+ );
+
+ const fillTemplate = (
+ template: string,
+ values: Record<string, string>,
+ ): string => {
+ return template.replace(
+ /{([^}]+)}/g,
+ (_, key) => values[key] || `{${key}}`,
+ );
+ };
+
+ const handleReadTemplateResource = () => {
+ if (selectedTemplate) {
+ const uri = fillTemplate(selectedTemplate.uriTemplate, templateValues);
+ readResource(uri);
+ setSelectedTemplate(null);
+ // We don't have the full Resource object here, so we create a partial one
+ setSelectedResource({ uri, name: uri } as Resource);
+ }
+ };
+
+ return (
+ <TabsContent value="resources" className="grid grid-cols-3 gap-4">
+ <ListPane
+ items={resources}
+ listItems={listResources}
+ clearItems={clearResources}
+ setSelectedItem={(resource) => {
+ setSelectedResource(resource);
+ readResource(resource.uri);
+ setSelectedTemplate(null);
+ }}
+ renderItem={(resource) => (
+ <div className="flex items-center w-full">
+ <FileText className="w-4 h-4 mr-2 flex-shrink-0 text-gray-500" />
+ <span className="flex-1 truncate" title={resource.uri.toString()}>
+ {resource.name}
+ </span>
+ <ChevronRight className="w-4 h-4 flex-shrink-0 text-gray-400" />
+ </div>
+ )}
+ title="Resources"
+ buttonText={nextCursor ? "List More Resources" : "List Resources"}
+ isButtonDisabled={!nextCursor && resources.length > 0}
+ />
+
+ <ListPane
+ items={resourceTemplates}
+ listItems={listResourceTemplates}
+ clearItems={clearResourceTemplates}
+ setSelectedItem={(template) => {
+ setSelectedTemplate(template);
+ setSelectedResource(null);
+ setTemplateValues({});
+ }}
+ renderItem={(template) => (
+ <div className="flex items-center w-full">
+ <FileText className="w-4 h-4 mr-2 flex-shrink-0 text-gray-500" />
+ <span className="flex-1 truncate" title={template.uriTemplate}>
+ {template.name}
+ </span>
+ <ChevronRight className="w-4 h-4 flex-shrink-0 text-gray-400" />
+ </div>
+ )}
+ title="Resource Templates"
+ buttonText={
+ nextTemplateCursor ? "List More Templates" : "List Templates"
+ }
+ isButtonDisabled={!nextTemplateCursor && resourceTemplates.length > 0}
+ />
+
+ <div className="bg-card rounded-lg shadow">
+ <div className="p-4 border-b border-gray-200 flex justify-between items-center">
+ <h3
+ className="font-semibold truncate"
+ title={selectedResource?.name || selectedTemplate?.name}
+ >
+ {selectedResource
+ ? selectedResource.name
+ : selectedTemplate
+ ? selectedTemplate.name
+ : "Select a resource or template"}
+ </h3>
+ {selectedResource && (
+ <Button
+ variant="outline"
+ size="sm"
+ onClick={() => readResource(selectedResource.uri)}
+ >
+ <RefreshCw className="w-4 h-4 mr-2" />
+ Refresh
+ </Button>
+ )}
+ </div>
+ <div className="p-4">
+ {error ? (
+ <Alert variant="destructive">
+ <AlertCircle className="h-4 w-4" />
+ <AlertTitle>Error</AlertTitle>
+ <AlertDescription>{error}</AlertDescription>
+ </Alert>
+ ) : selectedResource ? (
+ <pre className="bg-gray-50 dark:bg-gray-800 p-4 rounded text-sm overflow-auto max-h-96 whitespace-pre-wrap break-words text-gray-900 dark:text-gray-100">
+ {resourceContent}
+ </pre>
+ ) : selectedTemplate ? (
+ <div className="space-y-4">
+ <p className="text-sm text-gray-600">
+ {selectedTemplate.description}
+ </p>
+ {selectedTemplate.uriTemplate
+ .match(/{([^}]+)}/g)
+ ?.map((param) => {
+ const key = param.slice(1, -1);
+ return (
+ <div key={key}>
+ <label
+ htmlFor={key}
+ className="block text-sm font-medium text-gray-700"
+ >
+ {key}
+ </label>
+ <Input
+ id={key}
+ value={templateValues[key] || ""}
+ onChange={(e) =>
+ setTemplateValues({
+ ...templateValues,
+ [key]: e.target.value,
+ })
+ }
+ className="mt-1"
+ />
+ </div>
+ );
+ })}
+ <Button
+ onClick={handleReadTemplateResource}
+ disabled={Object.keys(templateValues).length === 0}
+ >
+ Read Resource
+ </Button>
+ </div>
+ ) : (
+ <Alert>
+ <AlertDescription>
+ Select a resource or template from the list to view its contents
+ </AlertDescription>
+ </Alert>
+ )}
+ </div>
+ </div>
+ </TabsContent>
+ );
+};
+
+export default ResourcesTab;
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 | 1x +1x +1x +1x + +1x + +1x +9x +9x +9x +9x + + + +9x +9x +1x +1x + +9x +1x +1x + +9x +1x +1x +2x +1x +1x +1x + +9x +1x +1x + +9x +9x +9x +9x + +9x +9x + +9x +10x +10x +10x +10x +10x +10x +10x +10x +10x +10x +10x +10x + +10x +10x +10x +9x + +9x +9x +9x + +9x +9x +9x + +9x +9x +9x + +9x + +1x + | import { Alert, AlertDescription } from "@/components/ui/alert";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { TabsContent } from "@/components/ui/tabs";
+import { Root } from "@modelcontextprotocol/sdk/types.js";
+import { Plus, Minus, Save } from "lucide-react";
+
+const RootsTab = ({
+ roots,
+ setRoots,
+ onRootsChange,
+}: {
+ roots: Root[];
+ setRoots: React.Dispatch<React.SetStateAction<Root[]>>;
+ onRootsChange: () => void;
+}) => {
+ const addRoot = () => {
+ setRoots((currentRoots) => [...currentRoots, { uri: "file://", name: "" }]);
+ };
+
+ const removeRoot = (index: number) => {
+ setRoots((currentRoots) => currentRoots.filter((_, i) => i !== index));
+ };
+
+ const updateRoot = (index: number, field: keyof Root, value: string) => {
+ setRoots((currentRoots) =>
+ currentRoots.map((root, i) =>
+ i === index ? { ...root, [field]: value } : root,
+ ),
+ );
+ };
+
+ const handleSave = () => {
+ onRootsChange();
+ };
+
+ return (
+ <TabsContent value="roots" className="space-y-4">
+ <Alert>
+ <AlertDescription>
+ Configure the root directories that the server can access
+ </AlertDescription>
+ </Alert>
+
+ {roots.map((root, index) => (
+ <div key={index} className="flex gap-2 items-center">
+ <Input
+ placeholder="file:// URI"
+ value={root.uri}
+ onChange={(e) => updateRoot(index, "uri", e.target.value)}
+ className="flex-1"
+ />
+ <Button
+ variant="destructive"
+ size="sm"
+ onClick={() => removeRoot(index)}
+ aria-label="Remove root"
+ >
+ <Minus className="h-4 w-4" />
+ </Button>
+ </div>
+ ))}
+
+ <div className="flex gap-2">
+ <Button variant="outline" onClick={addRoot}>
+ <Plus className="h-4 w-4 mr-2" />
+ Add Root
+ </Button>
+ <Button onClick={handleSave}>
+ <Save className="h-4 w-4 mr-2" />
+ Save Changes
+ </Button>
+ </div>
+ </TabsContent>
+ );
+};
+
+export default RootsTab;
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 | 1x +1x +1x + + + + + + + + + + + + + + + + +1x +10x + +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x + +10x +10x +10x +10x + + +10x +10x +10x +10x +10x +10x +10x +10x +10x +10x +10x +10x + +10x +10x +10x +10x +10x +5x + +10x +10x + +10x + +1x + | import { Alert, AlertDescription } from "@/components/ui/alert";
+import { Button } from "@/components/ui/button";
+import { TabsContent } from "@/components/ui/tabs";
+import {
+ CreateMessageRequest,
+ CreateMessageResult,
+} from "@modelcontextprotocol/sdk/types.js";
+
+export type PendingRequest = {
+ id: number;
+ request: CreateMessageRequest;
+};
+
+export type Props = {
+ pendingRequests: PendingRequest[];
+ onApprove: (id: number, result: CreateMessageResult) => void;
+ onReject: (id: number) => void;
+};
+
+const SamplingTab = ({ pendingRequests, onApprove, onReject }: Props) => {
+ const handleApprove = (id: number) => {
+ // For now, just return a stub response
+ onApprove(id, {
+ model: "stub-model",
+ stopReason: "endTurn",
+ role: "assistant",
+ content: {
+ type: "text",
+ text: "This is a stub response.",
+ },
+ });
+ };
+
+ return (
+ <TabsContent value="sampling" className="h-96">
+ <Alert>
+ <AlertDescription>
+ When the server requests LLM sampling, requests will appear here for
+ approval.
+ </AlertDescription>
+ </Alert>
+ <div className="mt-4 space-y-4">
+ <h3 className="text-lg font-semibold">Recent Requests</h3>
+ {pendingRequests.map((request) => (
+ <div key={request.id} className="p-4 border rounded-lg space-y-4">
+ <pre className="bg-gray-50 p-2 rounded">
+ {JSON.stringify(request.request, null, 2)}
+ </pre>
+ <div className="flex space-x-2">
+ <Button onClick={() => handleApprove(request.id)}>Approve</Button>
+ <Button variant="outline" onClick={() => onReject(request.id)}>
+ Reject
+ </Button>
+ </div>
+ </div>
+ ))}
+ {pendingRequests.length === 0 && (
+ <p className="text-gray-500">No pending requests</p>
+ )}
+ </div>
+ </TabsContent>
+ );
+};
+
+export default SamplingTab;
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 +82 +83 +84 +85 +86 +87 +88 +89 +90 +91 +92 +93 +94 +95 +96 +97 +98 +99 +100 +101 +102 +103 +104 +105 +106 +107 +108 +109 +110 +111 +112 +113 +114 +115 +116 +117 +118 +119 +120 +121 +122 +123 +124 +125 +126 +127 +128 +129 +130 +131 +132 +133 +134 +135 +136 +137 +138 +139 +140 +141 +142 +143 +144 +145 +146 +147 +148 +149 +150 +151 +152 +153 +154 +155 +156 +157 +158 +159 +160 +161 +162 +163 +164 +165 +166 +167 +168 +169 +170 +171 +172 +173 +174 +175 +176 +177 +178 +179 +180 +181 +182 +183 +184 +185 +186 +187 +188 +189 +190 +191 +192 +193 +194 +195 +196 +197 +198 +199 +200 +201 +202 +203 +204 +205 +206 +207 +208 +209 +210 +211 +212 +213 +214 +215 +216 +217 +218 +219 +220 +221 +222 +223 +224 +225 +226 +227 +228 +229 +230 +231 +232 +233 +234 +235 +236 +237 +238 +239 +240 +241 +242 +243 +244 +245 +246 +247 +248 +249 +250 +251 +252 +253 +254 +255 +256 +257 +258 +259 +260 +261 +262 +263 +264 +265 +266 +267 +268 +269 | 1x +1x +1x +1x + + + + + + +1x + + +1x +1x + + + + + + + + + + + + + + + + + +1x +16x +16x +16x +16x +16x +16x +16x +16x +16x +16x +16x +16x +16x +16x +16x +16x + +16x +16x +16x +16x +16x +16x +16x +16x +16x + +16x +16x +16x +16x +16x +16x +16x + + + +16x +16x +16x +16x +16x +16x +16x +16x +16x + +16x +16x +16x +16x +16x +16x +16x +16x +16x +16x +16x +16x +16x +16x +16x +16x +16x +16x +16x +16x +16x + + + + + + + + + + + +16x +16x +16x +16x +16x +16x + +16x + + +16x +16x + +16x +16x + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +16x + + +16x +16x +16x + +16x + +16x +16x +16x +16x +9x +7x + +7x +16x +16x +16x +16x +9x +7x + +7x +16x +16x +16x + + + + + + + + + + + + + + + + + + +16x +16x +16x +16x +16x +16x +16x +16x + + + +16x +16x +16x +16x +16x +16x +16x +16x +16x + +16x +16x +16x +16x +16x +16x +16x +16x +16x +16x +16x +16x +16x +16x +16x +16x +16x +16x +16x +16x + +16x + +1x + | import { useState } from "react";
+import { Play, ChevronDown, ChevronRight, CircleHelp, Bug, Github } 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 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;
+ onConnect: () => void;
+ stdErrNotifications: StdErrNotification[];
+}
+
+const Sidebar = ({
+ connectionStatus,
+ transportType,
+ setTransportType,
+ command,
+ setCommand,
+ args,
+ setArgs,
+ sseUrl,
+ setSseUrl,
+ env,
+ setEnv,
+ onConnect,
+ stdErrNotifications,
+}: SidebarProps) => {
+ const [theme, setTheme] = useTheme();
+ const [showEnvVars, setShowEnvVars] = useState(false);
+
+ 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>
+ )}
+ {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="grid grid-cols-[1fr,auto] gap-2">
+ <div className="space-y-1">
+ <Input
+ placeholder="Key"
+ value={key}
+ onChange={(e) => {
+ const newEnv = { ...env };
+ delete newEnv[key];
+ newEnv[e.target.value] = value;
+ setEnv(newEnv);
+ }}
+ className="font-mono"
+ />
+ <Input
+ placeholder="Value"
+ value={value}
+ onChange={(e) => {
+ const newEnv = { ...env };
+ newEnv[key] = e.target.value;
+ setEnv(newEnv);
+ }}
+ className="font-mono"
+ />
+ </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>
+ {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;
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 +82 +83 +84 +85 +86 +87 +88 +89 +90 +91 +92 +93 +94 +95 +96 +97 +98 +99 +100 +101 +102 +103 +104 +105 +106 +107 +108 +109 +110 +111 +112 +113 +114 +115 +116 +117 +118 +119 +120 +121 +122 +123 +124 +125 +126 +127 +128 +129 +130 +131 +132 +133 +134 +135 +136 +137 +138 +139 +140 +141 +142 +143 +144 +145 +146 +147 +148 +149 +150 +151 +152 +153 +154 +155 +156 +157 +158 +159 +160 +161 +162 +163 +164 +165 +166 +167 +168 +169 +170 +171 +172 +173 +174 +175 +176 +177 +178 +179 +180 +181 +182 +183 +184 +185 +186 +187 +188 +189 +190 +191 +192 +193 +194 +195 +196 +197 +198 +199 +200 +201 +202 +203 +204 +205 +206 +207 +208 +209 +210 +211 +212 +213 +214 +215 +216 +217 +218 +219 +220 +221 +222 +223 +224 +225 +226 +227 +228 +229 +230 +231 +232 +233 +234 +235 +236 +237 +238 +239 +240 +241 +242 +243 +244 +245 +246 +247 | 1x +1x +1x +1x +1x +1x + + + + +1x +1x +1x +1x + + + +1x +6x +6x +6x +6x +6x +6x +6x +6x +6x +6x + + + + + + + + + +6x +6x +6x +2x +6x + +6x + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +6x +6x +6x +6x +6x +6x + + + +6x +6x + + + + + + + +6x +6x +6x +6x + +6x +6x +6x +6x +6x +6x +6x +6x + + + + + +6x + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +6x +6x + +6x +6x + +6x +6x +6x + +6x + +1x + | import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { TabsContent } from "@/components/ui/tabs";
+import { Textarea } from "@/components/ui/textarea";
+import {
+ ListToolsResult,
+ Tool,
+ CallToolResultSchema,
+} from "@modelcontextprotocol/sdk/types.js";
+import { AlertCircle, Send } from "lucide-react";
+import { useEffect, useState } from "react";
+import ListPane from "./ListPane";
+
+import { CompatibilityCallToolResult } from "@modelcontextprotocol/sdk/types.js";
+
+const ToolsTab = ({
+ tools,
+ listTools,
+ clearTools,
+ callTool,
+ selectedTool,
+ setSelectedTool,
+ toolResult,
+ nextCursor,
+ error,
+}: {
+ tools: Tool[];
+ listTools: () => void;
+ clearTools: () => void;
+ callTool: (name: string, params: Record<string, unknown>) => void;
+ selectedTool: Tool | null;
+ setSelectedTool: (tool: Tool | null) => void;
+ toolResult: CompatibilityCallToolResult | null;
+ nextCursor: ListToolsResult["nextCursor"];
+ error: string | null;
+}) => {
+ const [params, setParams] = useState<Record<string, unknown>>({});
+ useEffect(() => {
+ setParams({});
+ }, [selectedTool]);
+
+ const renderToolResult = () => {
+ if (!toolResult) return null;
+
+ if ("content" in toolResult) {
+ const parsedResult = CallToolResultSchema.safeParse(toolResult);
+ if (!parsedResult.success) {
+ return (
+ <>
+ <h4 className="font-semibold mb-2">Invalid Tool Result:</h4>
+ <pre className="bg-gray-50 dark:bg-gray-800 dark:text-gray-100 p-4 rounded text-sm overflow-auto max-h-64">
+ {JSON.stringify(toolResult, null, 2)}
+ </pre>
+ <h4 className="font-semibold mb-2">Errors:</h4>
+ {parsedResult.error.errors.map((error, idx) => (
+ <pre
+ key={idx}
+ className="bg-gray-50 dark:bg-gray-800 dark:text-gray-100 p-4 rounded text-sm overflow-auto max-h-64"
+ >
+ {JSON.stringify(error, null, 2)}
+ </pre>
+ ))}
+ </>
+ );
+ }
+ const structuredResult = parsedResult.data;
+ const isError = structuredResult.isError ?? false;
+
+ return (
+ <>
+ <h4 className="font-semibold mb-2">
+ Tool Result: {isError ? "Error" : "Success"}
+ </h4>
+ {structuredResult.content.map((item, index) => (
+ <div key={index} className="mb-2">
+ {item.type === "text" && (
+ <pre className="bg-gray-50 dark:bg-gray-800 dark:text-gray-100 p-4 rounded text-sm overflow-auto max-h-64">
+ {item.text}
+ </pre>
+ )}
+ {item.type === "image" && (
+ <img
+ src={`data:${item.mimeType};base64,${item.data}`}
+ alt="Tool result image"
+ className="max-w-full h-auto"
+ />
+ )}
+ {item.type === "resource" && (
+ <pre className="bg-gray-50 dark:bg-gray-800 dark:text-gray-100 whitespace-pre-wrap break-words p-4 rounded text-sm overflow-auto max-h-64">
+ {JSON.stringify(item.resource, null, 2)}
+ </pre>
+ )}
+ </div>
+ ))}
+ </>
+ );
+ } else if ("toolResult" in toolResult) {
+ return (
+ <>
+ <h4 className="font-semibold mb-2">Tool Result (Legacy):</h4>
+ <pre className="bg-gray-50 dark:bg-gray-800 dark:text-gray-100 p-4 rounded text-sm overflow-auto max-h-64">
+ {JSON.stringify(toolResult.toolResult, null, 2)}
+ </pre>
+ </>
+ );
+ }
+ };
+
+ return (
+ <TabsContent value="tools" className="grid grid-cols-2 gap-4">
+ <ListPane
+ items={tools}
+ listItems={listTools}
+ clearItems={() => {
+ clearTools();
+ setSelectedTool(null);
+ }}
+ setSelectedItem={setSelectedTool}
+ renderItem={(tool) => (
+ <>
+ <span className="flex-1">{tool.name}</span>
+ <span className="text-sm text-gray-500 text-right">
+ {tool.description}
+ </span>
+ </>
+ )}
+ title="Tools"
+ buttonText={nextCursor ? "List More Tools" : "List Tools"}
+ isButtonDisabled={!nextCursor && tools.length > 0}
+ />
+
+ <div className="bg-card rounded-lg shadow">
+ <div className="p-4 border-b border-gray-200">
+ <h3 className="font-semibold">
+ {selectedTool ? selectedTool.name : "Select a tool"}
+ </h3>
+ </div>
+ <div className="p-4">
+ {error ? (
+ <Alert variant="destructive">
+ <AlertCircle className="h-4 w-4" />
+ <AlertTitle>Error</AlertTitle>
+ <AlertDescription>{error}</AlertDescription>
+ </Alert>
+ ) : selectedTool ? (
+ <div className="space-y-4">
+ <p className="text-sm text-gray-600">
+ {selectedTool.description}
+ </p>
+ {Object.entries(selectedTool.inputSchema.properties ?? []).map(
+ ([key, value]) => (
+ <div key={key}>
+ <Label
+ htmlFor={key}
+ className="block text-sm font-medium text-gray-700"
+ >
+ {key}
+ </Label>
+ {
+ /* @ts-expect-error value type is currently unknown */
+ value.type === "string" ? (
+ <Textarea
+ id={key}
+ name={key}
+ // @ts-expect-error value type is currently unknown
+ placeholder={value.description}
+ onChange={(e) =>
+ setParams({
+ ...params,
+ [key]: e.target.value,
+ })
+ }
+ className="mt-1"
+ />
+ ) :
+ /* @ts-expect-error value type is currently unknown */
+ value.type === "object" ? (
+ <Textarea
+ id={key}
+ name={key}
+ // @ts-expect-error value type is currently unknown
+ placeholder={value.description}
+ onChange={(e) => {
+ try {
+ const parsed = JSON.parse(e.target.value);
+ setParams({
+ ...params,
+ [key]: parsed,
+ });
+ } catch (err) {
+ // If invalid JSON, store as string - will be validated on submit
+ setParams({
+ ...params,
+ [key]: e.target.value,
+ });
+ }
+ }}
+ className="mt-1"
+ />
+ ) : (
+ <Input
+ // @ts-expect-error value type is currently unknown
+ type={value.type === "number" ? "number" : "text"}
+ id={key}
+ name={key}
+ // @ts-expect-error value type is currently unknown
+ placeholder={value.description}
+ onChange={(e) =>
+ setParams({
+ ...params,
+ [key]:
+ // @ts-expect-error value type is currently unknown
+ value.type === "number"
+ ? Number(e.target.value)
+ : e.target.value,
+ })
+ }
+ className="mt-1"
+ />
+ )
+ }
+ </div>
+ ),
+ )}
+ <Button onClick={() => callTool(selectedTool.name, params)}>
+ <Send className="w-4 h-4 mr-2" />
+ Run Tool
+ </Button>
+ {toolResult && renderToolResult()}
+ </div>
+ ) : (
+ <Alert>
+ <AlertDescription>
+ Select a tool from the list to view its details and run it
+ </AlertDescription>
+ </Alert>
+ )}
+ </div>
+ </div>
+ </TabsContent>
+ );
+};
+
+export default ToolsTab;
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| File | ++ | Statements | ++ | Branches | ++ | Functions | ++ | Lines | ++ |
|---|---|---|---|---|---|---|---|---|---|
| ConsoleTab.tsx | +
+
+ |
+ 100% | +8/8 | +100% | +1/1 | +100% | +1/1 | +100% | +8/8 | +
| History.tsx | +
+
+ |
+ 97.74% | +130/133 | +100% | +19/19 | +55.55% | +5/9 | +97.74% | +130/133 | +
| ListPane.tsx | +
+
+ |
+ 100% | +43/43 | +100% | +3/3 | +100% | +2/2 | +100% | +43/43 | +
| PingTab.tsx | +
+
+ |
+ 100% | +16/16 | +100% | +1/1 | +100% | +1/1 | +100% | +16/16 | +
| PromptsTab.tsx | +
+
+ |
+ 97.11% | +101/104 | +94.11% | +16/17 | +83.33% | +5/6 | +97.11% | +101/104 | +
| ResourcesTab.tsx | +
+
+ |
+ 97.54% | +159/163 | +89.28% | +25/28 | +88.88% | +8/9 | +97.54% | +159/163 | +
| RootsTab.tsx | +
+
+ |
+ 100% | +61/61 | +100% | +15/15 | +100% | +7/7 | +100% | +61/61 | +
| SamplingTab.tsx | +
+
+ |
+ 100% | +41/41 | +100% | +6/6 | +100% | +4/4 | +100% | +41/41 | +
| Sidebar.tsx | +
+
+ |
+ 65.43% | +142/217 | +50% | +6/12 | +25% | +2/8 | +65.43% | +142/217 | +
| ToolsTab.tsx | +
+
+ |
+ 29.38% | +57/194 | +33.33% | +2/6 | +20% | +1/5 | +29.38% | +57/194 | +
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 | 1x + + + + +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x + +1x + + +1x +23x +23x +23x +23x +23x +23x +23x +1x + +1x + + +1x +2x +2x +2x +2x +2x +2x +1x + +1x + + +1x +23x +23x +23x +23x +23x +23x +1x + + + | import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@/lib/utils";
+
+const alertVariants = cva(
+ "relative w-full rounded-lg border px-4 py-3 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:pl-7",
+ {
+ variants: {
+ variant: {
+ default: "bg-background text-foreground",
+ destructive:
+ "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
+ },
+ },
+ defaultVariants: {
+ variant: "default",
+ },
+ },
+);
+
+const Alert = React.forwardRef<
+ HTMLDivElement,
+ React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
+>(({ className, variant, ...props }, ref) => (
+ <div
+ ref={ref}
+ role="alert"
+ className={cn(alertVariants({ variant }), className)}
+ {...props}
+ />
+));
+Alert.displayName = "Alert";
+
+const AlertTitle = React.forwardRef<
+ HTMLParagraphElement,
+ React.HTMLAttributes<HTMLHeadingElement>
+>(({ className, ...props }, ref) => (
+ <h5
+ ref={ref}
+ className={cn("mb-1 font-medium leading-none tracking-tight", className)}
+ {...props}
+ />
+));
+AlertTitle.displayName = "AlertTitle";
+
+const AlertDescription = React.forwardRef<
+ HTMLParagraphElement,
+ React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+ <div
+ ref={ref}
+ className={cn("text-sm [&_p]:leading-relaxed", className)}
+ {...props}
+ />
+));
+AlertDescription.displayName = "AlertDescription";
+
+export { Alert, AlertTitle, AlertDescription };
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 | 1x + + + + + +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x + + + + + + + +1x +1x +223x +223x +223x +223x +223x +223x +223x + +223x +1x +1x + + + | import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@/lib/utils";
+
+const buttonVariants = cva(
+ "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
+ {
+ variants: {
+ variant: {
+ default:
+ "bg-primary text-primary-foreground shadow hover:bg-primary/90 dark:bg-gray-800 dark:text-white dark:hover:bg-gray-700",
+ destructive:
+ "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
+ outline:
+ "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
+ secondary:
+ "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
+ ghost: "hover:bg-accent hover:text-accent-foreground",
+ link: "text-primary underline-offset-4 hover:underline",
+ },
+ size: {
+ default: "h-9 px-4 py-2",
+ sm: "h-8 rounded-md px-3 text-xs",
+ lg: "h-10 rounded-md px-8",
+ icon: "h-9 w-9",
+ },
+ },
+ defaultVariants: {
+ variant: "default",
+ size: "default",
+ },
+ },
+);
+
+export interface ButtonProps
+ extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+ VariantProps<typeof buttonVariants> {
+ asChild?: boolean;
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+ ({ className, variant, size, asChild = false, ...props }, ref) => {
+ const Comp = asChild ? Slot : "button";
+ return (
+ <Comp
+ className={cn(buttonVariants({ variant, size, className }))}
+ ref={ref}
+ {...props}
+ />
+ );
+ },
+);
+Button.displayName = "Button";
+
+export { Button, buttonVariants };
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| File | ++ | Statements | ++ | Branches | ++ | Functions | ++ | Lines | ++ |
|---|---|---|---|---|---|---|---|---|---|
| alert.tsx | +
+
+ |
+ 100% | +44/44 | +100% | +3/3 | +100% | +0/0 | +100% | +44/44 | +
| button.tsx | +
+
+ |
+ 100% | +42/42 | +50% | +1/2 | +100% | +0/0 | +100% | +42/42 | +
| input.tsx | +
+
+ |
+ 100% | +16/16 | +100% | +1/1 | +100% | +0/0 | +100% | +16/16 | +
| label.tsx | +
+
+ |
+ 100% | +13/13 | +100% | +1/1 | +100% | +0/0 | +100% | +13/13 | +
| select.tsx | +
+
+ |
+ 89.09% | +98/110 | +100% | +5/5 | +100% | +0/0 | +89.09% | +98/110 | +
| tabs.tsx | +
+
+ |
+ 100% | +38/38 | +100% | +3/3 | +100% | +0/0 | +100% | +38/38 | +
| textarea.tsx | +
+
+ |
+ 100% | +15/15 | +100% | +1/1 | +100% | +0/0 | +100% | +15/15 | +
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 | 1x + + + + + + +1x +1x +58x +58x +58x +58x +58x +58x +58x +58x +58x +58x + +58x +1x +1x + + + | import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+export interface InputProps
+ extends React.InputHTMLAttributes<HTMLInputElement> {}
+
+const Input = React.forwardRef<HTMLInputElement, InputProps>(
+ ({ className, type, ...props }, ref) => {
+ return (
+ <input
+ type={type}
+ className={cn(
+ "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+ className,
+ )}
+ ref={ref}
+ {...props}
+ />
+ );
+ },
+);
+Input.displayName = "Input";
+
+export { Input };
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 | 1x + + + + + +1x +1x +1x + +1x + + + +1x +8x +8x +8x +8x +8x +8x +1x + + + | import * as React from "react";
+import * as LabelPrimitive from "@radix-ui/react-label";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@/lib/utils";
+
+const labelVariants = cva(
+ "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+);
+
+const Label = React.forwardRef<
+ React.ElementRef<typeof LabelPrimitive.Root>,
+ React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
+ VariantProps<typeof labelVariants>
+>(({ className, ...props }, ref) => (
+ <LabelPrimitive.Root
+ ref={ref}
+ className={cn(labelVariants(), className)}
+ {...props}
+ />
+));
+Label.displayName = LabelPrimitive.Root.displayName;
+
+export { Label };
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 +82 +83 +84 +85 +86 +87 +88 +89 +90 +91 +92 +93 +94 +95 +96 +97 +98 +99 +100 +101 +102 +103 +104 +105 +106 +107 +108 +109 +110 +111 +112 +113 +114 +115 +116 +117 +118 +119 +120 +121 +122 +123 +124 +125 +126 +127 +128 +129 +130 +131 +132 +133 +134 +135 +136 +137 +138 +139 +140 +141 +142 +143 +144 +145 +146 +147 +148 +149 +150 +151 +152 +153 +154 +155 +156 +157 +158 +159 +160 +161 +162 +163 | 1x + + + + + + + + + + +1x + +1x + +1x + +1x + + +1x +32x +32x +32x +32x +32x +32x +32x + +32x +32x +32x +32x +32x +32x +1x + +1x + + +1x +32x +32x +32x +32x +32x +32x +32x + +32x +32x +32x +1x + +1x + + +1x +32x +32x +32x +32x +32x +32x +32x + +32x +32x +32x +1x +1x + +1x + + +1x +32x +32x +32x +32x +32x +32x +32x +32x +32x +32x +32x + +32x +32x +32x +32x +32x +32x +32x + +32x +32x +32x +32x +32x +1x +1x + +1x + + +1x + + + + + + +1x + +1x + + +1x +80x +80x +80x +80x +80x +80x +80x + +80x +80x +80x +80x +80x +80x +80x +80x +1x + +1x + + +1x + + + + + + +1x + + + + + + + + + + + + + + | import * as React from "react";
+import {
+ CaretSortIcon,
+ CheckIcon,
+ ChevronDownIcon,
+ ChevronUpIcon,
+} from "@radix-ui/react-icons";
+import * as SelectPrimitive from "@radix-ui/react-select";
+
+import { cn } from "@/lib/utils";
+
+const Select = SelectPrimitive.Root;
+
+const SelectGroup = SelectPrimitive.Group;
+
+const SelectValue = SelectPrimitive.Value;
+
+const SelectTrigger = React.forwardRef<
+ React.ElementRef<typeof SelectPrimitive.Trigger>,
+ React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+ <SelectPrimitive.Trigger
+ ref={ref}
+ className={cn(
+ "flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+ className,
+ )}
+ {...props}
+ >
+ {children}
+ <SelectPrimitive.Icon asChild>
+ <CaretSortIcon className="h-4 w-4 opacity-50" />
+ </SelectPrimitive.Icon>
+ </SelectPrimitive.Trigger>
+));
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
+
+const SelectScrollUpButton = React.forwardRef<
+ React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
+ React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
+>(({ className, ...props }, ref) => (
+ <SelectPrimitive.ScrollUpButton
+ ref={ref}
+ className={cn(
+ "flex cursor-default items-center justify-center py-1",
+ className,
+ )}
+ {...props}
+ >
+ <ChevronUpIcon />
+ </SelectPrimitive.ScrollUpButton>
+));
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
+
+const SelectScrollDownButton = React.forwardRef<
+ React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
+ React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
+>(({ className, ...props }, ref) => (
+ <SelectPrimitive.ScrollDownButton
+ ref={ref}
+ className={cn(
+ "flex cursor-default items-center justify-center py-1",
+ className,
+ )}
+ {...props}
+ >
+ <ChevronDownIcon />
+ </SelectPrimitive.ScrollDownButton>
+));
+SelectScrollDownButton.displayName =
+ SelectPrimitive.ScrollDownButton.displayName;
+
+const SelectContent = React.forwardRef<
+ React.ElementRef<typeof SelectPrimitive.Content>,
+ React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
+>(({ className, children, position = "popper", ...props }, ref) => (
+ <SelectPrimitive.Portal>
+ <SelectPrimitive.Content
+ ref={ref}
+ className={cn(
+ "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+ position === "popper" &&
+ "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+ className,
+ )}
+ position={position}
+ {...props}
+ >
+ <SelectScrollUpButton />
+ <SelectPrimitive.Viewport
+ className={cn(
+ "p-1",
+ position === "popper" &&
+ "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]",
+ )}
+ >
+ {children}
+ </SelectPrimitive.Viewport>
+ <SelectScrollDownButton />
+ </SelectPrimitive.Content>
+ </SelectPrimitive.Portal>
+));
+SelectContent.displayName = SelectPrimitive.Content.displayName;
+
+const SelectLabel = React.forwardRef<
+ React.ElementRef<typeof SelectPrimitive.Label>,
+ React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
+>(({ className, ...props }, ref) => (
+ <SelectPrimitive.Label
+ ref={ref}
+ className={cn("px-2 py-1.5 text-sm font-semibold", className)}
+ {...props}
+ />
+));
+SelectLabel.displayName = SelectPrimitive.Label.displayName;
+
+const SelectItem = React.forwardRef<
+ React.ElementRef<typeof SelectPrimitive.Item>,
+ React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
+>(({ className, children, ...props }, ref) => (
+ <SelectPrimitive.Item
+ ref={ref}
+ className={cn(
+ "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+ className,
+ )}
+ {...props}
+ >
+ <span className="absolute right-2 flex h-3.5 w-3.5 items-center justify-center">
+ <SelectPrimitive.ItemIndicator>
+ <CheckIcon className="h-4 w-4" />
+ </SelectPrimitive.ItemIndicator>
+ </span>
+ <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+ </SelectPrimitive.Item>
+));
+SelectItem.displayName = SelectPrimitive.Item.displayName;
+
+const SelectSeparator = React.forwardRef<
+ React.ElementRef<typeof SelectPrimitive.Separator>,
+ React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+ <SelectPrimitive.Separator
+ ref={ref}
+ className={cn("-mx-1 my-1 h-px bg-muted", className)}
+ {...props}
+ />
+));
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
+
+export {
+ Select,
+ SelectGroup,
+ SelectValue,
+ SelectTrigger,
+ SelectContent,
+ SelectLabel,
+ SelectItem,
+ SelectSeparator,
+ SelectScrollUpButton,
+ SelectScrollDownButton,
+};
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 | 1x + + + + +1x + +1x + + +1x +9x +9x +9x +9x +9x +9x +9x +9x +9x +1x + +1x + + +1x +54x +54x +54x +54x +54x +54x +54x +54x +54x +1x + +1x + + +1x +64x +64x +64x +64x +64x +64x +64x +64x +64x +1x + + + | import * as React from "react";
+import * as TabsPrimitive from "@radix-ui/react-tabs";
+
+import { cn } from "@/lib/utils";
+
+const Tabs = TabsPrimitive.Root;
+
+const TabsList = React.forwardRef<
+ React.ElementRef<typeof TabsPrimitive.List>,
+ React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
+>(({ className, ...props }, ref) => (
+ <TabsPrimitive.List
+ ref={ref}
+ className={cn(
+ "inline-flex h-9 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground",
+ className,
+ )}
+ {...props}
+ />
+));
+TabsList.displayName = TabsPrimitive.List.displayName;
+
+const TabsTrigger = React.forwardRef<
+ React.ElementRef<typeof TabsPrimitive.Trigger>,
+ React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
+>(({ className, ...props }, ref) => (
+ <TabsPrimitive.Trigger
+ ref={ref}
+ className={cn(
+ "inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-muted data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow",
+ className,
+ )}
+ {...props}
+ />
+));
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
+
+const TabsContent = React.forwardRef<
+ React.ElementRef<typeof TabsPrimitive.Content>,
+ React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
+>(({ className, ...props }, ref) => (
+ <TabsPrimitive.Content
+ ref={ref}
+ className={cn(
+ "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+ className,
+ )}
+ {...props}
+ />
+));
+TabsContent.displayName = TabsPrimitive.Content.displayName;
+
+export { Tabs, TabsList, TabsTrigger, TabsContent };
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 | 1x + + + + + + +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x + +1x +1x +1x + + + | import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+export interface TextareaProps
+ extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
+
+const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
+ ({ className, ...props }, ref) => {
+ return (
+ <textarea
+ className={cn(
+ "flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+ className,
+ )}
+ ref={ref}
+ {...props}
+ />
+ );
+ },
+);
+Textarea.displayName = "Textarea";
+
+export { Textarea };
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ ++ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| File | ++ | Statements | ++ | Branches | ++ | Functions | ++ | Lines | ++ |
|---|---|---|---|---|---|---|---|---|---|
| useConnection.ts | +
+
+ |
+ 0% | +0/136 | +0% | +0/1 | +0% | +0/1 | +0% | +0/136 | +
| useDraggablePane.ts | +
+
+ |
+ 0% | +0/38 | +0% | +0/1 | +0% | +0/1 | +0% | +0/38 | +
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 +82 +83 +84 +85 +86 +87 +88 +89 +90 +91 +92 +93 +94 +95 +96 +97 +98 +99 +100 +101 +102 +103 +104 +105 +106 +107 +108 +109 +110 +111 +112 +113 +114 +115 +116 +117 +118 +119 +120 +121 +122 +123 +124 +125 +126 +127 +128 +129 +130 +131 +132 +133 +134 +135 +136 +137 +138 +139 +140 +141 +142 +143 +144 +145 +146 +147 +148 +149 +150 +151 +152 +153 +154 +155 +156 +157 +158 +159 +160 +161 +162 +163 +164 +165 +166 +167 +168 +169 +170 +171 +172 +173 +174 +175 +176 +177 +178 +179 +180 +181 +182 +183 +184 +185 +186 +187 +188 | + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + | import { Client } from "@modelcontextprotocol/sdk/client/index.js"; +import { SSEClientTransport } from "@modelcontextprotocol/sdk/client/sse.js"; +import { + ClientNotification, + ClientRequest, + CreateMessageRequestSchema, + ListRootsRequestSchema, + ProgressNotificationSchema, + Request, + Result, + ServerCapabilities, +} from "@modelcontextprotocol/sdk/types.js"; +import { useState } from "react"; +import { toast } from "react-toastify"; +import { Notification, StdErrNotificationSchema } from "../notificationTypes"; +import { z } from "zod"; + +const DEFAULT_REQUEST_TIMEOUT_MSEC = 10000; + +interface UseConnectionOptions { + transportType: "stdio" | "sse"; + command: string; + args: string; + sseUrl: string; + env: Record<string, string>; + proxyServerUrl: string; + requestTimeout?: number; + onNotification?: (notification: Notification) => void; + onStdErrNotification?: (notification: Notification) => void; + onPendingRequest?: (request: any, resolve: any, reject: any) => void; + getRoots?: () => any[]; +} + +export function useConnection({ + transportType, + command, + args, + sseUrl, + env, + proxyServerUrl, + requestTimeout = DEFAULT_REQUEST_TIMEOUT_MSEC, + onNotification, + onStdErrNotification, + onPendingRequest, + getRoots, +}: UseConnectionOptions) { + const [connectionStatus, setConnectionStatus] = useState<"disconnected" | "connected" | "error">("disconnected"); + const [serverCapabilities, setServerCapabilities] = useState<ServerCapabilities | null>(null); + const [mcpClient, setMcpClient] = useState<Client | null>(null); + const [requestHistory, setRequestHistory] = useState<{ request: string; response?: string }[]>([]); + + const pushHistory = (request: object, response?: object) => { + setRequestHistory((prev) => [ + ...prev, + { + request: JSON.stringify(request), + response: response !== undefined ? JSON.stringify(response) : undefined, + }, + ]); + }; + + const makeRequest = async <T extends z.ZodType>( + request: ClientRequest, + schema: T + ) => { + if (!mcpClient) { + throw new Error("MCP client not connected"); + } + + try { + const abortController = new AbortController(); + const timeoutId = setTimeout(() => { + abortController.abort("Request timed out"); + }, requestTimeout); + + let response; + try { + response = await mcpClient.request(request, schema, { + signal: abortController.signal, + }); + pushHistory(request, response); + } catch (error) { + const errorMessage = error instanceof Error ? error.message : String(error); + pushHistory(request, { error: errorMessage }); + throw error; + } finally { + clearTimeout(timeoutId); + } + + + return response; + } catch (e: unknown) { + const errorString = (e as Error).message ?? String(e); + toast.error(errorString); + + throw e; + } + }; + + const sendNotification = async (notification: ClientNotification) => { + if (!mcpClient) { + throw new Error("MCP client not connected"); + } + + try { + await mcpClient.notification(notification); + pushHistory(notification); + } catch (e: unknown) { + toast.error((e as Error).message ?? String(e)); + throw e; + } + }; + + const connect = async () => { + try { + const client = new Client<Request, Notification, Result>( + { + name: "mcp-inspector", + version: "0.0.1", + }, + { + capabilities: { + sampling: {}, + roots: { + listChanged: true, + }, + }, + }, + ); + + const backendUrl = new URL(`${proxyServerUrl}/sse`); + + backendUrl.searchParams.append("transportType", transportType); + if (transportType === "stdio") { + backendUrl.searchParams.append("command", command); + backendUrl.searchParams.append("args", args); + backendUrl.searchParams.append("env", JSON.stringify(env)); + } else { + backendUrl.searchParams.append("url", sseUrl); + } + + const clientTransport = new SSEClientTransport(backendUrl); + + if (onNotification) { + client.setNotificationHandler(ProgressNotificationSchema, onNotification); + } + + if (onStdErrNotification) { + client.setNotificationHandler(StdErrNotificationSchema, onStdErrNotification); + } + + await client.connect(clientTransport); + + const capabilities = client.getServerCapabilities(); + setServerCapabilities(capabilities ?? null); + + if (onPendingRequest) { + client.setRequestHandler(CreateMessageRequestSchema, (request) => { + return new Promise((resolve, reject) => { + onPendingRequest(request, resolve, reject); + }); + }); + } + + if (getRoots) { + client.setRequestHandler(ListRootsRequestSchema, async () => { + return { roots: getRoots() }; + }); + } + + setMcpClient(client); + setConnectionStatus("connected"); + } catch (e) { + console.error(e); + setConnectionStatus("error"); + } + }; + + return { + connectionStatus, + serverCapabilities, + mcpClient, + requestHistory, + makeRequest, + sendNotification, + connect + }; +} |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 | + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + | import { useCallback, useEffect, useRef, useState } from "react"; + +export function useDraggablePane(initialHeight: number) { + const [height, setHeight] = useState(initialHeight); + 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 = height; + document.body.style.userSelect = "none"; + }, [height]); + + 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)); + setHeight(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]); + + return { + height, + isDragging, + handleDragStart + }; +} |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| File | ++ | Statements | ++ | Branches | ++ | Functions | ++ | Lines | ++ |
|---|---|---|---|---|---|---|---|---|---|
| notificationTypes.ts | +
+
+ |
+ 0% | +0/10 | +0% | +0/1 | +0% | +0/1 | +0% | +0/10 | +
| useTheme.ts | +
+
+ |
+ 72.5% | +29/40 | +71.42% | +5/7 | +66.66% | +2/3 | +72.5% | +29/40 | +
| utils.ts | +
+
+ |
+ 100% | +4/4 | +100% | +1/1 | +100% | +1/1 | +100% | +4/4 | +
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 | + + + + + + + + + + + + + + + + + + + | import { + NotificationSchema as BaseNotificationSchema, + ClientNotificationSchema, +} from "@modelcontextprotocol/sdk/types.js"; +import { z } from "zod"; + +export const StdErrNotificationSchema = BaseNotificationSchema.extend({ + method: z.literal("notifications/stderr"), + params: z.object({ + content: z.string(), + }), +}); + +export const NotificationSchema = ClientNotificationSchema.or( + StdErrNotificationSchema, +); + +export type StdErrNotification = z.infer<typeof StdErrNotificationSchema>; +export type Notification = z.infer<typeof NotificationSchema>; + |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 | 1x + + + +1x +16x +7x +7x +16x + +16x +7x +7x +7x +7x + + + + + +7x +7x +7x + + +7x +7x +7x + + + +7x + +7x +7x +7x +16x + +16x +16x +16x + + + + + +16x +16x +16x + +1x + | import { useCallback, useEffect, useState } from "react";
+
+type Theme = "light" | "dark" | "system";
+
+const useTheme = (): [Theme, (mode: Theme) => void] => {
+ const [theme, setTheme] = useState<Theme>(() => {
+ const savedTheme = localStorage.getItem("theme") as Theme;
+ return savedTheme || "system";
+ });
+
+ useEffect(() => {
+ const darkModeMediaQuery = window.matchMedia(
+ "(prefers-color-scheme: dark)",
+ );
+ const handleDarkModeChange = (e: MediaQueryListEvent) => {
+ if (theme === "system") {
+ updateDocumentTheme(e.matches ? "dark" : "light");
+ }
+ };
+
+ const updateDocumentTheme = (newTheme: "light" | "dark") => {
+ document.documentElement.classList.toggle("dark", newTheme === "dark");
+ };
+
+ // Set initial theme based on current mode
+ if (theme === "system") {
+ updateDocumentTheme(darkModeMediaQuery.matches ? "dark" : "light");
+ } else {
+ updateDocumentTheme(theme);
+ }
+
+ darkModeMediaQuery.addEventListener("change", handleDarkModeChange);
+
+ return () => {
+ darkModeMediaQuery.removeEventListener("change", handleDarkModeChange);
+ };
+ }, [theme]);
+
+ return [
+ theme,
+ useCallback((newTheme: Theme) => {
+ setTheme(newTheme);
+ localStorage.setItem("theme", newTheme);
+ if (newTheme !== "system") {
+ document.documentElement.classList.toggle("dark", newTheme === "dark");
+ }
+ }, []),
+ ];
+};
+
+export default useTheme;
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 | 1x + + +1x +705x +705x + | import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+ return twMerge(clsx(inputs));
+}
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 | + + + + + + + + + + + + + | import { StrictMode } from "react"; +import { createRoot } from "react-dom/client"; +import { ToastContainer } from 'react-toastify'; +import 'react-toastify/dist/ReactToastify.css'; +import App from "./App.tsx"; +import "./index.css"; + +createRoot(document.getElementById("root")!).render( + <StrictMode> + <App /> + <ToastContainer /> + </StrictMode>, +); + |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 | + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + | /** @type {import('tailwindcss').Config} */ +import animate from "tailwindcss-animate"; +export default { + darkMode: ["class"], + content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"], + theme: { + extend: { + borderRadius: { + lg: "var(--radius)", + md: "calc(var(--radius) - 2px)", + sm: "calc(var(--radius) - 4px)", + }, + colors: { + background: "hsl(var(--background))", + foreground: "hsl(var(--foreground))", + card: { + DEFAULT: "hsl(var(--card))", + foreground: "hsl(var(--card-foreground))", + }, + popover: { + DEFAULT: "hsl(var(--popover))", + foreground: "hsl(var(--popover-foreground))", + }, + primary: { + DEFAULT: "hsl(var(--primary))", + foreground: "hsl(var(--primary-foreground))", + }, + secondary: { + DEFAULT: "hsl(var(--secondary))", + foreground: "hsl(var(--secondary-foreground))", + }, + muted: { + DEFAULT: "hsl(var(--muted))", + foreground: "hsl(var(--muted-foreground))", + }, + accent: { + DEFAULT: "hsl(var(--accent))", + foreground: "hsl(var(--accent-foreground))", + }, + destructive: { + DEFAULT: "hsl(var(--destructive))", + foreground: "hsl(var(--destructive-foreground))", + }, + border: "hsl(var(--border))", + input: "hsl(var(--input))", + ring: "hsl(var(--ring))", + chart: { + 1: "hsl(var(--chart-1))", + 2: "hsl(var(--chart-2))", + 3: "hsl(var(--chart-3))", + 4: "hsl(var(--chart-4))", + 5: "hsl(var(--chart-5))", + }, + }, + }, + }, + plugins: [animate], +}; + |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| File | ++ | Statements | ++ | Branches | ++ | Functions | ++ | Lines | ++ |
|---|---|---|---|---|---|---|---|---|---|
| client | +
+
+ |
+ 0% | +0/64 | +0% | +0/2 | +0% | +0/2 | +0% | +0/64 | +
| client/bin | +
+
+ |
+ 0% | +0/16 | +0% | +0/1 | +0% | +0/1 | +0% | +0/16 | +
| client/src | +
+
+ |
+ 59.17% | +274/463 | +86.2% | +25/29 | +5.88% | +2/34 | +59.17% | +274/463 | +
| client/src/components | +
+
+ |
+ 77.34% | +758/980 | +87.03% | +94/108 | +69.23% | +36/52 | +77.34% | +758/980 | +
| client/src/components/ui | +
+
+ |
+ 95.68% | +266/278 | +93.75% | +15/16 | +100% | +0/0 | +95.68% | +266/278 | +
| client/src/lib | +
+
+ |
+ 61.11% | +33/54 | +66.66% | +6/9 | +60% | +3/5 | +61.11% | +33/54 | +
| client/src/lib/hooks | +
+
+ |
+ 0% | +0/174 | +0% | +0/2 | +0% | +0/2 | +0% | +0/174 | +