@mcp-use/inspector 12.0.4-canary.0 → 20.0.0-beta.0

package/dist/cdn/useMCPPrompts-D3_Hla_z.js

@@ -0,0 +1,104 @@
+import { s as e, t } from "./react-BIs9pQ3H.js";
+import { t as n, u as r } from "./telemetry-Ct6pVkM1.js";
+//#region src/client/hooks/useMCPPrompts.ts
+var i = /* @__PURE__ */ e(t(), 1);
+function a({ prompts: e, callPrompt: t, serverId: a }) {
+	let [o, s] = (0, i.useState)(null), [c, l] = (0, i.useState)({}), [u, d] = (0, i.useState)([]), [f, p] = (0, i.useState)(!1), [m, h] = (0, i.useState)(""), g = (0, i.useMemo)(() => {
+		if (!m.trim()) return e;
+		let t = m.toLowerCase();
+		return e.filter((e) => e.name.toLowerCase().includes(t) || e.description?.toLowerCase().includes(t));
+	}, [e, m]), _ = (0, i.useCallback)((e) => {
+		s(e);
+		let t = {};
+		e.arguments && e.arguments.forEach((e) => {
+			t[e.name] = "";
+		}), l(t);
+	}, []), v = (0, i.useCallback)((e, t) => {
+		l((n) => ({
+			...n,
+			[e]: t
+		}));
+	}, []), y = (0, i.useCallback)(async (e, i) => {
+		if (f) return;
+		p(!0);
+		let o = Date.now();
+		try {
+			let s = await t(e.name, i), c = Date.now() - o;
+			n(new r({
+				promptName: e.name,
+				serverId: a,
+				success: !0
+			})).catch(() => {}), d((t) => [{
+				promptName: e.name,
+				args: i,
+				result: s,
+				timestamp: o,
+				duration: c
+			}, ...t]);
+		} catch (t) {
+			n(new r({
+				promptName: e.name,
+				serverId: a,
+				success: !1,
+				error: t instanceof Error ? t.message : "Unknown error"
+			})).catch(() => {});
+			let s = t instanceof Error ? t.message : String(t), c = {
+				promptName: e.name,
+				args: i,
+				result: {
+					error: s,
+					isError: !0
+				},
+				error: s,
+				timestamp: o,
+				duration: Date.now() - o
+			};
+			d((e) => [c, ...e]);
+		} finally {
+			p(!1);
+		}
+	}, [
+		f,
+		t,
+		a
+	]), b = (0, i.useCallback)((e) => {
+		d((t) => t.filter((t, n) => n !== e));
+	}, []), x = (0, i.useCallback)(() => {
+		d([]);
+	}, []);
+	return (0, i.useEffect)(() => {
+		if (o) {
+			let t = e.find((e) => e.name === o.name);
+			if (!t) {
+				s(null);
+				return;
+			}
+			t !== o && (JSON.stringify(t.arguments) !== JSON.stringify(o.arguments) || t.description !== o.description) && s(t);
+		}
+	}, [e, o]), {
+		filteredPrompts: g,
+		selectedPrompt: o,
+		setSelectedPrompt: s,
+		results: u,
+		handleDeleteResult: b,
+		promptArgs: c,
+		setPromptArgs: l,
+		isExecuting: f,
+		handlePromptSelect: _,
+		handleArgChange: v,
+		executePrompt: y,
+		executeSelectedPrompt: (0, i.useCallback)(async () => {
+			!o || f || y(o, c);
+		}, [
+			o,
+			c,
+			f,
+			y
+		]),
+		searchQuery: m,
+		setSearchQuery: h,
+		clearPromptResults: x
+	};
+}
+//#endregion
+export { a as t };

package/dist/cdn/useSavedRequests-Ci2I919u.js

