6 |
9 | Welcome to MCP Client Console
7 | {/* Console output would go here */}
8 |
8 |
17 |
9 |
15 |
16 |
20 | {title && {title} }
21 | {description && (
22 | {description}
23 | )}
24 |
25 | {action}
26 |
24 |
25 |
26 | When the server requests LLM sampling, requests will appear here for
27 | approval.
28 |
29 |
30 |
45 |
31 |
44 | Recent Requests
32 | {pendingRequests.map((request) => ( 33 |No pending requests
42 | )} 43 |
25 |
58 | );
59 |
60 | export default ListPane;
61 |
--------------------------------------------------------------------------------
/client/src/lib/hooks/useTheme.ts:
--------------------------------------------------------------------------------
1 | import { useCallback, useEffect, useMemo, useState } from "react";
2 |
3 | type Theme = "light" | "dark" | "system";
4 |
5 | const useTheme = (): [Theme, (mode: Theme) => void] => {
6 | const [theme, setTheme] = useState
26 |
28 | {title}
27 |
29 |
37 |
45 |
57 |
46 | {items.map((item, index) => (
47 |
56 | setSelectedItem(item)}
51 | >
52 | {renderItem(item)}
53 |
54 | ))}
55 |
37 |
64 | );
65 | };
66 |
67 | export default JsonEditor;
68 |
--------------------------------------------------------------------------------
/server/src/mcpProxy.ts:
--------------------------------------------------------------------------------
1 | import { Transport } from "@modelcontextprotocol/sdk/shared/transport.js";
2 | import { isJSONRPCRequest } from "@modelcontextprotocol/sdk/types.js";
3 |
4 | function onClientError(error: Error) {
5 | console.error("Error from inspector client:", error);
6 | }
7 |
8 | function onServerError(error: Error) {
9 | console.error("Error from MCP server:", error);
10 | }
11 |
12 | export default function mcpProxy({
13 | transportToClient,
14 | transportToServer,
15 | }: {
16 | transportToClient: Transport;
17 | transportToServer: Transport;
18 | }) {
19 | let transportToClientClosed = false;
20 | let transportToServerClosed = false;
21 |
22 | transportToClient.onmessage = (message) => {
23 | transportToServer.send(message).catch((error) => {
24 | // Send error response back to client if it was a request (has id) and connection is still open
25 | if (isJSONRPCRequest(message) && !transportToClientClosed) {
26 | const errorResponse = {
27 | jsonrpc: "2.0" as const,
28 | id: message.id,
29 | error: {
30 | code: -32001,
31 | message: error.message,
32 | data: error,
33 | },
34 | };
35 | transportToClient.send(errorResponse).catch(onClientError);
36 | }
37 | });
38 | };
39 |
40 | transportToServer.onmessage = (message) => {
41 | transportToClient.send(message).catch(onClientError);
42 | };
43 |
44 | transportToClient.onclose = () => {
45 | if (transportToServerClosed) {
46 | return;
47 | }
48 |
49 | transportToClientClosed = true;
50 | transportToServer.close().catch(onServerError);
51 | };
52 |
53 | transportToServer.onclose = () => {
54 | if (transportToClientClosed) {
55 | return;
56 | }
57 | transportToServerClosed = true;
58 | transportToClient.close().catch(onClientError);
59 | };
60 |
61 | transportToClient.onerror = onClientError;
62 | transportToServer.onerror = onServerError;
63 | }
64 |
--------------------------------------------------------------------------------
/client/src/components/ui/tabs.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 | import * as TabsPrimitive from "@radix-ui/react-tabs";
3 |
4 | import { cn } from "@/lib/utils";
5 |
6 | const Tabs = TabsPrimitive.Root;
7 |
8 | const TabsList = React.forwardRef<
9 | React.ElementRef
44 |
48 | Prism.highlight(code, Prism.languages.json, "json")
49 | }
50 | padding={10}
51 | style={{
52 | fontFamily: '"Fira code", "Fira Mono", monospace',
53 | fontSize: 14,
54 | backgroundColor: "transparent",
55 | minHeight: "100px",
56 | }}
57 | className="w-full"
58 | />
59 |
60 | {displayError && (
61 | {displayError}
62 | )} 63 |
40 |
41 |
42 | Configure the root directories that the server can access
43 |
44 |
45 |
46 | {roots.map((root, index) => (
47 |
75 |
48 | updateRoot(index, "uri", e.target.value)}
52 | className="flex-1"
53 | />
54 |
61 |
62 | ))}
63 |
64 |
65 |
69 |
73 |
74 |
80 |
82 | );
83 | };
84 |
85 | export default OAuthCallback;
86 |
--------------------------------------------------------------------------------
/client/src/index.css:
--------------------------------------------------------------------------------
1 | @tailwind base;
2 | @tailwind components;
3 | @tailwind utilities;
4 |
5 | :root {
6 | font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
7 | line-height: 1.5;
8 | font-weight: 400;
9 |
10 | color-scheme: light dark;
11 | color: rgba(255, 255, 255, 0.87);
12 | background-color: #242424;
13 |
14 | font-synthesis: none;
15 | text-rendering: optimizeLegibility;
16 | -webkit-font-smoothing: antialiased;
17 | -moz-osx-font-smoothing: grayscale;
18 | }
19 |
20 | a {
21 | font-weight: 500;
22 | color: #646cff;
23 | text-decoration: inherit;
24 | }
25 | a:hover {
26 | color: #535bf2;
27 | }
28 |
29 | body {
30 | margin: 0;
31 | place-items: center;
32 | min-width: 320px;
33 | min-height: 100vh;
34 | }
35 |
36 | h1 {
37 | font-size: 3.2em;
38 | line-height: 1.1;
39 | }
40 |
41 | @media (prefers-color-scheme: light) {
42 | :root {
43 | color: #213547;
44 | background-color: #ffffff;
45 | }
46 | a:hover {
47 | color: #747bff;
48 | }
49 | }
50 |
51 | @layer base {
52 | :root {
53 | --background: 0 0% 100%;
54 | --foreground: 222.2 84% 4.9%;
55 | --card: 0 0% 100%;
56 | --card-foreground: 222.2 84% 4.9%;
57 | --popover: 0 0% 100%;
58 | --popover-foreground: 222.2 84% 4.9%;
59 | --primary: 222.2 47.4% 11.2%;
60 | --primary-foreground: 210 40% 98%;
61 | --secondary: 210 40% 96.1%;
62 | --secondary-foreground: 222.2 47.4% 11.2%;
63 | --muted: 210 40% 96.1%;
64 | --muted-foreground: 215.4 16.3% 46.9%;
65 | --accent: 210 40% 96.1%;
66 | --accent-foreground: 222.2 47.4% 11.2%;
67 | --destructive: 0 84.2% 60.2%;
68 | --destructive-foreground: 210 40% 98%;
69 | --border: 214.3 31.8% 91.4%;
70 | --input: 214.3 31.8% 91.4%;
71 | --ring: 222.2 84% 4.9%;
72 | --chart-1: 12 76% 61%;
73 | --chart-2: 173 58% 39%;
74 | --chart-3: 197 37% 24%;
75 | --chart-4: 43 74% 66%;
76 | --chart-5: 27 87% 67%;
77 | --radius: 0.5rem;
78 | }
79 | .dark {
80 | --background: 222.2 84% 4.9%;
81 | --foreground: 210 40% 98%;
82 | --card: 222.2 84% 4.9%;
83 | --card-foreground: 210 40% 98%;
84 | --popover: 222.2 84% 4.9%;
85 | --popover-foreground: 210 40% 98%;
86 | --primary: 210 40% 98%;
87 | --primary-foreground: 222.2 47.4% 11.2%;
88 | --secondary: 217.2 32.6% 17.5%;
89 | --secondary-foreground: 210 40% 98%;
90 | --muted: 217.2 32.6% 17.5%;
91 | --muted-foreground: 215 20.2% 65.1%;
92 | --accent: 217.2 32.6% 17.5%;
93 | --accent-foreground: 210 40% 98%;
94 | --destructive: 0 62.8% 30.6%;
95 | --destructive-foreground: 210 40% 98%;
96 | --border: 217.2 24% 24%;
97 | --input: 217.2 24% 24%;
98 | --ring: 212.7 26.8% 83.9%;
99 | --chart-1: 220 70% 50%;
100 | --chart-2: 160 60% 45%;
101 | --chart-3: 30 80% 55%;
102 | --chart-4: 280 65% 60%;
103 | --chart-5: 340 75% 55%;
104 | }
105 | }
106 |
107 | @layer base {
108 | * {
109 | @apply border-border;
110 | }
111 | body {
112 | @apply bg-background text-foreground;
113 | }
114 | }
115 |
--------------------------------------------------------------------------------
/client/src/components/OAuthDebugCallback.tsx:
--------------------------------------------------------------------------------
1 | import { useEffect } from "react";
2 | import { SESSION_KEYS } from "../lib/constants";
3 | import {
4 | generateOAuthErrorDescription,
5 | parseOAuthCallbackParams,
6 | } from "@/utils/oauthUtils.ts";
7 |
8 | interface OAuthCallbackProps {
9 | onConnect: ({
10 | authorizationCode,
11 | errorMsg,
12 | }: {
13 | authorizationCode?: string;
14 | errorMsg?: string;
15 | }) => void;
16 | }
17 |
18 | const OAuthDebugCallback = ({ onConnect }: OAuthCallbackProps) => {
19 | useEffect(() => {
20 | let isProcessed = false;
21 |
22 | const handleCallback = async () => {
23 | // Skip if we've already processed this callback
24 | if (isProcessed) {
25 | return;
26 | }
27 | isProcessed = true;
28 |
29 | const params = parseOAuthCallbackParams(window.location.search);
30 | if (!params.successful) {
31 | const errorMsg = generateOAuthErrorDescription(params);
32 | onConnect({ errorMsg });
33 | return;
34 | }
35 |
36 | const serverUrl = sessionStorage.getItem(SESSION_KEYS.SERVER_URL);
37 |
38 | // ServerURL isn't set, this can happen if we've opened the
39 | // authentication request in a new tab, so we don't have the same
40 | // session storage
41 | if (!serverUrl) {
42 | // If there's no server URL, we're likely in a new tab
43 | // Just display the code for manual copying
44 | return;
45 | }
46 |
47 | if (!params.code) {
48 | onConnect({ errorMsg: "Missing authorization code" });
49 | return;
50 | }
51 |
52 | // Instead of storing in sessionStorage, pass the code directly
53 | // to the auth state manager through onConnect
54 | onConnect({ authorizationCode: params.code });
55 | };
56 |
57 | handleCallback().finally(() => {
58 | // Only redirect if we have the URL set, otherwise assume this was
59 | // in a new tab
60 | if (sessionStorage.getItem(SESSION_KEYS.SERVER_URL)) {
61 | window.history.replaceState({}, document.title, "/");
62 | }
63 | });
64 |
65 | return () => {
66 | isProcessed = true;
67 | };
68 | }, [onConnect]);
69 |
70 | const callbackParams = parseOAuthCallbackParams(window.location.search);
71 |
72 | return (
73 | Processing OAuth callback...
81 |
74 |
89 | );
90 | };
91 |
92 | export default OAuthDebugCallback;
93 |
--------------------------------------------------------------------------------
/client/bin/start.js:
--------------------------------------------------------------------------------
1 | #!/usr/bin/env node
2 |
3 | import open from "open";
4 | import { resolve, dirname } from "path";
5 | import { spawnPromise } from "spawn-rx";
6 | import { fileURLToPath } from "url";
7 |
8 | const __dirname = dirname(fileURLToPath(import.meta.url));
9 |
10 | function delay(ms) {
11 | return new Promise((resolve) => setTimeout(resolve, ms, true));
12 | }
13 |
14 | async function main() {
15 | // Parse command line arguments
16 | const args = process.argv.slice(2);
17 | const envVars = {};
18 | const mcpServerArgs = [];
19 | let command = null;
20 | let parsingFlags = true;
21 |
22 | for (let i = 0; i < args.length; i++) {
23 | const arg = args[i];
24 |
25 | if (parsingFlags && arg === "--") {
26 | parsingFlags = false;
27 | continue;
28 | }
29 |
30 | if (parsingFlags && arg === "-e" && i + 1 < args.length) {
31 | const envVar = args[++i];
32 | const equalsIndex = envVar.indexOf("=");
33 |
34 | if (equalsIndex !== -1) {
35 | const key = envVar.substring(0, equalsIndex);
36 | const value = envVar.substring(equalsIndex + 1);
37 | envVars[key] = value;
38 | } else {
39 | envVars[envVar] = "";
40 | }
41 | } else if (!command) {
42 | command = arg;
43 | } else {
44 | mcpServerArgs.push(arg);
45 | }
46 | }
47 |
48 | const inspectorServerPath = resolve(
49 | __dirname,
50 | "../..",
51 | "server",
52 | "build",
53 | "index.js",
54 | );
55 |
56 | // Path to the client entry point
57 | const inspectorClientPath = resolve(
58 | __dirname,
59 | "../..",
60 | "client",
61 | "bin",
62 | "client.js",
63 | );
64 |
65 | const CLIENT_PORT = process.env.CLIENT_PORT ?? "6274";
66 | const SERVER_PORT = process.env.SERVER_PORT ?? "6277";
67 |
68 | console.log("Starting MCP inspector...");
69 |
70 | const abort = new AbortController();
71 |
72 | let cancelled = false;
73 | process.on("SIGINT", () => {
74 | cancelled = true;
75 | abort.abort();
76 | });
77 | let server, serverOk;
78 | try {
79 | server = spawnPromise(
80 | "node",
81 | [
82 | inspectorServerPath,
83 | ...(command ? [`--env`, command] : []),
84 | ...(mcpServerArgs ? [`--args=${mcpServerArgs.join(" ")}`] : []),
85 | ],
86 | {
87 | env: {
88 | ...process.env,
89 | PORT: SERVER_PORT,
90 | MCP_ENV_VARS: JSON.stringify(envVars),
91 | },
92 | signal: abort.signal,
93 | echoOutput: true,
94 | },
95 | );
96 |
97 | // Make sure server started before starting client
98 | serverOk = await Promise.race([server, delay(2 * 1000)]);
99 | } catch (error) {}
100 |
101 | if (serverOk) {
102 | try {
103 | if (process.env.MCP_AUTO_OPEN_ENABLED !== "false") {
104 | open(`http://127.0.0.1:${CLIENT_PORT}`);
105 | }
106 | await spawnPromise("node", [inspectorClientPath], {
107 | env: { ...process.env, PORT: CLIENT_PORT },
108 | signal: abort.signal,
109 | echoOutput: true,
110 | });
111 | } catch (e) {
112 | if (!cancelled || process.env.DEBUG) throw e;
113 | }
114 | }
115 |
116 | return 0;
117 | }
118 |
119 | main()
120 | .then((_) => process.exit(0))
121 | .catch((e) => {
122 | console.error(e);
123 | process.exit(1);
124 | });
125 |
--------------------------------------------------------------------------------
/client/src/lib/hooks/useCompletionState.ts:
--------------------------------------------------------------------------------
1 | import { useState, useCallback, useEffect, useRef, useMemo } from "react";
2 | import {
3 | ResourceReference,
4 | PromptReference,
5 | } from "@modelcontextprotocol/sdk/types.js";
6 |
7 | interface CompletionState {
8 | completions: Record
75 |
88 | 76 | Please copy this authorization code and return to the Auth Debugger: 77 |
78 |
79 | {callbackParams.successful && "code" in callbackParams
80 | ? callbackParams.code
81 | : `No code found: ${callbackParams.error}, ${callbackParams.error_description}`}
82 |
83 | 84 | Close this tab and paste the code in the OAuth flow to complete 85 | authentication. 86 |
87 |
137 |
164 | );
165 | };
166 |
167 | export default SamplingRequest;
168 |
--------------------------------------------------------------------------------
/client/src/components/ui/toast.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 | import * as ToastPrimitives from "@radix-ui/react-toast";
3 | import { cva, type VariantProps } from "class-variance-authority";
4 | import { cn } from "@/lib/utils";
5 | import { Cross2Icon } from "@radix-ui/react-icons";
6 |
7 | const ToastProvider = ToastPrimitives.Provider;
8 |
9 | const ToastViewport = React.forwardRef<
10 | React.ElementRef
138 |
140 |
163 |
40 |
50 | ));
51 |
52 | CommandInput.displayName = CommandPrimitive.Input.displayName;
53 |
54 | const CommandList = React.forwardRef<
55 | React.ElementRef
29 |
140 | );
141 | };
142 |
143 | export default HistoryAndNotifications;
144 |
--------------------------------------------------------------------------------
/client/src/lib/oauth-state-machine.ts:
--------------------------------------------------------------------------------
1 | import { OAuthStep, AuthDebuggerState } from "./auth-types";
2 | import { DebugInspectorOAuthClientProvider } from "./auth";
3 | import {
4 | discoverOAuthMetadata,
5 | registerClient,
6 | startAuthorization,
7 | exchangeAuthorization,
8 | } from "@modelcontextprotocol/sdk/client/auth.js";
9 | import { OAuthMetadataSchema } from "@modelcontextprotocol/sdk/shared/auth.js";
10 |
11 | export interface StateMachineContext {
12 | state: AuthDebuggerState;
13 | serverUrl: string;
14 | provider: DebugInspectorOAuthClientProvider;
15 | updateState: (updates: Partial
30 |
95 | History
31 | {requestHistory.length === 0 ? ( 32 |33 | No history yet 34 |
35 | ) : ( 36 |-
37 | {requestHistory
38 | .slice()
39 | .reverse()
40 | .map((request, index) => (
41 |
-
45 | 48 | toggleRequestExpansion(requestHistory.length - 1 - index) 49 | } 50 | > 51 | 52 | {requestHistory.length - index}.{" "} 53 | {JSON.parse(request.request).method} 54 | 55 | 56 | {expandedRequests[requestHistory.length - 1 - index] 57 | ? "▼" 58 | : "▶"} 59 | 60 |61 | {expandedRequests[requestHistory.length - 1 - index] && ( 62 | <> 63 |64 |75 | {request.response && ( 76 |65 | 66 | Request: 67 | 68 |69 | 70 |
74 | 77 |87 | )} 88 | 89 | )} 90 |78 | 79 | Response: 80 | 81 |82 |86 |
91 | ))}
92 |
96 |
139 | Server Notifications
97 | {serverNotifications.length === 0 ? ( 98 |99 | No notifications yet 100 |
101 | ) : ( 102 |-
103 | {serverNotifications
104 | .slice()
105 | .reverse()
106 | .map((notification, index) => (
107 |
-
111 | toggleNotificationExpansion(index)} 114 | > 115 | 116 | {serverNotifications.length - index}.{" "} 117 | {notification.method} 118 | 119 | {expandedNotifications[index] ? "▼" : "▶"} 120 |121 | {expandedNotifications[index] && ( 122 |123 |133 | )} 134 |124 | 125 | Details: 126 | 127 |128 |
132 |
135 | ))}
136 |
89 | {
93 | clearPrompts();
94 | setSelectedPrompt(null);
95 | }}
96 | setSelectedItem={(prompt) => {
97 | setSelectedPrompt(prompt);
98 | setPromptArgs({});
99 | }}
100 | renderItem={(prompt) => (
101 | <>
102 | {prompt.name}
103 |
104 | {prompt.description}
105 |
106 |
107 | )}
108 | title="Prompts"
109 | buttonText={nextCursor ? "List More Prompts" : "List Prompts"}
110 | isButtonDisabled={!nextCursor && prompts.length > 0}
111 | />
112 |
113 |
174 |
114 |
173 |
115 |
119 | 116 | {selectedPrompt ? selectedPrompt.name : "Select a prompt"} 117 |
118 |
120 | {error ? (
121 |
122 | Error
124 | {error}
125 |
126 | ) : selectedPrompt ? (
127 |
166 |
167 | Select a prompt from the list to view and use it
168 |
169 |
170 | )}
171 |
172 |
128 | {selectedPrompt.description && (
129 |
164 | ) : (
165 | 130 | {selectedPrompt.description} 131 |
132 | )} 133 | {selectedPrompt.arguments?.map((arg) => ( 134 |
135 |
136 | handleInputChange(arg.name, value)}
141 | onInputChange={(value) =>
142 | handleInputChange(arg.name, value)
143 | }
144 | options={completions[arg.name] || []}
145 | />
146 |
147 | {arg.description && (
148 |
156 | ))}
157 |
160 | {promptContent && (
161 | 149 | {arg.description} 150 | {arg.required && ( 151 | (Required) 152 | )} 153 |
154 | )} 155 |Invalid Tool Result:
73 |Errors:
75 | {parsedResult.error.errors.map((error, idx) => ( 76 |119 | Tool Result:{" "} 120 | {isError ? ( 121 | Error 122 | ) : ( 123 | Success 124 | )} 125 |
126 | {structuredResult.structuredContent && ( 127 |
128 |
148 | )}
149 | {!structuredResult.structuredContent &&
150 | validationResult &&
151 | !validationResult.isValid && (
152 | Structured Content:
129 |
130 |
147 |
139 | {validationResult.isValid ? (
140 | "✓ Valid according to output schema"
141 | ) : (
142 | <>✗ Validation Error: {validationResult.error}
143 | )}
144 |
145 | )}
146 |
153 |
157 | )}
158 | {structuredResult.content.length > 0 && (
159 |
154 | ✗ Validation Error: {validationResult.error}
155 |
156 |
160 | {structuredResult.structuredContent && (
161 | <>
162 |
206 | )}
207 |
208 | );
209 | } else if ("toolResult" in toolResult) {
210 | return (
211 | <>
212 | 163 | Unstructured Content: 164 |
165 | {compatibilityResult && ( 166 |
173 | {compatibilityResult.isCompatible ? "✓" : "⚠"}{" "}
174 | {compatibilityResult.message}
175 |
176 | )}
177 |
178 | )}
179 | {structuredResult.content.map((item, index) => (
180 |
181 | {item.type === "text" && (
182 | 
190 | )}
191 | {item.type === "resource" &&
192 | (item.resource?.mimeType?.startsWith("audio/") ? (
193 |
200 | ) : (
201 |
204 | ))}
205 |