zudoku 0.0.0-fix-create-zudoku-run-build.fefccf58 → 0.0.0-fix-downgrade-openapi-parser.aac00796

package/src/lib/plugins/api-keys/SettingsApiKeys.tsx

@@ -6,9 +6,6 @@ import {
 import {
   CheckIcon,
   CircleSlashIcon,
-  CopyIcon,
-  EyeIcon,
-  EyeOffIcon,
   PencilLineIcon,
   RefreshCwIcon,
   TrashIcon,
@@ -16,7 +13,6 @@ import {
 } from "lucide-react";
 import { AnimatePresence } from "motion/react";
 import React, { useState } from "react";
-import { Link } from "react-router";
 import { Alert, AlertTitle } from "zudoku/ui/Alert.js";
 import { Card, CardHeader } from "zudoku/ui/Card.js";
 import {
@@ -29,13 +25,13 @@ import {
   DialogTitle,
   DialogTrigger,
 } from "zudoku/ui/Dialog.js";
+import { Secret } from "zudoku/ui/Secret.js";
 import { useZudoku } from "../../components/context/ZudokuContext.js";
 import { Slot } from "../../components/Slot.js";
 import { Button } from "../../ui/Button.js";
 import { Input } from "../../ui/Input.js";
 import { cn } from "../../util/cn.js";
-import { useCopyToClipboard } from "../../util/useCopyToClipboard.js";
-import { CreateApiKey } from "./CreateApiKey.js";
+import { CreateApiKeyDialog } from "./CreateApiKeyDialog.js";
 import type { ApiConsumer, ApiKey, ApiKeyService } from "./index.js";
 
 export const SettingsApiKeys = ({ service }: { service: ApiKeyService }) => {
@@ -186,23 +182,11 @@ export const SettingsApiKeys = ({ service }: { service: ApiKeyService }) => {
         <h1 className="font-medium text-2xl">API Keys</h1>
 
         {service.createKey && (
-          <Dialog
-            open={isCreateApiKeyOpen}
+          <CreateApiKeyDialog
+            service={service}
+            isOpen={isCreateApiKeyOpen}
             onOpenChange={setIsCreateApiKeyOpen}
-          >
-            <DialogTrigger asChild>
-              <Button variant="outline">Create API Key</Button>
-            </DialogTrigger>
-            <DialogContent>
-              <DialogHeader>
-                <DialogTitle>Create API Key</DialogTitle>
-              </DialogHeader>
-              <CreateApiKey
-                service={service}
-                onOpenChange={setIsCreateApiKeyOpen}
-              />
-            </DialogContent>
-          </Dialog>
+          />
         )}
       </div>
       <p>Create, manage, and monitor your API keys</p>
@@ -236,9 +220,11 @@ export const SettingsApiKeys = ({ service }: { service: ApiKeyService }) => {
               {service.createKey && "Get started and create your first key."}
             </p>
             {service.createKey && (
-              <Button asChild variant="outline">
-                <Link to="/settings/api-keys/new">Create API Key</Link>
-              </Button>
+              <CreateApiKeyDialog
+                service={service}
+                isOpen={isCreateApiKeyOpen}
+                onOpenChange={setIsCreateApiKeyOpen}
+              />
             )}
           </div>
         ) : (
@@ -438,7 +424,6 @@ const RevealApiKey = ({
   className?: string;
 }) => {
   const [revealed, setRevealed] = useState(false);
-  const [isCopied, copyToClipboard] = useCopyToClipboard();
 
   const { key, createdOn, expiresOn } = apiKey;
   const isExpired = expiresOn && new Date(expiresOn) < new Date();
@@ -452,44 +437,13 @@ const RevealApiKey = ({
   return (
     <div className={cn("grid col-span-full grid-cols-subgrid p-6", className)}>
       <div className="flex flex-col gap-1">
-        <div className="flex gap-2 items-center text-sm border rounded-md w-full max-w-fit px-1">
-          <div className="font-mono w-full h-9 items-center flex px-2 text-xs gap-2">
-            <div
-              className={cn(
-                "rounded-full w-2 h-2 bg-emerald-400 mr-2",
-                (expiresSoon || isExpired) && "bg-neutral-200",
-              )}
-            ></div>
-            <span className="w-full truncate">
-              <div
-                className={cn(
-                  "w-40 inline-block md:w-full truncate",
-                  revealed ? "" : "opacity-20",
-                )}
-              >
-                {revealed
-                  ? key.slice(0, -5)
-                  : "**** ".repeat(key.slice(0, -5).length / 5) +
-                    "*".repeat(key.slice(0, -5).length % 5)}
-              </div>
-              <span>{key.slice(-5)}</span>
-            </span>
-          </div>
-          <Button
-            variant="ghost"
-            onClick={() => setRevealed((prev) => !prev)}
-            size="icon"
-          >
-            {revealed ? <EyeOffIcon size={16} /> : <EyeIcon size={16} />}
-          </Button>
-          <Button
-            variant="ghost"
-            onClick={() => copyToClipboard(key)}
-            size="icon"
-          >
-            {isCopied ? <CheckIcon size={16} /> : <CopyIcon size={16} />}
-          </Button>
-        </div>
+        <Secret
+          className="max-w-fit w-full"
+          secret={key}
+          status={isExpired ? "expired" : expiresSoon ? "expiring" : "active"}
+          revealed={revealed}
+          onReveal={setRevealed}
+        />
         <div className="flex gap-1 mt-0.5 text-nowrap">
           {createdOn && (
             <span className="text-xs text-muted-foreground">

package/src/lib/plugins/markdown/MdxPage.tsx

@@ -1,9 +1,23 @@
 import { useMDXComponents } from "@mdx-js/react";
 import slugify from "@sindresorhus/slugify";
 import { Helmet } from "@zudoku/react-helmet-async";
-import { EditIcon } from "lucide-react";
-import { type PropsWithChildren, useEffect } from "react";
+import {
+  CheckIcon,
+  ChevronDownIcon,
+  CopyIcon,
+  EditIcon,
+  ExternalLinkIcon,
+  Link2Icon,
+} from "lucide-react";
+import { type PropsWithChildren, useEffect, useState } from "react";
+import { useLocation } from "react-router";
 import { Button } from "zudoku/ui/Button.js";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "zudoku/ui/DropdownMenu.js";
 import { CategoryHeading } from "../../components/CategoryHeading.js";
 import { Heading } from "../../components/Heading.js";
 import { Toc } from "../../components/navigation/Toc.js";
@@ -13,7 +27,10 @@ import {
 } from "../../components/navigation/utils.js";
 import { Pagination } from "../../components/Pagination.js";
 import { Typography } from "../../components/Typography.js";
+import { joinUrl } from "../../util/joinUrl.js";
 import type { MdxComponentsType } from "../../util/MdxComponents.js";
+import { ChatGPTLogo } from "./assets/ChatGPTLogo.js";
+import { ClaudeLogo } from "./assets/ClaudeLogo.js";
 import type { MarkdownPluginDefaultOptions, MDXImport } from "./index.js";
 
 declare global {
@@ -39,6 +56,7 @@ const MarkdownHeadings = {
 
 export const MdxPage = ({
   mdxComponent: MdxComponent,
+  basePath,
   frontmatter = {},
   defaultOptions,
   __filepath,
@@ -46,11 +64,14 @@ export const MdxPage = ({
   excerpt,
 }: PropsWithChildren<
   Omit<MDXImport, "default"> & {
+    basePath: string;
     mdxComponent: MDXImport["default"];
     defaultOptions?: MarkdownPluginDefaultOptions;
   }
 >) => {
   const categoryTitle = useCurrentItem()?.categoryLabel;
+  const location = useLocation();
+  const [isCopied, setIsCopied] = useState(false);
 
   const title = frontmatter.title;
   const description = frontmatter.description ?? excerpt;
@@ -80,6 +101,20 @@ export const MdxPage = ({
     : null;
   const editText = editConfig ? editConfig.text || "Edit this page" : null;
 
+  const copyMarkdownConfig =
+    frontmatter.copyPage !== false && defaultOptions?.copyPage !== false;
+
+  const markdownUrl = joinUrl(basePath, `${location.pathname}.md`);
+
+  const handleCopyMarkdown = async () => {
+    const response = await fetch(markdownUrl);
+    if (!response.ok) throw new Error("Failed to fetch markdown");
+    const markdown = await response.text();
+    void navigator.clipboard.writeText(markdown);
+    setIsCopied(true);
+    setTimeout(() => setIsCopied(false), 2000);
+  };
+
   const tocEntries =
     tableOfContents.find((item) => item.depth === 1)?.children ??
     // if `title` is provided by frontmatter it does not appear in the table of contents
@@ -115,15 +150,97 @@ export const MdxPage = ({
       </Helmet>
       <Typography className="max-w-full xl:w-full xl:max-w-3xl flex-1 shrink pt-(--padding-content-top)">
         {(category || title) && (
-          <header>
-            {category && <CategoryHeading>{category}</CategoryHeading>}
-            {title && (
-              <Heading level={1} id={slugify(title)}>
-                {title}
-              </Heading>
+          <header className="flex items-start justify-between gap-4">
+            <div className="flex-1">
+              {category && <CategoryHeading>{category}</CategoryHeading>}
+              {title && (
+                <Heading level={1} id={slugify(title)}>
+                  {title}
+                </Heading>
+              )}
+            </div>
+            {copyMarkdownConfig && (
+              <div className="flex items-center border rounded-md">
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  onClick={handleCopyMarkdown}
+                  className="rounded-r-none border-r gap-2 h-7"
+                >
+                  {isCopied ? (
+                    <CheckIcon size={14} className="text-emerald-600" />
+                  ) : (
+                    <CopyIcon size={14} />
+                  )}
+                  <span>Copy page</span>
+                </Button>
+                <DropdownMenu>
+                  <DropdownMenuTrigger asChild>
+                    <Button
+                      variant="ghost"
+                      size="icon-xs"
+                      className="rounded-l-none"
+                    >
+                      <ChevronDownIcon size={14} />
+                    </Button>
+                  </DropdownMenuTrigger>
+                  <DropdownMenuContent align="end">
+                    <DropdownMenuItem
+                      className="gap-2"
+                      onClick={() =>
+                        void navigator.clipboard.writeText(window.location.href)
+                      }
+                    >
+                      <Link2Icon className="size-4" />
+                      Copy link to page
+                    </DropdownMenuItem>
+                    <DropdownMenuItem className="gap-2" asChild>
+                      <a
+                        href={markdownUrl}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                      >
+                        <ExternalLinkIcon className="size-4" />
+                        Open Markdown page
+                      </a>
+                    </DropdownMenuItem>
+                    <DropdownMenuItem
+                      className="gap-2"
+                      onClick={() => {
+                        const prompt = encodeURIComponent(
+                          `Help me understand this documentation page: ${window.location.href}`,
+                        );
+                        window.open(
+                          `https://claude.ai/new?q=${prompt}`,
+                          "_blank",
+                        );
+                      }}
+                    >
+                      <ClaudeLogo className="size-4" />
+                      Open in Claude
+                    </DropdownMenuItem>
+                    <DropdownMenuItem
+                      className="gap-2"
+                      onClick={() => {
+                        const prompt = encodeURIComponent(
+                          `Help me understand this documentation page: ${window.location.href}`,
+                        );
+                        window.open(
+                          `https://chatgpt.com/?q=${prompt}`,
+                          "_blank",
+                        );
+                      }}
+                    >
+                      <ChatGPTLogo className="size-4" />
+                      Open in ChatGPT
+                    </DropdownMenuItem>
+                  </DropdownMenuContent>
+                </DropdownMenu>
+              </div>
             )}
           </header>
         )}
+
         <MdxComponent
           components={{ ...useMDXComponents(), ...MarkdownHeadings }}
         />
@@ -157,7 +274,7 @@ export const MdxPage = ({
                   >
                     Last modified on{" "}
                     <time dateTime={lastModifiedDate.toISOString()}>
-                      {lastModifiedDate.toLocaleDateString(undefined, {
+                      {lastModifiedDate.toLocaleDateString("en-US", {
                         dateStyle: "long",
                       })}
                     </time>

package/src/lib/plugins/markdown/assets/ChatGPTLogo.tsx

@@ -0,0 +1,11 @@
+import type { SVGProps } from "react";
+
+export const ChatGPTLogo = (props: SVGProps<SVGSVGElement>) => (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 320" {...props}>
+    <title>ChatGPT</title>
+    <path
+      fill="currentColor"
+      d="M297.06 130.97a79.712 79.712 0 0 0-6.85-65.48c-17.46-30.4-52.56-46.04-86.84-38.68A79.747 79.747 0 0 0 143.24 0C108.2-.08 77.11 22.48 66.33 55.82a79.754 79.754 0 0 0-53.31 38.67c-17.59 30.32-13.58 68.54 9.92 94.54a79.712 79.712 0 0 0 6.85 65.48c17.46 30.4 52.56 46.04 86.84 38.68a79.687 79.687 0 0 0 60.13 26.8c35.06.09 66.16-22.49 76.94-55.86a79.754 79.754 0 0 0 53.31-38.67c17.57-30.32 13.55-68.51-9.94-94.51zM176.78 299.08a59.77 59.77 0 0 1-38.39-13.88c.49-.26 1.34-.73 1.89-1.07l63.72-36.8a10.36 10.36 0 0 0 5.24-9.07v-89.83l26.93 15.55c.29.14.48.42.52.74v74.39c-.04 33.08-26.83 59.9-59.91 59.97zM47.94 244.05a59.71 59.71 0 0 1-7.15-40.18c.47.28 1.3.79 1.89 1.13l63.72 36.8c3.23 1.89 7.23 1.89 10.47 0l77.79-44.92v31.1c.02.32-.13.63-.38.83L129.87 266c-28.69 16.52-65.33 6.7-81.92-21.95zM31.17 104.96c7-12.16 18.05-21.46 31.21-26.29 0 .55-.03 1.52-.03 2.2v73.61c-.02 3.74 1.98 7.21 5.23 9.06l77.79 44.91L118.44 224c-.27.18-.61.21-.91.08l-64.42-37.22c-28.63-16.58-38.45-53.21-21.95-81.89zm221.26 51.49-77.79-44.92 26.93-15.54c.27-.18.61-.21.91-.08l64.42 37.19c28.68 16.57 38.51 53.26 21.94 81.94a59.94 59.94 0 0 1-31.2 26.28v-75.81c.03-3.74-1.96-7.2-5.2-9.06zm26.8-40.34c-.47-.29-1.3-.79-1.89-1.13l-63.72-36.8a10.375 10.375 0 0 0-10.47 0l-77.79 44.92V92c-.02-.32.13-.63.38-.83l64.41-37.16c28.69-16.55 65.37-6.7 81.91 22a59.95 59.95 0 0 1 7.15 40.1zm-168.51 55.43-26.94-15.55a.943.943 0 0 1-.52-.74V80.86c.02-33.12 26.89-59.96 60.01-59.94 14.01 0 27.57 4.92 38.34 13.88-.49.26-1.33.73-1.89 1.07L116 72.67a10.344 10.344 0 0 0-5.24 9.06l-.04 89.79zM125.35 140 160 119.99l34.65 20V180L160 200l-34.65-20z"
+    />
+  </svg>
+);

package/src/lib/plugins/markdown/assets/ClaudeLogo.tsx

@@ -0,0 +1,19 @@
+import type { SVGProps } from "react";
+
+export const ClaudeLogo = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    fill="currentColor"
+    fillRule="evenodd"
+    viewBox="0 0 24 24"
+    {...props}
+  >
+    <title>Claude</title>
+    <path
+      fill="#D97757"
+      d="m4.709 15.955 4.72-2.647.08-.23-.08-.128H9.2l-.79-.048-2.698-.073-2.339-.097-2.266-.122-.571-.121L0 11.784l.055-.352.48-.321.686.06 1.52.103 2.278.158 1.652.097 2.449.255h.389l.055-.157-.134-.098-.103-.097-2.358-1.596-2.552-1.688-1.336-.972-.724-.491-.364-.462-.158-1.008.656-.722.881.06.225.061.893.686 1.908 1.476 2.491 1.833.365.304.145-.103.019-.073-.164-.274-1.355-2.446-1.446-2.49-.644-1.032-.17-.619a2.97 2.97 0 0 1-.104-.729L6.283.134 6.696 0l.996.134.42.364.62 1.414 1.002 2.229 1.555 3.03.456.898.243.832.091.255h.158V9.01l.128-1.706.237-2.095.23-2.695.08-.76.376-.91.747-.492.584.28.48.685-.067.444-.286 1.851-.559 2.903-.364 1.942h.212l.243-.242.985-1.306 1.652-2.064.73-.82.85-.904.547-.431h1.033l.76 1.129-.34 1.166-1.064 1.347-.881 1.142-1.264 1.7-.79 1.36.073.11.188-.02 2.856-.606 1.543-.28 1.841-.315.833.388.091.395-.328.807-1.969.486-2.309.462-3.439.813-.042.03.049.061 1.549.146.662.036h1.622l3.02.225.79.522.474.638-.079.485-1.215.62-1.64-.389-3.829-.91-1.312-.329h-.182v.11l1.093 1.068 2.006 1.81 2.509 2.33.127.578-.322.455-.34-.049-2.205-1.657-.851-.747-1.926-1.62h-.128v.17l.444.649 2.345 3.521.122 1.08-.17.353-.608.213-.668-.122-1.374-1.925-1.415-2.167-1.143-1.943-.14.08-.674 7.254-.316.37-.729.28-.607-.461-.322-.747.322-1.476.389-1.924.315-1.53.286-1.9.17-.632-.012-.042-.14.018-1.434 1.967-2.18 2.945-1.726 1.845-.414.164-.717-.37.067-.662.401-.589 2.388-3.036 1.44-1.882.93-1.086-.006-.158h-.055L4.132 18.56l-1.13.146-.487-.456.061-.746.231-.243 1.908-1.312z"
+    />
+  </svg>
+);

package/src/lib/plugins/markdown/index.tsx

@@ -5,11 +5,12 @@ import type { ZudokuDocsConfig } from "../../../config/validators/validate.js";
 import type { ZudokuPlugin } from "../../core/plugins.js";
 
 export interface MarkdownPluginOptions extends ZudokuDocsConfig {
+  basePath: string;
   fileImports: Record<string, () => Promise<MDXImport>>;
 }
 export type MarkdownPluginDefaultOptions = Pick<
   Frontmatter,
-  "toc" | "disablePager" | "showLastModified" | "suggestEdit"
+  "toc" | "disablePager" | "showLastModified" | "suggestEdit" | "copyPage"
 >;
 
 export type Frontmatter = {
@@ -21,12 +22,8 @@ export type Frontmatter = {
   disable_pager?: boolean;
   showLastModified?: boolean;
   lastModifiedTime?: number;
-  suggestEdit?:
-    | {
-        url: string;
-        text?: string;
-      }
-    | false;
+  suggestEdit?: { url: string; text?: string } | false;
+  copyPage?: boolean;
 };
 
 export type MDXImport = {
@@ -50,6 +47,7 @@ export const markdownPlugin = (
           return {
             element: (
               <MdxPage
+                basePath={options.basePath}
                 mdxComponent={Component}
                 {...props}
                 defaultOptions={options.defaultOptions}

package/src/lib/plugins/openapi/MCPEndpoint.tsx

@@ -0,0 +1,273 @@
+import { CheckIcon, CopyIcon, ExternalLinkIcon } from "lucide-react";
+import { useState } from "react";
+import { InlineCode } from "../../components/InlineCode.js";
+import { Typography } from "../../components/Typography.js";
+import { Button } from "../../ui/Button.js";
+import { Callout } from "../../ui/Callout.js";
+import { Card } from "../../ui/Card.js";
+import { SyntaxHighlight } from "../../ui/SyntaxHighlight.js";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "../../ui/Tabs.js";
+import { cn } from "../../util/cn.js";
+
+export const MCPEndpoint = ({
+  serverUrl,
+  summary,
+  data,
+}: {
+  serverUrl?: string;
+  data?: boolean | Record<string, unknown>;
+  summary?: string;
+}) => {
+  const [isCopied, setIsCopied] = useState(false);
+  const mcpUrl = `${(serverUrl ?? "").replace(/\/+$/, "")}/mcp`;
+
+  const name =
+    typeof data === "boolean"
+      ? (summary ?? "mcp-server")
+      : (data?.name ?? summary ?? "mcp-server");
+
+  const claudeConfig = `{
+  "mcpServers": {
+    "${name}": {
+      "command": "npx",
+      "args": [
+        "mcp-remote",
+        "${mcpUrl}"
+      ]
+    }
+  }
+}`;
+
+  const cursorConfig = `{
+  "mcpServers": {
+    "${name}": {
+      "url": "${mcpUrl}"
+    }
+  }
+}`;
+
+  const chatgptConfig = mcpUrl;
+
+  const vscodeConfig = `{
+  "servers": {
+    "${name}": {
+      "command": "npx",
+      "args": [
+        "mcp-remote",
+        "${mcpUrl}"
+      ]
+    }
+  }
+}`;
+
+  const handleCopy = () => {
+    void navigator.clipboard.writeText(mcpUrl).then(() => {
+      setIsCopied(true);
+      setTimeout(() => setIsCopied(false), 2000);
+    });
+  };
+
+  return (
+    <Card className="p-6 mb-6 max-w-screen-md">
+      <div className="space-y-4">
+        <div>
+          <h3 className="text-lg font-semibold mb-2">MCP Endpoint</h3>
+          <p className="text-sm text-muted-foreground mb-3">
+            Copy the url to connect any{" "}
+            <a
+              href="https://modelcontextprotocol.io/"
+              target="_blank"
+              rel="noopener"
+              className="text-primary hover:underline"
+            >
+              MCP
+            </a>
+            -compatible AI tool
+          </p>
+
+          <div
+            className={cn(
+              "relative flex items-center gap-2 p-3 rounded-md border border-primary/50",
+            )}
+          >
+            <InlineCode className="bg-primary/20 px-4 py-2 flex-1 border-none">
+              {mcpUrl}
+            </InlineCode>
+            <Button
+              onClick={handleCopy}
+              variant="ghost"
+              size="icon"
+              className="h-8 w-8"
+            >
+              {isCopied ? (
+                <CheckIcon className="h-4 w-4 text-green-600" />
+              ) : (
+                <CopyIcon className="h-4 w-4" />
+              )}
+            </Button>
+          </div>
+        </div>
+
+        <div>
+          <h3 className="text-lg font-semibold mb-2">AI Tool Configuration</h3>
+          <p className="text-sm text-muted-foreground mb-3">
+            Choose your AI tool and copy the configuration to get started.
+          </p>
+
+          <hr className="my-4" />
+
+          <Tabs defaultValue="claude" className="w-full">
+            <TabsList className="grid w-full grid-cols-4">
+              <TabsTrigger value="claude">Claude</TabsTrigger>
+              <TabsTrigger value="chatgpt">ChatGPT</TabsTrigger>
+              <TabsTrigger value="cursor">Cursor</TabsTrigger>
+              <TabsTrigger value="vscode">VS Code</TabsTrigger>
+            </TabsList>
+
+            <Typography className="text-sm max-w-full">
+              <TabsContent value="claude" className="space-y-3">
+                <ol>
+                  <li>
+                    Open Claude Desktop and click <strong>Settings</strong> in
+                    the lower corner
+                  </li>
+                  <li>
+                    Navigate to <strong>Developer</strong> tab →{" "}
+                    <strong>Edit Config</strong>
+                  </li>
+                  <li>
+                    <span>Add this configuration to </span>
+                    <InlineCode>claude_desktop_config.json</InlineCode>:
+                    <SyntaxHighlight
+                      showLanguageIndicator
+                      title="claude_desktop_config.json"
+                      language="json"
+                      code={claudeConfig}
+                      className="mt-2"
+                    />
+                  </li>
+                  <li>
+                    Save the file and restart Claude Desktop. Look for the 🔨
+                    icon in the bottom-right corner.
+                  </li>
+                </ol>
+                <p className="text-xs text-muted-foreground mt-2">
+                  macOS: ~/Library/Application
+                  Support/Claude/claude_desktop_config.json
+                  <br />
+                  Windows: %APPDATA%\Claude\claude_desktop_config.json
+                </p>
+                <a
+                  href="https://docs.mcp.run/mcp-clients/claude-desktop/"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="inline-flex items-center gap-1 text-sm text-primary hover:underline"
+                >
+                  View official docs
+                  <ExternalLinkIcon className="h-3 w-3" />
+                </a>
+              </TabsContent>
+
+              <TabsContent value="chatgpt" className="space-y-3">
+                <Callout type="note" title="Requirements">
+                  ChatGPT Pro, Team, Enterprise, or Edu subscription. Note: MCP
+                  support is limited to read-only operations through Deep
+                  Research.
+                </Callout>
+                <ol>
+                  <li>
+                    Go to <strong>Settings</strong> →{" "}
+                    <strong>Connectors</strong> → <strong>Connect</strong>
+                  </li>
+                  <li>
+                    Click <strong>Custom</strong> and add your MCP URL:
+                    <InlineCode className="ml-2">{chatgptConfig}</InlineCode>
+                  </li>
+                  <li>Provide a name and description for your connector</li>
+                  <li>
+                    Save and enable the connector. Users must authenticate with
+                    the connector before first use.
+                  </li>
+                  <li>Access through Deep Research in your chat interface</li>
+                </ol>
+
+                <a
+                  href="https://help.openai.com/en/articles/11487775-connectors-in-chatgpt"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="inline-flex items-center gap-1 text-sm text-primary hover:underline"
+                >
+                  View official docs
+                  <ExternalLinkIcon className="h-3 w-3" />
+                </a>
+              </TabsContent>
+
+              <TabsContent value="cursor" className="space-y-3">
+                <ol>
+                  <li>
+                    <span>Create or edit: </span>
+                    <InlineCode>~/.cursor/mcp.json</InlineCode>
+                    <span> (global) or </span>
+                    <InlineCode>.cursor/mcp.json</InlineCode>
+                    <span> (project)</span>
+                    <SyntaxHighlight
+                      showLanguageIndicator
+                      title="mcp.json"
+                      language="json"
+                      code={cursorConfig}
+                      className="mt-2"
+                    />
+                  </li>
+                  <li>Restart Cursor to apply the configuration</li>
+                </ol>
+                <a
+                  href="https://docs.cursor.com/en/context/mcp"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="inline-flex items-center gap-1 text-sm text-primary hover:underline"
+                >
+                  View official docs
+                  <ExternalLinkIcon className="h-3 w-3" />
+                </a>
+              </TabsContent>
+
+              <TabsContent value="vscode" className="space-y-3">
+                <Callout type="note" title="Requirements">
+                  VS Code with GitHub Copilot extension
+                </Callout>
+
+                <ol>
+                  <li>
+                    <span>Create </span>
+                    <InlineCode>.vscode/mcp.json</InlineCode>
+                    <span> in your workspace (or user-level mcp.json):</span>
+                    <SyntaxHighlight
+                      showLanguageIndicator
+                      title="mcp.json"
+                      language="json"
+                      code={vscodeConfig}
+                      className="mt-2"
+                    />
+                  </li>
+                  <li>Restart VS Code to apply the configuration</li>
+                  <li>
+                    Use MCP tools in GitHub Copilot Chat by selecting Agent mode
+                  </li>
+                </ol>
+                <a
+                  href="https://code.visualstudio.com/docs/copilot/chat/mcp-servers"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="inline-flex items-center gap-1 text-sm text-primary hover:underline"
+                >
+                  View official docs
+                  <ExternalLinkIcon className="h-3 w-3" />
+                </a>
+              </TabsContent>
+            </Typography>
+          </Tabs>
+        </div>
+      </div>
+    </Card>
+  );
+};