@@ -0,0 +1,51 @@
+import { s as e, t } from "./react-BIs9pQ3H.js";
+import { t as n } from "./createLucideIcon-C5fZZ6oB.js";
+var r = n("panels-top-left", [
+	["rect", {
+		width: "18",
+		height: "18",
+		x: "3",
+		y: "3",
+		rx: "2",
+		key: "afitv7"
+	}],
+	["path", {
+		d: "M3 9h18",
+		key: "1pudct"
+	}],
+	["path", {
+		d: "M9 21V9",
+		key: "1oto5p"
+	}]
+]), i = /* @__PURE__ */ e(t(), 1), a = "mcp-inspector-saved-requests";
+function o() {
+	let [e, t] = (0, i.useState)([]);
+	return (0, i.useEffect)(() => {
+		try {
+			let e = localStorage.getItem(a);
+			e && t(JSON.parse(e));
+		} catch (e) {
+			console.error("[useSavedRequests] Failed to load saved requests:", e);
+		}
+	}, []), (0, i.useEffect)(() => {
+		let e = (e) => {
+			if (e.key === a && e.newValue) try {
+				t(JSON.parse(e.newValue));
+			} catch (e) {
+				console.error("[useSavedRequests] Failed to parse saved requests:", e);
+			}
+		};
+		return window.addEventListener("storage", e), () => window.removeEventListener("storage", e);
+	}, []), {
+		savedRequests: e,
+		saveSavedRequests: (0, i.useCallback)((e) => {
+			try {
+				localStorage.setItem(a, JSON.stringify(e)), t(e);
+			} catch (e) {
+				console.error("[useSavedRequests] Failed to save requests:", e);
+			}
+		}, [])
+	};
+}
+//#endregion
+export { r as n, o as t };

package/dist/cdn/useViewHostProps-C7vjco2m.js

