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

package/README.md

@@ -43,8 +43,7 @@ For detailed usage instructions and guides, visit [mcp-use.com/docs/inspector](h
 
 | Package                                                                                                             | Description             | Version                                                                                                         |
 | ------------------------------------------------------------------------------------------------------------------- | ----------------------- | --------------------------------------------------------------------------------------------------------------- |
-| [mcp-use](https://github.com/mcp-use/mcp-use/tree/main/libraries/typescript/packages/mcp-use)                       | Core MCP framework      | [![npm](https://img.shields.io/npm/v/mcp-use.svg)](https://www.npmjs.com/package/mcp-use)                       |
-| [@mcp-use/cli](https://github.com/mcp-use/mcp-use/tree/main/libraries/typescript/packages/cli)                      | Build tool for MCP apps | [![npm](https://img.shields.io/npm/v/@mcp-use/cli.svg)](https://www.npmjs.com/package/@mcp-use/cli)             |
+| [mcp-use](https://github.com/mcp-use/mcp-use/tree/main/libraries/typescript/packages/server)                        | MCP framework and CLI   | [![npm](https://img.shields.io/npm/v/mcp-use.svg)](https://www.npmjs.com/package/mcp-use)                       |
 | [create-mcp-use-app](https://github.com/mcp-use/mcp-use/tree/main/libraries/typescript/packages/create-mcp-use-app) | Create MCP apps         | [![npm](https://img.shields.io/npm/v/create-mcp-use-app.svg)](https://www.npmjs.com/package/create-mcp-use-app) |
 
 ---
@@ -95,7 +94,7 @@ Opens the inspector in your browser at `http://localhost:8080`
 When you create an MCP server with `mcp-use`, the inspector is automatically available at `/inspector`:
 
 ```typescript
-import { MCPServer } from "mcp-use/server";
+import { MCPServer } from "mcp-use";
 
 const server = new MCPServer({
   name: "my-server",
@@ -103,11 +102,42 @@ const server = new MCPServer({
 });
 
 // Add your tools, resources, prompts...
+export default server;
+```
+
+Run `mcp-use dev`; the inspector is available at
+`http://localhost:3000/mcp/inspector`.
+
+#### Test the local CDN bundle with an mcp-use server
+
+From the TypeScript workspace, build and serve the current inspector source:
 
-server.listen(3000);
-// 🎉 Inspector automatically available at http://localhost:3000/inspector
+```bash
+pnpm --filter @mcp-use/inspector serve:cdn -- --port 4173
 ```
 
+In another terminal, rebuild mcp-use and start the app with the local asset
+override:
+
+```bash
+pnpm --filter mcp-use build
+cd test_app
+MCP_USE_INSPECTOR_ASSETS_URL=http://127.0.0.1:4173/inspector.js pnpm dev
+```
+
+Open `http://localhost:3000/mcp/inspector`. The served shell should reference
+the local bundle:
+
+```bash
+curl -s http://127.0.0.1:3000/mcp/inspector | rg '127.0.0.1:4173/inspector.js'
+```
+
+`serve:cdn` rebuilds `dist/cdn`, then runs Vite Preview with a watch rebuild
+loop — refresh the browser after source changes land. Restart the mcp-use dev
+process after changing `MCP_USE_INSPECTOR_ASSETS_URL`, because the shell HTML
+is generated when the server mounts. An explicit `inspector.assetsUrl`
+constructor option takes precedence over the environment variable.
+
 ---
 
 ## 📖 Usage Guide
@@ -379,9 +409,11 @@ export MCP_USE_ANONYMIZED_TELEMETRY=false
 
 ```javascript
 // In browser console
-localStorage.setItem("mcp_inspector_telemetry_disabled", "true");
+localStorage.setItem("MCP_USE_ANONYMIZED_TELEMETRY", "false");
 ```
 
+> **Note:** If you previously opted out with `mcp_inspector_telemetry_disabled`, the inspector automatically migrates that setting to `MCP_USE_ANONYMIZED_TELEMETRY=false` on startup.
+
 **Option 3: Package-level**
 
 ```json
@@ -413,6 +445,7 @@ See our [contributing guide](https://github.com/mcp-use/mcp-use/blob/main/CONTRI
 ## 📚 Learn More
 
 - [Inspector Documentation](https://mcp-use.com/docs/inspector) - Complete usage guide and tutorials
+- [Self-Hosting Guide](https://mcp-use.com/docs/inspector/self-hosting) - Deploy your own instance
 - [mcp-use Documentation](https://mcp-use.com/docs) - Full framework documentation
 - [Model Context Protocol](https://modelcontextprotocol.io) - Official MCP specification
 - [GitHub Repository](https://github.com/mcp-use/mcp-use) - Source code and examples

package/dist/cdn/AnimatePresence-B4HhIdgq.js

@@ -0,0 +1,393 @@
+import { s as e, t } from "./react-BIs9pQ3H.js";
+import { t as n } from "./jsx-runtime-CIxvMpEo.js";
+import { Ar as r, C as i, H as a, Sr as o, Tr as s, U as c, V as l, W as u, m as d, p as f, wr as p } from "./input-BLxOA7V-.js";
+//#region ../../node_modules/.pnpm/@base-ui+react@1.6.0_@types+react@19.2.17_react-dom@19.2.4_react@19.2.4__react@19.2.4/node_modules/@base-ui/react/internals/composite/list/CompositeListContext.mjs
+var m = /* @__PURE__ */ e(t(), 1), h = /*#__PURE__*/ m.createContext({
+	register: () => {},
+	unregister: () => {},
+	subscribeMapChange: () => () => {},
+	elementsRef: { current: [] },
+	nextIndexRef: { current: 0 }
+});
+process.env.NODE_ENV !== "production" && (h.displayName = "CompositeListContext");
+function g() {
+	return m.useContext(h);
+}
+//#endregion
+//#region ../../node_modules/.pnpm/@base-ui+react@1.6.0_@types+react@19.2.17_react-dom@19.2.4_react@19.2.4__react@19.2.4/node_modules/@base-ui/react/internals/composite/list/useCompositeListItem.mjs
+var _ = /*#__PURE__*/ function(e) {
+	return e[e.None = 0] = "None", e[e.GuessFromOrder = 1] = "GuessFromOrder", e;
+}({});
+function v(e = {}) {
+	let { label: t, metadata: n, textRef: r, indexGuessBehavior: i, index: a } = e, { register: s, unregister: c, subscribeMapChange: l, elementsRef: u, labelsRef: d, nextIndexRef: f } = g(), p = m.useRef(-1), [h, v] = m.useState(a ?? (i === _.GuessFromOrder ? () => {
+		if (p.current === -1) {
+			let e = f.current;
+			f.current += 1, p.current = e;
+		}
+		return p.current;
+	} : -1)), y = m.useRef(null), b = m.useCallback((e) => {
+		if (y.current = e, h !== -1 && e !== null && (u.current[h] = e, d)) {
+			let n = t !== void 0;
+			d.current[h] = n ? t : r?.current?.textContent ?? e.textContent;
+		}
+	}, [
+		h,
+		u,
+		d,
+		t,
+		r
+	]);
+	return o(() => {
+		if (a != null) return;
+		let e = y.current;
+		if (e) return s(e, n), () => {
+			c(e);
+		};
+	}, [
+		a,
+		s,
+		c,
+		n
+	]), o(() => {
+		if (a == null) return l((e) => {
+			let t = y.current ? e.get(y.current)?.index : null;
+			t != null && v(t);
+		});
+	}, [
+		a,
+		l,
+		v
+	]), {
+		ref: b,
+		index: h
+	};
+}
+//#endregion
+//#region ../../node_modules/.pnpm/@base-ui+react@1.6.0_@types+react@19.2.17_react-dom@19.2.4_react@19.2.4__react@19.2.4/node_modules/@base-ui/react/internals/composite/composite.mjs
+var y = "ArrowUp", b = "ArrowDown", x = "ArrowLeft", S = "ArrowRight", C = "Home", w = new Set([x, S]), T = new Set([
+	x,
+	S,
+	C,
+	"End"
+]), E = new Set([y, b]), D = new Set([
+	y,
+	b,
+	C,
+	"End"
+]), O = new Set([...w, ...E]), k = new Set([
+	...O,
+	C,
+	"End"
+]), A = "Shift", j = new Set([
+	A,
+	"Control",
+	"Alt",
+	"Meta"
+]);
+function M(e) {
+	return r(e) && e.tagName === "INPUT";
+}
+function N(e) {
+	return !!(M(e) && e.selectionStart != null || r(e) && e.tagName === "TEXTAREA");
+}
+function P(e, t, n, r) {
+	if (!e || !t || !t.scrollTo) return;
+	let i = e.scrollLeft, a = e.scrollTop, o = e.clientWidth < e.scrollWidth, s = e.clientHeight < e.scrollHeight;
+	if (o && r !== "vertical") {
+		let r = F(e, t, "left"), a = I(e), o = I(t);
+		n === "ltr" && (r + t.offsetWidth + o.scrollMarginRight > e.scrollLeft + e.clientWidth - a.scrollPaddingRight ? i = r + t.offsetWidth + o.scrollMarginRight - e.clientWidth + a.scrollPaddingRight : r - o.scrollMarginLeft < e.scrollLeft + a.scrollPaddingLeft && (i = r - o.scrollMarginLeft - a.scrollPaddingLeft)), n === "rtl" && (r - o.scrollMarginRight < e.scrollLeft + a.scrollPaddingLeft ? i = r - o.scrollMarginLeft - a.scrollPaddingLeft : r + t.offsetWidth + o.scrollMarginRight > e.scrollLeft + e.clientWidth - a.scrollPaddingRight && (i = r + t.offsetWidth + o.scrollMarginRight - e.clientWidth + a.scrollPaddingRight));
+	}
+	if (s && r !== "horizontal") {
+		let n = F(e, t, "top"), r = I(e), i = I(t);
+		n - i.scrollMarginTop < e.scrollTop + r.scrollPaddingTop ? a = n - i.scrollMarginTop - r.scrollPaddingTop : n + t.offsetHeight + i.scrollMarginBottom > e.scrollTop + e.clientHeight - r.scrollPaddingBottom && (a = n + t.offsetHeight + i.scrollMarginBottom - e.clientHeight + r.scrollPaddingBottom);
+	}
+	e.scrollTo({
+		left: i,
+		top: a,
+		behavior: "auto"
+	});
+}
+function F(e, t, n) {
+	let r = n === "left" ? "offsetLeft" : "offsetTop", i = 0;
+	for (; t.offsetParent && (i += t[r], t.offsetParent !== e);) t = t.offsetParent;
+	return i;
+}
+function I(e) {
+	let t = getComputedStyle(e);
+	return {
+		scrollMarginTop: parseFloat(t.scrollMarginTop) || 0,
+		scrollMarginRight: parseFloat(t.scrollMarginRight) || 0,
+		scrollMarginBottom: parseFloat(t.scrollMarginBottom) || 0,
+		scrollMarginLeft: parseFloat(t.scrollMarginLeft) || 0,
+		scrollPaddingTop: parseFloat(t.scrollPaddingTop) || 0,
+		scrollPaddingRight: parseFloat(t.scrollPaddingRight) || 0,
+		scrollPaddingBottom: parseFloat(t.scrollPaddingBottom) || 0,
+		scrollPaddingLeft: parseFloat(t.scrollPaddingLeft) || 0
+	};
+}
+//#endregion
+//#region ../../node_modules/.pnpm/@base-ui+react@1.6.0_@types+react@19.2.17_react-dom@19.2.4_react@19.2.4__react@19.2.4/node_modules/@base-ui/react/internals/composite/list/CompositeList.mjs
+var L = n();
+function R(e) {
+	let { children: t, elementsRef: n, labelsRef: r, onMapChange: i } = e, a = p(i), c = m.useRef(0), l = s(B).current, u = s(z).current, [d, f] = m.useState(0), g = m.useRef(d), _ = p((e, t) => {
+		u.set(e, t ?? null), g.current += 1, f(g.current);
+	}), v = p((e) => {
+		u.delete(e), g.current += 1, f(g.current);
+	}), y = m.useMemo(() => {
+		let e = /* @__PURE__ */ new Map();
+		return Array.from(u.keys()).filter((e) => e.isConnected).sort(V).forEach((t, n) => {
+			let r = u.get(t) ?? {};
+			e.set(t, {
+				...r,
+				index: n
+			});
+		}), e;
+	}, [u, d]);
+	o(() => {
+		if (typeof MutationObserver != "function" || y.size === 0) return;
+		let e = new MutationObserver((e) => {
+			let t = /* @__PURE__ */ new Set(), n = (e) => t.has(e) ? t.delete(e) : t.add(e);
+			e.forEach((e) => {
+				e.removedNodes.forEach(n), e.addedNodes.forEach(n);
+			}), t.size === 0 && (g.current += 1, f(g.current));
+		});
+		return y.forEach((t, n) => {
+			n.parentElement && e.observe(n.parentElement, { childList: !0 });
+		}), () => {
+			e.disconnect();
+		};
+	}, [y]), o(() => {
+		g.current === d && (n.current.length !== y.size && (n.current.length = y.size), r && r.current.length !== y.size && (r.current.length = y.size), c.current = y.size), a(y);
+	}, [
+		a,
+		y,
+		n,
+		r,
+		d
+	]), o(() => () => {
+		n.current = [];
+	}, [n]), o(() => () => {
+		r && (r.current = []);
+	}, [r]);
+	let b = p((e) => (l.add(e), () => {
+		l.delete(e);
+	}));
+	o(() => {
+		l.forEach((e) => e(y));
+	}, [l, y]);
+	let x = m.useMemo(() => ({
+		register: _,
+		unregister: v,
+		subscribeMapChange: b,
+		elementsRef: n,
+		labelsRef: r,
+		nextIndexRef: c
+	}), [
+		_,
+		v,
+		b,
+		n,
+		r,
+		c
+	]);
+	return /*#__PURE__*/ (0, L.jsx)(h.Provider, {
+		value: x,
+		children: t
+	});
+}
+function z() {
+	return /* @__PURE__ */ new Map();
+}
+function B() {
+	return /* @__PURE__ */ new Set();
+}
+function V(e, t) {
+	let n = e.compareDocumentPosition(t);
+	return n & Node.DOCUMENT_POSITION_FOLLOWING || n & Node.DOCUMENT_POSITION_CONTAINED_BY ? -1 : n & Node.DOCUMENT_POSITION_PRECEDING || n & Node.DOCUMENT_POSITION_CONTAINS ? 1 : 0;
+}
+//#endregion
+//#region ../../node_modules/.pnpm/@base-ui+utils@0.3.1_@types+react@19.2.17_react-dom@19.2.4_react@19.2.4__react@19.2.4/node_modules/@base-ui/utils/isElementDisabled.mjs
+function H(e) {
+	return e == null || e.hasAttribute("disabled") || e.getAttribute("aria-disabled") === "true";
+}
+//#endregion
+//#region ../../node_modules/.pnpm/framer-motion@12.42.2_react-dom@19.2.4_react@19.2.4__react@19.2.4/node_modules/framer-motion/dist/es/utils/use-composed-ref.mjs
+function U(e, t) {
+	if (typeof e == "function") return e(t);
+	e != null && (e.current = t);
+}
+function W(...e) {
+	return (t) => {
+		let n = !1, r = e.map((e) => {
+			let r = U(e, t);
+			return !n && typeof r == "function" && (n = !0), r;
+		});
+		if (n) return () => {
+			for (let t = 0; t < r.length; t++) {
+				let n = r[t];
+				typeof n == "function" ? n() : U(e[t], null);
+			}
+		};
+	};
+}
+function G(...e) {
+	return m.useCallback(W(...e), e);
+}
+//#endregion
+//#region ../../node_modules/.pnpm/framer-motion@12.42.2_react-dom@19.2.4_react@19.2.4__react@19.2.4/node_modules/framer-motion/dist/es/components/AnimatePresence/PopChild.mjs
+var K = class extends m.Component {
+	getSnapshotBeforeUpdate(e) {
+		let t = this.props.childRef.current;
+		if (i(t) && e.isPresent && !this.props.isPresent && this.props.pop !== !1) {
+			let e = t.offsetParent, n = i(e) && e.offsetWidth || 0, r = i(e) && e.offsetHeight || 0, a = getComputedStyle(t), o = this.props.sizeRef.current;
+			o.height = parseFloat(a.height), o.width = parseFloat(a.width), o.top = t.offsetTop, o.left = t.offsetLeft, o.right = n - o.width - o.left, o.bottom = r - o.height - o.top, o.direction = a.direction;
+		}
+		return null;
+	}
+	componentDidUpdate() {}
+	render() {
+		return this.props.children;
+	}
+};
+function q({ children: e, isPresent: t, anchorX: n, anchorY: r, root: i, pop: a }) {
+	let o = (0, m.useId)(), s = (0, m.useRef)(null), c = (0, m.useRef)({
+		width: 0,
+		height: 0,
+		top: 0,
+		left: 0,
+		right: 0,
+		bottom: 0,
+		direction: "ltr"
+	}), { nonce: l } = (0, m.useContext)(d), u = G(s, e.props?.ref ?? e?.ref);
+	return (0, m.useInsertionEffect)(() => {
+		let { width: e, height: u, top: d, left: f, right: p, bottom: m, direction: h } = c.current;
+		if (t || a === !1 || !s.current || !e || !u) return;
+		let g = h === "rtl", _ = n === "left" ? g ? `right: ${p}` : `left: ${f}` : g ? `left: ${f}` : `right: ${p}`, v = r === "bottom" ? `bottom: ${m}` : `top: ${d}`;
+		s.current.dataset.motionPopId = o;
+		let y = document.createElement("style");
+		l && (y.nonce = l);
+		let b = i ?? document.head;
+		return b.appendChild(y), y.sheet && y.sheet.insertRule(`
+          [data-motion-pop-id="${o}"] {
+            position: absolute !important;
+            width: ${e}px !important;
+            height: ${u}px !important;
+            ${_}px !important;
+            ${v}px !important;
+          }
+        `), () => {
+			s.current?.removeAttribute("data-motion-pop-id"), b.contains(y) && b.removeChild(y);
+		};
+	}, [t]), (0, L.jsx)(K, {
+		isPresent: t,
+		childRef: s,
+		sizeRef: c,
+		pop: a,
+		children: a === !1 ? e : m.cloneElement(e, { ref: u })
+	});
+}
+//#endregion
+//#region ../../node_modules/.pnpm/framer-motion@12.42.2_react-dom@19.2.4_react@19.2.4__react@19.2.4/node_modules/framer-motion/dist/es/components/AnimatePresence/PresenceChild.mjs
+var J = ({ children: e, initial: t, isPresent: n, onExitComplete: r, custom: i, presenceAffectsLayout: o, mode: s, anchorX: u, anchorY: d, root: f }) => {
+	let p = c(Y), h = (0, m.useId)(), g = (0, m.useRef)(n), _ = (0, m.useRef)(r);
+	a(() => {
+		g.current = n, _.current = r;
+	});
+	let v = !0, y = (0, m.useMemo)(() => (v = !1, {
+		id: h,
+		initial: t,
+		isPresent: n,
+		custom: i,
+		onExitComplete: (e) => {
+			p.set(e, !0);
+			for (let e of p.values()) if (!e) return;
+			r && r();
+		},
+		register: (e) => (p.set(e, !1), () => {
+			p.delete(e), !g.current && !p.size && _.current?.();
+		})
+	}), [
+		n,
+		p,
+		r
+	]);
+	return o && v && (y = { ...y }), (0, m.useMemo)(() => {
+		p.forEach((e, t) => p.set(t, !1));
+	}, [n]), m.useEffect(() => {
+		!n && !p.size && r && r();
+	}, [n]), e = (0, L.jsx)(q, {
+		pop: s === "popLayout",
+		isPresent: n,
+		anchorX: u,
+		anchorY: d,
+		root: f,
+		children: e
+	}), (0, L.jsx)(l.Provider, {
+		value: y,
+		children: e
+	});
+};
+function Y() {
+	return /* @__PURE__ */ new Map();
+}
+//#endregion
+//#region ../../node_modules/.pnpm/framer-motion@12.42.2_react-dom@19.2.4_react@19.2.4__react@19.2.4/node_modules/framer-motion/dist/es/components/AnimatePresence/utils.mjs
+var X = (e) => e.key || "";
+function Z(e) {
+	let t = [];
+	return m.Children.forEach(e, (e) => {
+		(0, m.isValidElement)(e) && t.push(e);
+	}), t;
+}
+//#endregion
+//#region ../../node_modules/.pnpm/framer-motion@12.42.2_react-dom@19.2.4_react@19.2.4__react@19.2.4/node_modules/framer-motion/dist/es/components/AnimatePresence/index.mjs
+var Q = ({ children: e, custom: t, initial: n = !0, onExitComplete: r, presenceAffectsLayout: i = !0, mode: o = "sync", propagate: s = !1, anchorX: l = "left", anchorY: d = "top", root: p }) => {
+	let [h, g] = f(s), _ = (0, m.useMemo)(() => Z(e), [e]), v = s && !h ? [] : _.map(X), y = (0, m.useRef)(!0), b = (0, m.useRef)(_), x = c(() => /* @__PURE__ */ new Map()), S = (0, m.useRef)(/* @__PURE__ */ new Set()), [C, w] = (0, m.useState)(_), [T, E] = (0, m.useState)(_);
+	a(() => {
+		y.current = !1, b.current = _;
+		for (let e = 0; e < T.length; e++) {
+			let t = X(T[e]);
+			v.includes(t) ? (x.delete(t), S.current.delete(t)) : x.get(t) !== !0 && x.set(t, !1);
+		}
+	}, [
+		T,
+		v.length,
+		v.join("-")
+	]);
+	let D = [];
+	if (_ !== C) {
+		let e = [..._];
+		for (let t = 0; t < T.length; t++) {
+			let n = T[t], r = X(n);
+			v.includes(r) || (e.splice(t, 0, n), D.push(n));
+		}
+		return o === "wait" && D.length && (e = D), E(Z(e)), w(_), null;
+	}
+	process.env.NODE_ENV !== "production" && o === "wait" && T.length > 1 && console.warn("You're attempting to animate multiple children within AnimatePresence, but its mode is set to \"wait\". This will lead to odd visual behaviour.");
+	let { forceRender: O } = (0, m.useContext)(u);
+	return (0, L.jsx)(L.Fragment, { children: T.map((e) => {
+		let a = X(e), c = s && !h ? !1 : _ === T || v.includes(a);
+		return (0, L.jsx)(J, {
+			isPresent: c,
+			initial: !y.current || n ? void 0 : !1,
+			custom: t,
+			presenceAffectsLayout: i,
+			mode: o,
+			root: p,
+			onExitComplete: c ? void 0 : () => {
+				if (S.current.has(a)) return;
+				if (x.has(a)) S.current.add(a), x.set(a, !0);
+				else return;
+				let e = !0;
+				x.forEach((t) => {
+					t || (e = !1);
+				}), e && (O?.(), E(b.current), s && g?.(), r && r());
+			},
+			anchorX: l,
+			anchorY: d,
+			children: e
+		}, a);
+	}) });
+};
+//#endregion
+export { N as _, O as a, v as b, y as c, w as d, T as f, D as g, E as h, b as i, k as l, A as m, H as n, x as o, j as p, R as r, S as s, Q as t, C as u, P as v, _ as y };