@mcp-use/inspector 0.14.0-canary.9 → 0.14.0

package/dist/client/index.js

@@ -0,0 +1,1096 @@
+// ../../node_modules/.pnpm/@radix-ui+react-slot@1.2.4_@types+react@19.2.7_react@19.2.3/node_modules/@radix-ui/react-slot/dist/index.mjs
+import * as React2 from "react";
+
+// ../../node_modules/.pnpm/@radix-ui+react-compose-refs@1.1.2_@types+react@19.2.7_react@19.2.3/node_modules/@radix-ui/react-compose-refs/dist/index.mjs
+import * as React from "react";
+function setRef(ref, value) {
+  if (typeof ref === "function") {
+    return ref(value);
+  } else if (ref !== null && ref !== void 0) {
+    ref.current = value;
+  }
+}
+function composeRefs(...refs) {
+  return (node) => {
+    let hasCleanup = false;
+    const cleanups = refs.map((ref) => {
+      const cleanup = setRef(ref, node);
+      if (!hasCleanup && typeof cleanup == "function") {
+        hasCleanup = true;
+      }
+      return cleanup;
+    });
+    if (hasCleanup) {
+      return () => {
+        for (let i = 0; i < cleanups.length; i++) {
+          const cleanup = cleanups[i];
+          if (typeof cleanup == "function") {
+            cleanup();
+          } else {
+            setRef(refs[i], null);
+          }
+        }
+      };
+    }
+  };
+}
+
+// ../../node_modules/.pnpm/@radix-ui+react-slot@1.2.4_@types+react@19.2.7_react@19.2.3/node_modules/@radix-ui/react-slot/dist/index.mjs
+import { Fragment as Fragment2, jsx } from "react/jsx-runtime";
+var REACT_LAZY_TYPE = /* @__PURE__ */ Symbol.for("react.lazy");
+var use = React2[" use ".trim().toString()];
+function isPromiseLike(value) {
+  return typeof value === "object" && value !== null && "then" in value;
+}
+function isLazyComponent(element) {
+  return element != null && typeof element === "object" && "$$typeof" in element && element.$$typeof === REACT_LAZY_TYPE && "_payload" in element && isPromiseLike(element._payload);
+}
+// @__NO_SIDE_EFFECTS__
+function createSlot(ownerName) {
+  const SlotClone = /* @__PURE__ */ createSlotClone(ownerName);
+  const Slot2 = React2.forwardRef((props, forwardedRef) => {
+    let { children, ...slotProps } = props;
+    if (isLazyComponent(children) && typeof use === "function") {
+      children = use(children._payload);
+    }
+    const childrenArray = React2.Children.toArray(children);
+    const slottable = childrenArray.find(isSlottable);
+    if (slottable) {
+      const newElement = slottable.props.children;
+      const newChildren = childrenArray.map((child) => {
+        if (child === slottable) {
+          if (React2.Children.count(newElement) > 1) return React2.Children.only(null);
+          return React2.isValidElement(newElement) ? newElement.props.children : null;
+        } else {
+          return child;
+        }
+      });
+      return /* @__PURE__ */ jsx(SlotClone, { ...slotProps, ref: forwardedRef, children: React2.isValidElement(newElement) ? React2.cloneElement(newElement, void 0, newChildren) : null });
+    }
+    return /* @__PURE__ */ jsx(SlotClone, { ...slotProps, ref: forwardedRef, children });
+  });
+  Slot2.displayName = `${ownerName}.Slot`;
+  return Slot2;
+}
+var Slot = /* @__PURE__ */ createSlot("Slot");
+// @__NO_SIDE_EFFECTS__
+function createSlotClone(ownerName) {
+  const SlotClone = React2.forwardRef((props, forwardedRef) => {
+    let { children, ...slotProps } = props;
+    if (isLazyComponent(children) && typeof use === "function") {
+      children = use(children._payload);
+    }
+    if (React2.isValidElement(children)) {
+      const childrenRef = getElementRef(children);
+      const props2 = mergeProps(slotProps, children.props);
+      if (children.type !== React2.Fragment) {
+        props2.ref = forwardedRef ? composeRefs(forwardedRef, childrenRef) : childrenRef;
+      }
+      return React2.cloneElement(children, props2);
+    }
+    return React2.Children.count(children) > 1 ? React2.Children.only(null) : null;
+  });
+  SlotClone.displayName = `${ownerName}.SlotClone`;
+  return SlotClone;
+}
+var SLOTTABLE_IDENTIFIER = /* @__PURE__ */ Symbol("radix.slottable");
+function isSlottable(child) {
+  return React2.isValidElement(child) && typeof child.type === "function" && "__radixId" in child.type && child.type.__radixId === SLOTTABLE_IDENTIFIER;
+}
+function mergeProps(slotProps, childProps) {
+  const overrideProps = { ...childProps };
+  for (const propName in childProps) {
+    const slotPropValue = slotProps[propName];
+    const childPropValue = childProps[propName];
+    const isHandler = /^on[A-Z]/.test(propName);
+    if (isHandler) {
+      if (slotPropValue && childPropValue) {
+        overrideProps[propName] = (...args) => {
+          const result = childPropValue(...args);
+          slotPropValue(...args);
+          return result;
+        };
+      } else if (slotPropValue) {
+        overrideProps[propName] = slotPropValue;
+      }
+    } else if (propName === "style") {
+      overrideProps[propName] = { ...slotPropValue, ...childPropValue };
+    } else if (propName === "className") {
+      overrideProps[propName] = [slotPropValue, childPropValue].filter(Boolean).join(" ");
+    }
+  }
+  return { ...slotProps, ...overrideProps };
+}
+function getElementRef(element) {
+  let getter = Object.getOwnPropertyDescriptor(element.props, "ref")?.get;
+  let mayWarn = getter && "isReactWarning" in getter && getter.isReactWarning;
+  if (mayWarn) {
+    return element.ref;
+  }
+  getter = Object.getOwnPropertyDescriptor(element, "ref")?.get;
+  mayWarn = getter && "isReactWarning" in getter && getter.isReactWarning;
+  if (mayWarn) {
+    return element.props.ref;
+  }
+  return element.props.ref || element.ref;
+}
+
+// src/client/components/ui/button.tsx
+import { cva } from "class-variance-authority";
+
+// src/client/lib/utils.ts
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+// src/client/components/ui/button.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+var buttonVariants = cva(
+  "inline-flex cursor-pointer items-center justify-center gap-2 whitespace-nowrap rounded-full text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive: "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline: "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+        link: "text-primary underline-offset-4 hover:underline"
+      },
+      size: {
+        default: "h-9 px-4 py-2 has-[>svg]:px-3",
+        sm: "h-8 rounded-full gap-1.5 px-3 has-[>svg]:px-2.5",
+        lg: "h-10 rounded-full px-6 has-[>svg]:px-4",
+        icon: "size-9",
+        "icon-sm": "size-8",
+        "icon-lg": "size-10"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+function Button({
+  className,
+  variant,
+  size,
+  asChild = false,
+  ...props
+}) {
+  const Comp = asChild ? Slot : "button";
+  return /* @__PURE__ */ jsx2(
+    Comp,
+    {
+      "data-slot": "button",
+      className: cn(buttonVariants({ variant, size, className })),
+      ...props
+    }
+  );
+}
+
+// src/client/components/ui/dialog.tsx
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { XIcon } from "lucide-react";
+import { jsx as jsx3, jsxs } from "react/jsx-runtime";
+function Dialog({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx3(DialogPrimitive.Root, { "data-slot": "dialog", ...props });
+}
+function DialogPortal({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx3(DialogPrimitive.Portal, { "data-slot": "dialog-portal", ...props });
+}
+function DialogOverlay({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx3(
+    DialogPrimitive.Overlay,
+    {
+      "data-slot": "dialog-overlay",
+      className: cn(
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function DialogContent({
+  className,
+  children,
+  showCloseButton = true,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(DialogPortal, { "data-slot": "dialog-portal", children: [
+    /* @__PURE__ */ jsx3(DialogOverlay, {}),
+    /* @__PURE__ */ jsxs(
+      DialogPrimitive.Content,
+      {
+        "data-slot": "dialog-content",
+        className: cn(
+          "bg-background 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 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
+          className
+        ),
+        ...props,
+        children: [
+          children,
+          showCloseButton && /* @__PURE__ */ jsxs(
+            DialogPrimitive.Close,
+            {
+              "data-slot": "dialog-close",
+              className: "ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+              children: [
+                /* @__PURE__ */ jsx3(XIcon, {}),
+                /* @__PURE__ */ jsx3("span", { className: "sr-only", children: "Close" })
+              ]
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+function DialogHeader({ className, ...props }) {
+  return /* @__PURE__ */ jsx3(
+    "div",
+    {
+      "data-slot": "dialog-header",
+      className: cn("flex flex-col gap-2 text-center sm:text-left", className),
+      ...props
+    }
+  );
+}
+function DialogTitle({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx3(
+    DialogPrimitive.Title,
+    {
+      "data-slot": "dialog-title",
+      className: cn("text-lg leading-none font-semibold", className),
+      ...props
+    }
+  );
+}
+function DialogDescription({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx3(
+    DialogPrimitive.Description,
+    {
+      "data-slot": "dialog-description",
+      className: cn("text-muted-foreground text-sm", className),
+      ...props
+    }
+  );
+}
+
+// src/client/components/ui/dropdown-menu.tsx
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import { jsx as jsx4 } from "react/jsx-runtime";
+var DropdownMenu = DropdownMenuPrimitive.Root;
+var DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
+function DropdownMenuSubTrigger({
+  ref,
+  className,
+  inset,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx4(
+    DropdownMenuPrimitive.SubTrigger,
+    {
+      ref,
+      className: cn(
+        "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent",
+        inset && "pl-8",
+        className
+      ),
+      ...props,
+      children
+    }
+  );
+}
+DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName;
+function DropdownMenuSubContent({
+  ref,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx4(
+    DropdownMenuPrimitive.SubContent,
+    {
+      ref,
+      className: cn(
+        "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg 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",
+        className
+      ),
+      ...props
+    }
+  );
+}
+DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName;
+function DropdownMenuContent({
+  ref,
+  className,
+  sideOffset = 4,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx4(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx4(
+    DropdownMenuPrimitive.Content,
+    {
+      ref,
+      sideOffset,
+      className: cn(
+        "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 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",
+        className
+      ),
+      ...props
+    }
+  ) });
+}
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
+function DropdownMenuItem({
+  ref,
+  className,
+  inset,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx4(
+    DropdownMenuPrimitive.Item,
+    {
+      ref,
+      className: cn(
+        "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+        inset && "pl-8",
+        className
+      ),
+      ...props
+    }
+  );
+}
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
+function DropdownMenuCheckboxItem({
+  ref,
+  className,
+  children,
+  checked,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx4(
+    DropdownMenuPrimitive.CheckboxItem,
+    {
+      ref,
+      className: cn(
+        "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+        className
+      ),
+      checked,
+      ...props,
+      children
+    }
+  );
+}
+DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName;
+function DropdownMenuRadioItem({
+  ref,
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx4(
+    DropdownMenuPrimitive.RadioItem,
+    {
+      ref,
+      className: cn(
+        "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+        className
+      ),
+      ...props,
+      children
+    }
+  );
+}
+DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
+function DropdownMenuLabel({
+  ref,
+  className,
+  inset,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx4(
+    DropdownMenuPrimitive.Label,
+    {
+      ref,
+      className: cn(
+        "px-2 py-1.5 text-sm font-semibold",
+        inset && "pl-8",
+        className
+      ),
+      ...props
+    }
+  );
+}
+DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
+function DropdownMenuSeparator({
+  ref,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx4(
+    DropdownMenuPrimitive.Separator,
+    {
+      ref,
+      className: cn("-mx-1 my-1 h-px bg-muted", className),
+      ...props
+    }
+  );
+}
+DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
+function DropdownMenuShortcut({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx4(
+    "span",
+    {
+      className: cn("ml-auto text-xs tracking-widest opacity-60", className),
+      ...props
+    }
+  );
+}
+DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
+
+// src/client/components/AddToClientDropdown.tsx
+import { Check, ChevronDown, Copy, Plus } from "lucide-react";
+
+// src/client/utils/mcpClientUtils.ts
+function sanitizeServerName(name) {
+  return name.replace(/[^a-zA-Z0-9-_]/g, "_").toLowerCase();
+}
+function escapeShellArg(arg) {
+  return `'${arg.replace(/'/g, "'\\''")}'`;
+}
+function headerToEnvVar(headerName) {
+  return headerName.replace(/[^a-zA-Z0-9]/g, "_").toUpperCase().replace(/^_+|_+$/g, "");
+}
+function generateCursorDeepLink(url, name, headers) {
+  const config = { url };
+  if (headers && Object.keys(headers).length > 0) {
+    const headersWithEnvVars = {};
+    for (const [key] of Object.entries(headers)) {
+      const envVar = headerToEnvVar(key);
+      headersWithEnvVars[key] = `{{${envVar}}}`;
+    }
+    config.headers = headersWithEnvVars;
+  }
+  const configJson = JSON.stringify(config);
+  const base64Config = btoa(configJson);
+  return `cursor://anysphere.cursor-deeplink/mcp/install?config=${base64Config}&name=${encodeURIComponent(sanitizeServerName(name))}`;
+}
+function generateVSCodeDeepLink(url, name, headers) {
+  const config = {
+    url,
+    name: sanitizeServerName(name),
+    type: "http"
+  };
+  if (headers && Object.keys(headers).length > 0) {
+    const headersWithPlaceholder = {};
+    for (const [key] of Object.entries(headers)) {
+      const envVar = headerToEnvVar(key);
+      headersWithPlaceholder[key] = `your-${envVar}-value`;
+    }
+    config.headers = headersWithPlaceholder;
+  }
+  const configJson = JSON.stringify(config);
+  const urlEncodedConfig = encodeURIComponent(configJson);
+  return `vscode:mcp/install?${urlEncodedConfig}`;
+}
+function generateMcpbConfig(url, name, headers) {
+  const config = {
+    url,
+    name: sanitizeServerName(name)
+  };
+  if (headers && Object.keys(headers).length > 0) {
+    const headersWithPlaceholder = {};
+    for (const [key] of Object.entries(headers)) {
+      const envVar = headerToEnvVar(key);
+      headersWithPlaceholder[key] = `your-${envVar}-value`;
+    }
+    config.headers = headersWithPlaceholder;
+  }
+  return config;
+}
+function downloadMcpbFile(url, name, headers) {
+  try {
+    const config = generateMcpbConfig(url, name, headers);
+    const configString = JSON.stringify(config, null, 2);
+    const BlobConstructor = globalThis.Blob;
+    const blob = new BlobConstructor([configString], {
+      type: "application/json"
+    });
+    const downloadUrl = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = downloadUrl;
+    a.download = `${sanitizeServerName(name)}.mcpb`;
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+    URL.revokeObjectURL(downloadUrl);
+  } catch (error) {
+    console.error("Failed to download .mcpb file:", error);
+    throw error;
+  }
+}
+function generateClaudeCodeCommand(url, name, headers) {
+  const sanitizedName = sanitizeServerName(name);
+  let command = `claude mcp add --transport http "${sanitizedName}" \\
+    ${escapeShellArg(url)}`;
+  const envVars = [];
+  if (headers && Object.keys(headers).length > 0) {
+    for (const [headerName] of Object.entries(headers)) {
+      const envVar = headerToEnvVar(headerName);
+      command += ` \\
+    --header ${escapeShellArg(`${headerName}:\${${envVar}}`)}`;
+      envVars.push({ name: envVar, header: headerName });
+    }
+  }
+  return { command, envVars };
+}
+function generateGeminiCLICommand(url, name, headers) {
+  const sanitizedName = sanitizeServerName(name);
+  let command = `gemini mcp add --transport http "${sanitizedName}" ${escapeShellArg(url)}`;
+  const envVars = [];
+  if (headers && Object.keys(headers).length > 0) {
+    for (const [headerName] of Object.entries(headers)) {
+      const envVar = headerToEnvVar(headerName);
+      command += ` \\
+  --header ${escapeShellArg(`${headerName}:\${${envVar}}`)}`;
+      envVars.push({ name: envVar, header: headerName });
+    }
+  }
+  return { command, envVars };
+}
+function generateCodexConfig(url, name, headers) {
+  const sanitizedName = sanitizeServerName(name);
+  let config = `[mcp_servers.${sanitizedName}]
+url = "${url}"`;
+  const envVars = [];
+  if (headers && Object.keys(headers).length > 0) {
+    const headerEntries = [];
+    for (const [headerName] of Object.entries(headers)) {
+      const envVar = headerToEnvVar(headerName);
+      headerEntries.push(`"${headerName}" = "your-${envVar}-value"`);
+      envVars.push({ name: envVar, header: headerName });
+    }
+    config += `
+http_headers = { ${headerEntries.join(", ")} }`;
+    if (envVars.length > 0) {
+      config += `
+
+# (optional) Use environment variables instead:
+# env_http_headers = { `;
+      const envHeaderEntries = envVars.map(
+        ({ name: name2, header }) => `"${header}" = "${name2}"`
+      );
+      config += envHeaderEntries.join(", ");
+      config += ` }`;
+    }
+  }
+  return { config, envVars };
+}
+function getEnvVarInstructions(envVars) {
+  if (envVars.length === 0) return "";
+  let instructions = "Set these environment variables in your shell:\n\n";
+  for (const { name } of envVars) {
+    instructions += `export ${name}="your-${name}-value"
+`;
+  }
+  return instructions;
+}
+function generateTypeScriptSDKCode(url, name, serverId, headers) {
+  const id = serverId || sanitizeServerName(name);
+  const serverConfig = {
+    url
+  };
+  if (headers && Object.keys(headers).length > 0) {
+    serverConfig.headers = headers;
+  }
+  const configString = JSON.stringify(serverConfig, null, 4);
+  const indentedConfig = configString.split("\n").map((line, i) => i === 0 ? line : "    " + line).join("\n");
+  return `import { MCPClient } from "mcp-use";
+
+const client = new MCPClient({
+  mcpServers: {
+    "${id}": ${indentedConfig}
+  }
+});
+
+await client.createAllSessions();
+
+const session = client.getSession("${id}");
+
+// Get available tools
+const tools = await session.listTools();
+console.log('Available tools:', tools.map(tool => tool.name));
+
+// Get available resources
+const resources = await session.listResources();
+console.log('Available resources:', resources.map(resource => resource.name));
+
+// Call a tool (example)
+// const result = await session.callTool("toolName", { param: "value" });
+
+// Read a resource (example)
+// const resourceContent = await session.readResource("resource-uri");`;
+}
+function generatePythonSDKCode(url, name, serverId, headers) {
+  const id = serverId || sanitizeServerName(name);
+  const serverConfig = {
+    url
+  };
+  if (headers && Object.keys(headers).length > 0) {
+    serverConfig.headers = headers;
+  }
+  const configString = JSON.stringify(serverConfig, null, 4);
+  const indentedConfig = configString.split("\n").map((line, i) => i === 0 ? line : "        " + line).join("\n");
+  return `from mcp_use import MCPClient
+
+client = MCPClient(config={
+    "mcpServers": {
+        "${id}": ${indentedConfig}
+    }
+})
+
+await client.create_all_sessions()
+
+session = client.get_session("${id}")
+
+# Get available tools
+tools = await session.list_tools()
+print(f"Available tools: {[tool.name for tool in tools]}")
+
+# Get available resources
+resources = await session.list_resources()
+print(f"Available resources: {[resource.name for resource in resources]}")
+
+# Call a tool (example)
+# result = await session.call_tool("tool_name", {"param": "value"})
+
+# Read a resource (example)
+# resource_content = await session.read_resource("resource_uri")`;
+}
+
+// src/client/components/AddToClientDropdown.tsx
+import { useState } from "react";
+
+// src/client/components/ui/client-icons.tsx
+import { jsx as jsx5 } from "react/jsx-runtime";
+function VSCodeIcon({ className }) {
+  return /* @__PURE__ */ jsx5(
+    "svg",
+    {
+      viewBox: "0 0 24 24",
+      className,
+      fill: "currentColor",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: /* @__PURE__ */ jsx5("path", { d: "M23.15 2.587L18.21.21a1.494 1.494 0 0 0-1.705.29l-9.46 8.63-4.12-3.128a.999.999 0 0 0-1.276.057L.327 7.261A1 1 0 0 0 .326 8.74L3.899 12 .326 15.26a1 1 0 0 0 .001 1.479L1.65 17.94a.999.999 0 0 0 1.276.057l4.12-3.128 9.46 8.63a1.492 1.492 0 0 0 1.704.29l4.942-2.377A1.5 1.5 0 0 0 24 20.06V3.939a1.5 1.5 0 0 0-.85-1.352zm-5.146 14.861L10.826 12l7.178-5.448v10.896z" })
+    }
+  );
+}
+
+// src/client/components/AddToClientDropdown.tsx
+import { Fragment as Fragment3, jsx as jsx6, jsxs as jsxs2 } from "react/jsx-runtime";
+function AddToClientDropdown({
+  serverConfig,
+  additionalItems = [],
+  showClients = {
+    cursor: true,
+    vsCode: true,
+    claudeDesktop: true,
+    claudeCode: true,
+    geminiCli: true,
+    codexCli: true
+  },
+  className = "",
+  onSuccess,
+  onError,
+  trigger
+}) {
+  const [showModal, setShowModal] = useState(false);
+  const [selectedClient, setSelectedClient] = useState(null);
+  const [copied, setCopied] = useState(false);
+  const { url, name, headers } = serverConfig;
+  const handleCursorClick = () => {
+    try {
+      const deepLink = generateCursorDeepLink(url, name, headers);
+      window.location.href = deepLink;
+      onSuccess?.("Cursor");
+    } catch (error) {
+      console.error("Failed to generate Cursor deep link:", error);
+      onError?.(error);
+    }
+  };
+  const handleVSCodeClick = () => {
+    try {
+      const deepLink = generateVSCodeDeepLink(url, name, headers);
+      window.location.href = deepLink;
+      onSuccess?.("VS Code");
+    } catch (error) {
+      console.error("Failed to generate VS Code deep link:", error);
+      onError?.(error);
+    }
+  };
+  const handleClaudeDesktopClick = () => {
+    try {
+      downloadMcpbFile(url, name, headers);
+      onSuccess?.("Claude Desktop");
+    } catch (error) {
+      console.error("Failed to download .mcpb file:", error);
+      onError?.(error);
+    }
+  };
+  const handleClaudeCodeClick = () => {
+    setSelectedClient("claude-code");
+    setShowModal(true);
+  };
+  const handleGeminiCLIClick = () => {
+    setSelectedClient("gemini-cli");
+    setShowModal(true);
+  };
+  const handleCodexCLIClick = () => {
+    setSelectedClient("codex-cli");
+    setShowModal(true);
+  };
+  const handleCopy = async (text) => {
+    try {
+      await navigator.clipboard.writeText(text);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2e3);
+    } catch (error) {
+      console.error("Failed to copy:", error);
+      onError?.(error);
+    }
+  };
+  const renderModalContent = () => {
+    if (selectedClient === "claude-code") {
+      const { command, envVars } = generateClaudeCodeCommand(
+        url,
+        name,
+        headers
+      );
+      const envInstructions = getEnvVarInstructions(envVars);
+      return /* @__PURE__ */ jsxs2(Fragment3, { children: [
+        /* @__PURE__ */ jsxs2(DialogHeader, { children: [
+          /* @__PURE__ */ jsx6(DialogTitle, { children: "Add to Claude Code" }),
+          /* @__PURE__ */ jsx6(DialogDescription, { children: "Execute the following command in your shell to add this server to Claude Code." })
+        ] }),
+        /* @__PURE__ */ jsxs2("div", { className: "space-y-4", children: [
+          /* @__PURE__ */ jsxs2("div", { children: [
+            /* @__PURE__ */ jsx6("h5", { className: "font-semibold text-sm mb-2", children: "Instructions" }),
+            /* @__PURE__ */ jsxs2("ol", { className: "space-y-2 text-xs text-muted-foreground", children: [
+              /* @__PURE__ */ jsxs2("li", { className: "flex gap-2", children: [
+                /* @__PURE__ */ jsx6("span", { className: "font-semibold text-foreground", children: "1." }),
+                /* @__PURE__ */ jsx6("span", { children: "Ensure the Claude Code executable is available in your path" })
+              ] }),
+              /* @__PURE__ */ jsxs2("li", { className: "flex gap-2", children: [
+                /* @__PURE__ */ jsx6("span", { className: "font-semibold text-foreground", children: "2." }),
+                /* @__PURE__ */ jsx6("span", { children: "Execute the following snippet in your shell:" })
+              ] })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs2("div", { className: "relative", children: [
+            /* @__PURE__ */ jsx6("div", { className: "absolute top-2 right-2 z-10", children: /* @__PURE__ */ jsx6(
+              Button,
+              {
+                variant: "ghost",
+                size: "sm",
+                className: "h-7 px-2 bg-background hover:bg-accent border border-border",
+                onClick: () => handleCopy(command),
+                children: copied ? /* @__PURE__ */ jsx6(Check, { className: "size-3.5 text-green-600" }) : /* @__PURE__ */ jsx6(Copy, { className: "size-3.5" })
+              }
+            ) }),
+            /* @__PURE__ */ jsx6("pre", { className: "bg-muted p-3 pr-14 rounded-md text-xs overflow-x-auto", children: /* @__PURE__ */ jsx6("code", { children: command }) })
+          ] }),
+          envInstructions && /* @__PURE__ */ jsxs2("div", { children: [
+            /* @__PURE__ */ jsx6("h5", { className: "font-semibold text-sm mb-2", children: "Environment Variables" }),
+            /* @__PURE__ */ jsx6("p", { className: "text-xs text-muted-foreground mb-2", children: "After installation, set these environment variables in your shell:" }),
+            /* @__PURE__ */ jsx6("pre", { className: "bg-muted p-3 rounded-md text-xs overflow-x-auto", children: /* @__PURE__ */ jsx6("code", { children: envInstructions }) })
+          ] }),
+          /* @__PURE__ */ jsxs2("p", { className: "text-xs text-muted-foreground", children: [
+            "The MCP configuration supports environment variable expansion using ",
+            /* @__PURE__ */ jsx6("code", { className: "text-foreground", children: "${VAR}" }),
+            " ",
+            "syntax."
+          ] })
+        ] })
+      ] });
+    }
+    if (selectedClient === "gemini-cli") {
+      const { command, envVars } = generateGeminiCLICommand(url, name, headers);
+      const envInstructions = getEnvVarInstructions(envVars);
+      return /* @__PURE__ */ jsxs2(Fragment3, { children: [
+        /* @__PURE__ */ jsxs2(DialogHeader, { children: [
+          /* @__PURE__ */ jsx6(DialogTitle, { children: "Add to Gemini CLI" }),
+          /* @__PURE__ */ jsx6(DialogDescription, { children: "Execute the following command in your shell to add this server to Gemini CLI." })
+        ] }),
+        /* @__PURE__ */ jsxs2("div", { className: "space-y-4", children: [
+          /* @__PURE__ */ jsxs2("div", { children: [
+            /* @__PURE__ */ jsx6("h5", { className: "font-semibold text-sm mb-2", children: "Instructions" }),
+            /* @__PURE__ */ jsxs2("ol", { className: "space-y-2 text-xs text-muted-foreground", children: [
+              /* @__PURE__ */ jsxs2("li", { className: "flex gap-2", children: [
+                /* @__PURE__ */ jsx6("span", { className: "font-semibold text-foreground", children: "1." }),
+                /* @__PURE__ */ jsx6("span", { children: "Ensure the Gemini CLI executable is available in your path" })
+              ] }),
+              envInstructions && /* @__PURE__ */ jsxs2("li", { className: "flex gap-2", children: [
+                /* @__PURE__ */ jsx6("span", { className: "font-semibold text-foreground", children: "2." }),
+                /* @__PURE__ */ jsx6("span", { children: "Set these environment variables in your shell before running the command:" })
+              ] }),
+              /* @__PURE__ */ jsxs2("li", { className: "flex gap-2", children: [
+                /* @__PURE__ */ jsx6("span", { className: "font-semibold text-foreground", children: envInstructions ? "3." : "2." }),
+                /* @__PURE__ */ jsx6("span", { children: "Execute the following snippet in your shell:" })
+              ] })
+            ] })
+          ] }),
+          envInstructions && /* @__PURE__ */ jsxs2("div", { children: [
+            /* @__PURE__ */ jsx6("h5", { className: "font-semibold text-sm mb-2", children: "Environment Variables" }),
+            /* @__PURE__ */ jsx6("pre", { className: "bg-muted p-3 rounded-md text-xs overflow-x-auto", children: /* @__PURE__ */ jsx6("code", { children: envInstructions }) })
+          ] }),
+          /* @__PURE__ */ jsxs2("div", { className: "relative", children: [
+            /* @__PURE__ */ jsx6("div", { className: "absolute top-2 right-2 z-10", children: /* @__PURE__ */ jsx6(
+              Button,
+              {
+                variant: "ghost",
+                size: "sm",
+                className: "h-7 px-2 bg-background hover:bg-accent border border-border",
+                onClick: () => handleCopy(command),
+                children: copied ? /* @__PURE__ */ jsx6(Check, { className: "size-3.5 text-green-600" }) : /* @__PURE__ */ jsx6(Copy, { className: "size-3.5" })
+              }
+            ) }),
+            /* @__PURE__ */ jsx6("pre", { className: "bg-muted p-3 pr-14 rounded-md text-xs overflow-x-auto", children: /* @__PURE__ */ jsx6("code", { children: command }) })
+          ] }),
+          /* @__PURE__ */ jsx6("p", { className: "text-xs text-muted-foreground", children: "Restart Gemini CLI to load the new configuration." })
+        ] })
+      ] });
+    }
+    if (selectedClient === "codex-cli") {
+      const { config, envVars } = generateCodexConfig(url, name, headers);
+      return /* @__PURE__ */ jsxs2(Fragment3, { children: [
+        /* @__PURE__ */ jsxs2(DialogHeader, { children: [
+          /* @__PURE__ */ jsx6(DialogTitle, { children: "Add to Codex CLI" }),
+          /* @__PURE__ */ jsxs2(DialogDescription, { children: [
+            "Add this configuration to your",
+            " ",
+            /* @__PURE__ */ jsx6("code", { className: "text-foreground", children: "~/.codex/config.toml" }),
+            " ",
+            "file."
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs2("div", { className: "space-y-4", children: [
+          /* @__PURE__ */ jsxs2("div", { children: [
+            /* @__PURE__ */ jsx6("h5", { className: "font-semibold text-sm mb-2", children: "Instructions" }),
+            /* @__PURE__ */ jsxs2("p", { className: "text-xs text-muted-foreground", children: [
+              "Add this configuration to your",
+              " ",
+              /* @__PURE__ */ jsx6("code", { className: "text-foreground", children: "~/.codex/config.toml" }),
+              ":"
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs2("div", { className: "relative", children: [
+            /* @__PURE__ */ jsx6("div", { className: "absolute top-2 right-2 z-10", children: /* @__PURE__ */ jsx6(
+              Button,
+              {
+                variant: "ghost",
+                size: "sm",
+                className: "h-7 px-2 bg-background hover:bg-accent border border-border",
+                onClick: () => handleCopy(config),
+                children: copied ? /* @__PURE__ */ jsx6(Check, { className: "size-3.5 text-green-600" }) : /* @__PURE__ */ jsx6(Copy, { className: "size-3.5" })
+              }
+            ) }),
+            /* @__PURE__ */ jsx6("pre", { className: "bg-muted p-3 pr-14 rounded-md text-xs overflow-x-auto", children: /* @__PURE__ */ jsx6("code", { children: config }) })
+          ] }),
+          envVars.length > 0 && /* @__PURE__ */ jsx6("div", { children: /* @__PURE__ */ jsxs2("p", { className: "text-xs text-muted-foreground", children: [
+            "(optional) If you would rather use variables from your system's environment, replace the",
+            " ",
+            /* @__PURE__ */ jsx6("code", { className: "text-foreground", children: "http_headers" }),
+            " key with the ",
+            /* @__PURE__ */ jsx6("code", { className: "text-foreground", children: "env_http_headers" }),
+            " ",
+            "key as shown in the commented section above."
+          ] }) }),
+          /* @__PURE__ */ jsx6("p", { className: "text-xs text-muted-foreground", children: "Restart Codex CLI to load the new configuration." })
+        ] })
+      ] });
+    }
+    return null;
+  };
+  const defaultTrigger = /* @__PURE__ */ jsxs2(
+    Button,
+    {
+      variant: "ghost",
+      className: `bg-zinc-200 dark:bg-zinc-800 hover:bg-zinc-300 dark:hover:bg-zinc-700 rounded-full transition-colors px-3 flex items-center justify-center ${className}`,
+      children: [
+        /* @__PURE__ */ jsxs2("span", { className: "xl:hidden hidden sm:flex items-center gap-1", children: [
+          /* @__PURE__ */ jsx6(Plus, { className: "size-3" }),
+          "Client"
+        ] }),
+        /* @__PURE__ */ jsxs2("span", { className: "hidden xl:flex items-center gap-1", children: [
+          "Add to Client",
+          /* @__PURE__ */ jsx6(ChevronDown, { className: "size-3" })
+        ] })
+      ]
+    }
+  );
+  const triggerElement = trigger ? typeof trigger === "function" ? trigger({
+    isOpen: false,
+    onClick: () => {
+    }
+  }) : trigger : defaultTrigger;
+  return /* @__PURE__ */ jsxs2(Fragment3, { children: [
+    /* @__PURE__ */ jsxs2(DropdownMenu, { children: [
+      /* @__PURE__ */ jsx6(DropdownMenuTrigger, { asChild: true, children: triggerElement }),
+      /* @__PURE__ */ jsxs2(DropdownMenuContent, { align: "end", className: "w-auto min-w-[300px]", children: [
+        additionalItems.map((item) => /* @__PURE__ */ jsxs2(
+          DropdownMenuItem,
+          {
+            onClick: async () => {
+              await item.onClick();
+            },
+            className: "flex items-center gap-2",
+            children: [
+              item.icon,
+              /* @__PURE__ */ jsx6("span", { className: "min-w-0 max-w-full whitespace-nowrap", children: item.label })
+            ]
+          },
+          item.id
+        )),
+        additionalItems.length > 0 && /* @__PURE__ */ jsx6(DropdownMenuSeparator, {}),
+        showClients.cursor && /* @__PURE__ */ jsxs2(
+          DropdownMenuItem,
+          {
+            onClick: handleCursorClick,
+            className: "flex items-center gap-2",
+            children: [
+              /* @__PURE__ */ jsx6(
+                "img",
+                {
+                  src: "https://cdn.simpleicons.org/cursor",
+                  alt: "Cursor",
+                  className: "h-4 w-4"
+                }
+              ),
+              /* @__PURE__ */ jsx6("span", { className: "min-w-0 max-w-full whitespace-nowrap", children: "Cursor" })
+            ]
+          }
+        ),
+        showClients.claudeCode && /* @__PURE__ */ jsxs2(
+          DropdownMenuItem,
+          {
+            onClick: handleClaudeCodeClick,
+            className: "flex items-center gap-2",
+            children: [
+              /* @__PURE__ */ jsx6(
+                "img",
+                {
+                  src: "https://cdn.simpleicons.org/claude",
+                  alt: "Claude",
+                  className: "h-4 w-4"
+                }
+              ),
+              /* @__PURE__ */ jsx6("span", { className: "min-w-0 max-w-full whitespace-nowrap", children: "Claude Code" })
+            ]
+          }
+        ),
+        showClients.claudeDesktop && /* @__PURE__ */ jsxs2(
+          DropdownMenuItem,
+          {
+            onClick: handleClaudeDesktopClick,
+            className: "flex items-center gap-2",
+            children: [
+              /* @__PURE__ */ jsx6(
+                "img",
+                {
+                  src: "https://cdn.simpleicons.org/claude",
+                  alt: "Claude",
+                  className: "h-4 w-4"
+                }
+              ),
+              /* @__PURE__ */ jsx6("span", { className: "min-w-0 max-w-full whitespace-nowrap", children: "Claude Desktop" })
+            ]
+          }
+        ),
+        showClients.vsCode && /* @__PURE__ */ jsxs2(
+          DropdownMenuItem,
+          {
+            onClick: handleVSCodeClick,
+            className: "flex items-center gap-2",
+            children: [
+              /* @__PURE__ */ jsx6(VSCodeIcon, { className: "h-4 w-4" }),
+              /* @__PURE__ */ jsx6("span", { className: "min-w-0 max-w-full whitespace-nowrap", children: "VS Code" })
+            ]
+          }
+        ),
+        showClients.geminiCli && /* @__PURE__ */ jsxs2(
+          DropdownMenuItem,
+          {
+            onClick: handleGeminiCLIClick,
+            className: "flex items-center gap-2",
+            children: [
+              /* @__PURE__ */ jsx6(
+                "img",
+                {
+                  src: "https://cdn.simpleicons.org/googlegemini",
+                  alt: "Gemini",
+                  className: "h-4 w-4"
+                }
+              ),
+              /* @__PURE__ */ jsx6("span", { className: "min-w-0 max-w-full whitespace-nowrap", children: "Gemini CLI" })
+            ]
+          }
+        ),
+        showClients.codexCli && /* @__PURE__ */ jsxs2(
+          DropdownMenuItem,
+          {
+            onClick: handleCodexCLIClick,
+            className: "flex items-center gap-2",
+            children: [
+              /* @__PURE__ */ jsx6(
+                "img",
+                {
+                  src: "https://inspector-cdn.mcp-use.com/providers/openai.png",
+                  alt: "Codex",
+                  className: "h-4 w-4"
+                }
+              ),
+              /* @__PURE__ */ jsx6("span", { className: "min-w-0 max-w-full whitespace-nowrap", children: "Codex CLI" })
+            ]
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx6(Dialog, { open: showModal, onOpenChange: setShowModal, children: /* @__PURE__ */ jsx6(DialogContent, { className: "max-w-3xl max-h-[80vh] overflow-y-auto", children: renderModalContent() }) })
+  ] });
+}
+export {
+  AddToClientDropdown,
+  downloadMcpbFile,
+  generateClaudeCodeCommand,
+  generateCodexConfig,
+  generateCursorDeepLink,
+  generateGeminiCLICommand,
+  generateMcpbConfig,
+  generatePythonSDKCode,
+  generateTypeScriptSDKCode,
+  generateVSCodeDeepLink,
+  getEnvVarInstructions
+};