@@ -0,0 +1,348 @@
+import { s as e, t } from "./react-BIs9pQ3H.js";
+import { d as n } from "./react-yUi9mVK4.js";
+import { i as r, r as i, s as a, t as o } from "./WidgetDebugContext-D4usL_MA.js";
+//#region src/client/console-log-bus.ts
+var s = /* @__PURE__ */ e(t(), 1), c = new class {
+	listeners = /* @__PURE__ */ new Set();
+	publish(e) {
+		this.listeners.forEach((t) => {
+			try {
+				t(e);
+			} catch (e) {
+				console.error("[ConsoleLogBus] Error in listener:", e);
+			}
+		});
+	}
+	subscribe(e) {
+		return this.listeners.add(e), () => this.listeners.delete(e);
+	}
+}();
+//#endregion
+//#region src/client/mcp-apps/csp.ts
+function l(e) {
+	let t = (e) => e.replace(/['"<>;]/g, "").trim(), n = (e.connectDomains || []).map(t).filter(Boolean), r = (e.resourceDomains || []).map(t).filter(Boolean), i = (e.frameDomains || []).map(t).filter(Boolean), a = (e.baseUriDomains || []).map(t).filter(Boolean), o = n.length > 0 ? n.join(" ") : "'none'", s = r.length > 0 ? [
+		"data:",
+		"blob:",
+		...r
+	].join(" ") : "data: blob:", c = i.length > 0 ? i.join(" ") : "'none'", l = a.length > 0 ? a.join(" ") : "'none'";
+	return [
+		"default-src 'none'",
+		`script-src 'unsafe-inline' ${s}`,
+		`style-src 'unsafe-inline' ${s}`,
+		`img-src ${s}`,
+		`font-src ${s}`,
+		`media-src ${s}`,
+		`connect-src ${o}`,
+		`frame-src ${c}`,
+		"object-src 'none'",
+		`base-uri ${l}`
+	].join("; ");
+}
+function u(e) {
+	if (!e) return {};
+	let t = {};
+	for (let n of e.split(";")) {
+		let [e, ...r] = n.trim().split(/\s+/);
+		e && (t[e.toLowerCase()] = r);
+	}
+	return t;
+}
+function d(e) {
+	return e ? u(l(e)) : {};
+}
+function f(e) {
+	return u(e);
+}
+function p(e) {
+	let t = {};
+	for (let n of e) {
+		let e = (n.effectiveDirective || n.directive || "unknown").toLowerCase(), r = n.blockedUri || "(inline)";
+		t[e] = Array.from(new Set([...t[e] ?? [], r])).sort();
+	}
+	return t;
+}
+function m(e, t) {
+	return Array.from(new Set([...Object.keys(e), ...Object.keys(t)])).sort().map((n) => {
+		let r = e[n] ?? [], i = t[n] ?? [], a = Array.from(new Set(r)).sort(), o = Array.from(new Set(i)).sort();
+		return {
+			directive: n,
+			requested: r,
+			effective: i,
+			status: a.length === o.length && a.every((e, t) => e === o[t]) ? "same" : r.length === 0 ? "added" : i.length === 0 ? "missing" : "changed"
+		};
+	});
+}
+function h(e) {
+	let t = [];
+	e.declared || t.push({
+		severity: "warning",
+		title: "No widget CSP declared",
+		detail: "Widget-declared mode blocks external connections and resources."
+	}), e.mode === "permissive" && t.push({
+		severity: "info",
+		title: "Permissive mode",
+		detail: "Observed violations are requests a declared policy would block."
+	});
+	let n = p(e.violations);
+	for (let [r, i] of Object.entries(n)) t.push({
+		severity: e.mode === "permissive" ? "warning" : "error",
+		title: `${i.length} blocked by ${r}`,
+		detail: i.join(", ")
+	});
+	return t.length === 0 && t.push({
+		severity: "info",
+		title: "No CSP issues observed",
+		detail: e.effectivePolicy ? "The effective policy has not produced violations." : "Load the widget to observe its effective policy."
+	}), t;
+}
+//#endregion
+//#region src/client/mcp-apps/logging-transport.ts
+function g(e, t, n) {
+	let i = {
+		get sessionId() {
+			return e.sessionId;
+		},
+		set sessionId(t) {
+			e.sessionId = t;
+		},
+		setProtocolVersion: e.setProtocolVersion ? (t) => e.setProtocolVersion?.(t) : void 0,
+		async start() {
+			return e.start();
+		},
+		async send(i, a) {
+			return r.publish({
+				source: "widget",
+				serverId: t,
+				widgetId: n,
+				direction: "send",
+				timestamp: (/* @__PURE__ */ new Date()).toISOString(),
+				message: i
+			}), e.send(i, a);
+		},
+		async close() {
+			return e.close();
+		},
+		onclose: void 0,
+		onerror: void 0,
+		onmessage: void 0
+	};
+	return Object.defineProperty(i, "onmessage", {
+		configurable: !0,
+		enumerable: !0,
+		get() {
+			return e.onmessage;
+		},
+		set(i) {
+			if (!i) {
+				e.onmessage = void 0;
+				return;
+			}
+			e.onmessage = (e, a) => {
+				r.publish({
+					source: "widget",
+					serverId: t,
+					widgetId: n,
+					direction: "receive",
+					timestamp: (/* @__PURE__ */ new Date()).toISOString(),
+					message: e
+				}), i(e, a);
+			};
+		}
+	}), Object.defineProperty(i, "onclose", {
+		configurable: !0,
+		enumerable: !0,
+		get() {
+			return e.onclose;
+		},
+		set(t) {
+			e.onclose = t;
+		}
+	}), Object.defineProperty(i, "onerror", {
+		configurable: !0,
+		enumerable: !0,
+		get() {
+			return e.onerror;
+		},
+		set(t) {
+			e.onerror = t;
+		}
+	}), i;
+}
+//#endregion
+//#region src/client/hooks/useDeviceViewport.ts
+function _(e, t) {
+	return (0, s.useMemo)(() => e === "custom" ? {
+		maxWidth: t.width,
+		maxHeight: t.height
+	} : {
+		maxWidth: o[e].width,
+		maxHeight: o[e].height
+	}, [e, t]);
+}
+//#endregion
+//#region src/client/hooks/useMcpAppsHostContext.ts
+function v(e, t) {
+	return e.getPropertyValue(t).trim();
+}
+function y() {
+	if (typeof window > "u") return {};
+	let e = getComputedStyle(document.documentElement), t = {}, n = (e, n) => {
+		n && (t[e] = n);
+	}, r = v(e, "--background"), i = v(e, "--foreground"), a = v(e, "--card"), o = v(e, "--muted"), s = v(e, "--muted-foreground"), c = v(e, "--primary"), l = v(e, "--primary-foreground"), u = v(e, "--secondary"), d = v(e, "--accent"), f = v(e, "--accent-foreground"), p = v(e, "--destructive"), m = v(e, "--border"), h = v(e, "--ring"), g = v(e, "--radius");
+	return n("--color-background-primary", r), n("--color-background-secondary", a || u), n("--color-background-tertiary", o || d), n("--color-background-inverse", c), n("--color-background-ghost", d || o), n("--color-background-danger", p), n("--color-text-primary", i), n("--color-text-secondary", s), n("--color-text-tertiary", s), n("--color-text-inverse", l), n("--color-text-ghost", f || s), n("--color-text-danger", p), n("--color-border-primary", m), n("--color-border-secondary", m), n("--color-border-tertiary", m), n("--color-ring-primary", h || m), n("--border-radius-sm", g), n("--border-radius-md", g), n("--border-radius-lg", g), n("--font-sans", "system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif"), t;
+}
+function b({ theme: e, displayMode: t, maxWidth: n, maxHeight: r, playground: i, deviceType: a, toolCallId: o, toolName: c, toolInput: l, toolOutput: u, toolMetadata: d, tool: f }) {
+	return (0, s.useMemo)(() => ({
+		theme: e,
+		displayMode: t,
+		availableDisplayModes: [
+			"inline",
+			"pip",
+			"fullscreen"
+		],
+		containerDimensions: {
+			maxHeight: r,
+			maxWidth: n
+		},
+		locale: i.locale,
+		timeZone: i.timeZone,
+		platform: a === "mobile" ? "mobile" : "web",
+		userAgent: "mcp-use-inspector/0.16.2",
+		deviceCapabilities: i.capabilities,
+		safeAreaInsets: i.safeAreaInsets,
+		styles: { variables: y() },
+		toolInfo: f ? {
+			id: o,
+			tool: f
+		} : void 0
+	}), [
+		e,
+		t,
+		r,
+		n,
+		i.locale,
+		i.timeZone,
+		i.capabilities,
+		i.safeAreaInsets,
+		a,
+		o,
+		c,
+		l,
+		u,
+		d,
+		f
+	]);
+}
+//#endregion
+//#region src/client/hooks/useViewHostProps.ts
+var x = {
+	name: "mcp-use-inspector",
+	version: "11.0.0"
+};
+function S(e, t) {
+	let n = (0, s.useRef)(e);
+	n.current = e;
+	let r = (0, s.useRef)(t);
+	return r.current = t, (0, s.useMemo)(() => e ? {
+		callTool: (e, t, r) => n.current.callTool(e, t ?? {}, r),
+		readResource: (e) => r.current(e),
+		get resources() {
+			return n.current?.resources;
+		}
+	} : null, [e?.id]);
+}
+function C(e) {
+	let { serverId: t, viewId: r, resourceUri: o, toolName: u, toolInput: d, toolOutput: f, toolMetadata: p, tool: m, readResource: h, displayMode: v, onDisplayModeChange: y, inlineMaxWidth: C, chromeless: w, onReady: T } = e, { resolvedTheme: E } = a(), { servers: D } = n(), O = D.find((e) => e.id === t), { playground: k, addWidget: A, removeWidget: j, addCspViolation: M, setWidgetModelContext: N, setWidgetDeclaredCsp: P } = i(), F = k.cspMode === "permissive" ? "permissive" : "widget-declared", { maxWidth: I, maxHeight: L } = _(k.deviceType, k.customViewport), R = b({
+		theme: E,
+		displayMode: v ?? "inline",
+		maxWidth: I,
+		maxHeight: L,
+		playground: k,
+		deviceType: k.deviceType,
+		toolCallId: r,
+		toolName: u,
+		toolInput: d,
+		toolOutput: f,
+		toolMetadata: p,
+		tool: m
+	}), z = (0, s.useRef)(R);
+	z.current = R;
+	let B = S(O, h), V = (0, s.useMemo)(() => B ? {
+		kind: "live",
+		connection: B,
+		resourceUri: o
+	} : null, [B, o]), H = (0, s.useCallback)((e) => g(e, t, r), [t, r]), U = (0, s.useCallback)((e) => {
+		A(r, {
+			toolName: u,
+			protocol: "mcp-apps",
+			hostContext: z.current
+		});
+		let t = e.declaredCsp, n;
+		F === "permissive" ? n = [
+			"default-src * 'unsafe-inline' 'unsafe-eval' data: blob: filesystem: about:",
+			"script-src * 'unsafe-inline' 'unsafe-eval' data: blob:",
+			"style-src * 'unsafe-inline' data: blob:",
+			"img-src * data: blob: https: http:",
+			"media-src * data: blob: https: http:",
+			"font-src * data: blob: https: http:",
+			"connect-src * data: blob: https: http: ws: wss: about:",
+			"frame-src * data: blob: https: http: about:",
+			"object-src * data: blob:",
+			"base-uri *",
+			"form-action *"
+		].join("; ") : t && (n = l(t)), P(r, t, n);
+	}, [
+		A,
+		r,
+		u,
+		F,
+		P
+	]);
+	(0, s.useEffect)(() => () => j(r), [r, j]);
+	let W = (0, s.useCallback)((e) => {
+		M(r, {
+			directive: e.directive,
+			effectiveDirective: e.effectiveDirective ?? e.directive,
+			blockedUri: e.blockedUri,
+			sourceFile: e.sourceFile ?? void 0,
+			lineNumber: e.lineNumber ?? void 0,
+			columnNumber: e.columnNumber ?? void 0,
+			originalPolicy: e.originalPolicy,
+			timestamp: e.timestamp
+		});
+	}, [M, r]), G = (0, s.useCallback)(({ content: e, structuredContent: t }) => {
+		N(r, {
+			content: e,
+			structuredContent: t
+		});
+		try {
+			localStorage.setItem(`mcp-use:widget-state:${r}`, JSON.stringify(t));
+		} catch {}
+	}, [N, r]), K = (0, s.useCallback)(({ level: e, data: t }) => {
+		let n = e === "warning" ? "warn" : e === "error" ? "error" : "log";
+		c.publish({
+			level: n,
+			args: Array.isArray(t) ? t : [t],
+			timestamp: (/* @__PURE__ */ new Date()).toISOString(),
+			url: o
+		});
+	}, [o]);
+	return V ? {
+		source: V,
+		hostInfo: x,
+		hostContext: R,
+		cspMode: F,
+		wrapTransport: H,
+		onCspViolation: W,
+		onModelContextUpdate: G,
+		onLog: K,
+		onResourceResolved: U,
+		displayMode: v,
+		onDisplayModeChange: y,
+		inlineMaxWidth: C,
+		chromeless: w,
+		onReady: T
+	} : null;
+}
+//#endregion
+export { d as a, f as i, h as n, c as o, m as r, C as t };

package/dist/cdn/wrench-DzGmCfnb.js

@@ -0,0 +1,7 @@
+import { t as e } from "./createLucideIcon-C5fZZ6oB.js";
+var t = e("wrench", [["path", {
+	d: "M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.106-3.105c.32-.322.863-.22.983.218a6 6 0 0 1-8.259 7.057l-7.91 7.91a1 1 0 0 1-2.999-3l7.91-7.91a6 6 0 0 1 7.057-8.259c.438.12.54.662.219.984z",
+	key: "1ngwbx"
+}]]);
+//#endregion
+export { t };

package/dist/cdn/x-C3vRQIYu.js

@@ -0,0 +1,10 @@
+import { t as e } from "./createLucideIcon-C5fZZ6oB.js";
+var t = e("x", [["path", {
+	d: "M18 6 6 18",
+	key: "1bl5f8"
+}], ["path", {
+	d: "m6 6 12 12",
+	key: "d8bk6v"
+}]]);
+//#endregion
+export { t };

package/dist/cdn/zap-Mb-pbw2X.js

@@ -0,0 +1,10 @@
+import { t as e } from "./createLucideIcon-C5fZZ6oB.js";
+var t = e("chevron-left", [["path", {
+	d: "m15 18-6-6 6-6",
+	key: "1wnfg3"
+}]]), n = e("zap", [["path", {
+	d: "M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z",
+	key: "1xq2db"
+}]]);
+//#endregion
+export { t as n, n as t };