[Docs][Content] - MCP installation instructions (#915)

Adds MCP installation instructions pages to docs: <img width="1156" height="851" alt="image" src="https://github.com/user-attachments/assets/ba3b1431-b3a5-403b-98ee-35afa8b93720" />  ## High-level PR Summary This PR adds MCP (Model Context Protocol) installation documentation to the Stack Auth docs. It creates a new page (`mcp-setup.mdx`) with instructions for setting up Stack Auth's MCP server in various development environments including Cursor, VS Code, Claude Code, Claude Desktop, Windsurf, ChatGPT, and Gemini CLI. The PR includes necessary supporting assets like SVG icons, a new button component, modifications to existing components, and updates to configuration files to properly register the new documentation page. ⏱️ Estimated Review Time: 15-30 minutes <details> <summary>💡 Review Order Suggestion</summary> | Order | File Path | |-------|-----------| | 1 | `docs/templates/others/mcp-setup.mdx` | | 2 | `docs/docs-platform.yml` | | 3 | `docs/src/components/icons.tsx` | | 4 | `docs/src/components/mdx/button.tsx` | | 5 | `docs/src/components/mdx/info.tsx` | | 6 | `docs/src/mdx-components.tsx` | | 7 | `docs/templates/meta.json` | | 8 | `docs/public/imgs/mcp.svg` | | 9 | `docs/public/imgs/vscode.svg` | | 10 | `docs/public/imgs/cursor.svg` | </details> [![Need help? Join our Discord](https://img.shields.io/badge/Need%20help%3F%20Join%20our%20Discord-5865F2?style=plastic&logo=discord&logoColor=white)](https://discord.gg/n3SsVDAW6U)   ---- > [!IMPORTANT] > Adds MCP installation instructions to documentation, introduces new components, and updates existing components for enhanced MDX support. > > - **Documentation**: > - Adds `mcp-setup.mdx` for MCP installation instructions in `docs/templates/others`. > - Updates `docs-platform.yml` and `meta.json` to include the new MCP setup page. > - **Components**: > - Adds `Button` component in `button.tsx` for MDX content. > - Updates `Info` component in `info.tsx` to include a size option for compact notices. > - Adds `StackAuthIcon` and `CursorIcon` to `icons.tsx` for MDX use. > - **MDX Components**: > - Exposes new `Button` and icons in `mdx-components.tsx`. > > <sup>This description was created by </sup>[<img alt="Ellipsis" src="https://img.shields.io/badge/Ellipsis-blue?color=175173">](https://www.ellipsis.dev?ref=stack-auth%2Fstack-auth&utm_source=github&utm_medium=referral)<sup> for d8ef95cdfb. You can [customize](https://app.ellipsis.dev/stack-auth/settings/summaries) this summary. It will automatically update as commits are pushed.</sup> ----   ## Summary by CodeRabbit * **New Features** * Added an MCP setup guide page available across Next, React, JS, and Python. * Introduced a reusable Button component for MDX content with link/button behavior. * Added a size option to Info components for compact notices. * New StackAuth and Cursor icons available for MDX use. * **Documentation** * Added the MCP setup template to docs and navigation/meta. * Exposed the new Button and icons in MDX component mappings.  --------- Co-authored-by: Konsti Wohlwend <n2d4xc@gmail.com>
2026-06-04 21:04:37 +08:00 · 2025-10-10 13:31:48 -05:00 · 2025-10-10 13:31:48 -05:00 · 3e301b025a
commit 3e301b025a
parent 5e8aa79d15
10 changed files with 400 additions and 7 deletions
--- a/docs/docs-platform.yml
+++ b/docs/docs-platform.yml
@ -273,6 +273,9 @@ pages:
  - path: others/self-host.mdx
    platforms: ["next", "react", "js", "python"] # All platforms

+  - path: others/mcp-setup.mdx
+    platforms: ["next", "react", "js", "python"] # All platforms
+
  - path: others/supabase.mdx
    platforms: ["next"] # Next only

--- a/docs/public/imgs/cursor.svg
+++ b/docs/public/imgs/cursor.svg
--- a/docs/public/imgs/mcp.svg
+++ b/docs/public/imgs/mcp.svg
@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="128" height="128" fill="none">
+    <path d="M3.49994 11.7501L11.6717 3.57855C12.7762 2.47398 14.5672 2.47398 15.6717 3.57855C16.7762 4.68312 16.7762 6.47398 15.6717 7.57855M15.6717 7.57855L9.49994 13.7501M15.6717 7.57855C16.7762 6.47398 18.5672 6.47398 19.6717 7.57855C20.7762 8.68312 20.7762 10.474 19.6717 11.5785L12.7072 18.543C12.3167 18.9335 12.3167 19.5667 12.7072 19.9572L13.9999 21.2499" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
+    <path d="M17.4999 9.74921L11.3282 15.921C10.2237 17.0255 8.43272 17.0255 7.32823 15.921C6.22373 14.8164 6.22373 13.0255 7.32823 11.921L13.4999 5.74939" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
+</svg>
--- a/docs/public/imgs/vscode.svg
+++ b/docs/public/imgs/vscode.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="800" height="800" preserveAspectRatio="xMidYMid" viewBox="0 -1 256 256"><defs><linearGradient id="c" x1="50.0000484%" x2="50.0000484%" y1="-3.9e-7%" y2="99.999921%"><stop offset="0%" stop-color="#FFF"/><stop offset="100%" stop-color="#FFF" stop-opacity="0"/></linearGradient><path id="a" d="M180.82764 252.605272c4.016311 1.564887 8.59642 1.46428 12.650584-.486102l52.500918-25.262319c5.516451-2.65463 9.024747-8.238817 9.024747-14.363891V41.1971845c0-6.1252732-3.508296-11.7085634-9.024747-14.3631938L193.478224 1.57068551c-5.320218-2.55994222-11.546895-1.93291555-16.215658 1.46166039-.667393.48492576-1.302911 1.02635082-1.898584 1.62302008L74.8565893 96.3498444 31.0778002 63.1181557c-4.0753805-3.0935159-9.7757136-2.8401058-13.5607284.6029448L3.47578059 76.4937075c-4.62980482 4.2115486-4.63511408 11.4951968-.01146521 15.713519L41.430759 126.844525 3.46431538 161.482221c-4.62364887 4.218521-4.61833961 11.50207.01146521 15.713619l14.04129121 12.772109c3.7850148 3.443548 9.4853479 3.69656 13.5607284.603642l43.7787891-33.232187 100.5073927 91.694817c1.58979 1.590786 3.456498 2.789105 5.463658 3.571051Zm10.464124-183.6493202-76.262101 57.8885732 76.262101 57.888871V68.9559518Z"/></defs><mask id="b" fill="#fff"><use xlink:href="#a"/></mask><path fill="#0065A9" d="M246.134784 26.873337 193.593025 1.57523773c-6.081245-2.92824355-13.349852-1.69304554-18.123206 3.07990911L3.46641717 161.482221c-4.62645789 4.218521-4.62113867 11.50207.01147518 15.713619l14.04978805 12.772109c3.7874054 3.443548 9.4912249 3.69656 13.5689961.603642L238.228667 33.4363005c6.948856-5.2716078 16.929868-.3153681 16.929868 8.4069603v-.6100172c0-6.1225836-3.5073-11.7038817-9.023751-14.3599066Z" mask="url(#b)"/><path fill="#007ACC" d="m246.134784 226.816011-52.541759 25.298179c-6.081245 2.927564-13.349852 1.692389-18.123206-3.079969L3.46641717 92.2070273c-4.62645789-4.2182226-4.62113867-11.50207.01147518-15.7135191l14.04978805-12.772607c3.7874054-3.4430506 9.4912249-3.6965603 13.5689961-.6029447L238.228667 220.252649c6.948856 5.271409 16.929868.315767 16.929868-8.407159v.610614c0 6.122086-3.5073 11.703284-9.023751 14.359907Z" mask="url(#b)"/><path fill="#1F9CF0" d="M193.428324 252.134497c-6.083238 2.925572-13.351845 1.689401-18.125199-3.083953 5.881028 5.881027 15.937743 1.715299 15.937743-6.60221V11.2729623c0-8.31753961-10.056715-12.48301323-15.937743-6.60160249 4.773354-4.77339792 12.041961-6.01033911 18.125199-3.08468047l52.532793 25.26333506c5.520436 2.6546304 9.030724 8.2379207 9.030724 14.3631938V212.509283c0 6.125074-3.510288 11.708265-9.030724 14.362895l-52.532793 25.262319Z" mask="url(#b)"/><path fill="url(#c)" fill-opacity=".25" d="M180.827889 252.605272c4.016311 1.563891 8.59642 1.46428 12.649587-.486102l52.500919-25.263315c5.517447-2.65463 9.025743-8.237821 9.025743-14.362895V41.1969853c0-6.1252732-3.508296-11.7085634-9.024747-14.3631938L193.477476 1.57052613c-5.319221-2.5599492-11.545898-1.93292252-16.215657 1.46165043-.666397.48492576-1.301915 1.02635082-1.898584 1.62302008L74.8565395 96.3496452 31.0777504 63.1179565c-4.0752809-3.093516-9.7757136-2.8400062-13.5607284.6029447L3.4757806 76.4935082c-4.62980483 4.2115487-4.63511409 11.4952965-.01146521 15.7136187L41.4308088 126.844525 3.46431539 161.482221c-4.62364888 4.218521-4.61833962 11.50207.01146521 15.713619l14.0412414 12.772109c3.7850148 3.443548 9.4854475 3.69656 13.5607284.603642l43.7787891-33.232187 100.5066955 91.694817c1.58979 1.590786 3.457494 2.789105 5.464654 3.571051Zm10.464124-183.6495194-76.262101 57.8887724 76.262101 57.888871V68.9557526Z" mask="url(#b)"/></svg>
--- a/docs/src/components/icons.tsx
+++ b/docs/src/components/icons.tsx
@ -345,3 +345,52 @@ export const Code = createLucideIcon('code', [
 export const Zap = createLucideIcon('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: 'za6gxh' }],
 ]);
+
+// Stack Auth Logo Component
+export const StackAuthIcon = forwardRef<SVGSVGElement, LucideProps>(
+  ({ className, size = 40, color = 'currentColor', ...props }, ref) => {
+    return (
+      <svg
+        ref={ref}
+        width={size}
+        height={size}
+        viewBox="0 0 200 242"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        className={cn('flex-shrink-0', className)}
+        {...props}
+      >
+        <path
+          d="M103.504 1.81227C101.251 0.68679 98.6002 0.687576 96.3483 1.81439L4.4201 47.8136C1.71103 49.1692 0 51.9387 0 54.968V130.55C0 133.581 1.7123 136.351 4.42292 137.706L96.4204 183.695C98.6725 184.82 101.323 184.82 103.575 183.694L168.422 151.271C173.742 148.611 180 152.479 180 158.426V168.879C180 171.91 178.288 174.68 175.578 176.035L103.577 212.036C101.325 213.162 98.6745 213.162 96.4224 212.036L11.5771 169.623C6.25791 166.964 0 170.832 0 176.779V187.073C0 190.107 1.71689 192.881 4.43309 194.234L96.5051 240.096C98.7529 241.216 101.396 241.215 103.643 240.094L195.571 194.235C198.285 192.881 200 190.109 200 187.076V119.512C200 113.565 193.741 109.697 188.422 112.356L131.578 140.778C126.258 143.438 120 139.57 120 133.623V123.17C120 120.14 121.712 117.37 124.422 116.014L195.578 80.4368C198.288 79.0817 200 76.3116 200 73.2814V54.9713C200 51.9402 198.287 49.1695 195.576 47.8148L103.504 1.81227Z"
+          fill={color}
+        />
+      </svg>
+    );
+  }
+);
+
+StackAuthIcon.displayName = 'StackAuthIcon';
+
+// Cursor Logo Component (actual Cursor logo)
+export const CursorIcon = forwardRef<SVGSVGElement, LucideProps>(
+  ({ className, size = 24, color = 'currentColor', ...props }, ref) => {
+    return (
+      <svg
+        ref={ref}
+        width={size}
+        height={size}
+        viewBox="0 0 24 24"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        className={cn('flex-shrink-0', className)}
+        {...props}
+      >
+        <path d="M12 2L2 7L12 12L22 7L12 2Z" fill={color}/>
+        <path d="M2 17L12 22L22 17" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+        <path d="M2 12L12 17L22 12" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+      </svg>
+    );
+  }
+);
+
+CursorIcon.displayName = 'CursorIcon';
--- a/docs/src/components/mdx/button.tsx
+++ b/docs/src/components/mdx/button.tsx
@ -0,0 +1,70 @@
+"use client";
+import * as React from "react";
+import { cn } from "../../lib/cn";
+import { buttonVariants } from "../ui/button";
+
+type BaseButtonProps = {
+  color?: 'primary' | 'secondary' | 'outline' | 'ghost',
+  size?: 'sm' | 'icon' | 'icon-sm',
+  icon?: React.ReactNode,
+  children: React.ReactNode,
+}
+
+type ButtonAsButton = BaseButtonProps &
+  React.ButtonHTMLAttributes<HTMLButtonElement> & {
+    href?: never,
+  };
+
+type ButtonAsLink = BaseButtonProps &
+  React.AnchorHTMLAttributes<HTMLAnchorElement> & {
+    href: string,
+  };
+
+type ButtonProps = ButtonAsButton | ButtonAsLink;
+
+export const Button = React.forwardRef<
+  HTMLButtonElement | HTMLAnchorElement,
+  ButtonProps
+>(({ className, color = 'secondary', size = 'sm', icon, href, children, ...props }, ref) => {
+  const buttonContent = (
+    <>
+      {icon && <span className="inline-flex items-center justify-center w-3.5 h-3.5">{icon}</span>}
+      {children}
+    </>
+  );
+
+  const buttonClasses = cn(
+    buttonVariants({
+      color,
+      size,
+      className: 'gap-2 no-underline hover:no-underline'
+    }),
+    className
+  );
+
+  if (href) {
+    return (
+      <a
+        role="button"
+        href={href}
+        className={buttonClasses}
+        ref={ref as React.Ref<HTMLAnchorElement>}
+        {...(props as React.AnchorHTMLAttributes<HTMLAnchorElement>)}
+      >
+        {buttonContent}
+      </a>
+    );
+  }
+
+  return (
+    <button
+      ref={ref as React.Ref<HTMLButtonElement>}
+      className={buttonClasses}
+      {...(props as React.ButtonHTMLAttributes<HTMLButtonElement>)}
+    >
+      {buttonContent}
+    </button>
+  );
+});
+
+Button.displayName = "Button";
--- a/docs/src/components/mdx/info.tsx
+++ b/docs/src/components/mdx/info.tsx
@ -6,9 +6,10 @@ import { cn } from '../../lib/cn';
 export type InfoProps = {
  children: React.ReactNode,
  type?: 'info' | 'warning' | 'success',
+  size?: 'default' | 'small',
 }

-export function Info({ children, type = 'info' }: InfoProps) {
+export function Info({ children, type = 'info', size = 'default' }: InfoProps) {
  const colorVariants = {
    info: {
      border: 'border-blue-400/30 dark:border-blue-400/20',
@ -32,28 +33,44 @@ export function Info({ children, type = 'info' }: InfoProps) {

  const colors = colorVariants[type];

+  const sizeVariants = {
+    default: {
+      container: 'my-6',
+      content: 'py-1 px-2',
+      icon: 'w-5 h-5 mr-3',
+    },
+    small: {
+      container: 'my-4',
+      content: 'py-0.5 px-1.5',
+      icon: 'w-4 h-4 mr-2',
+    }
+  };
+
+  const sizes = sizeVariants[size];
+
  return (
    <div className={cn(
-      'relative my-6 overflow-hidden rounded-lg',
+      'relative overflow-hidden rounded-lg',
      'border border-dashed',
      'shadow-sm',
+      sizes.container,
      colors.border,
      colors.bg
    )}>
-      <div className="flex items-baseline py-1 px-2">
-        <div className={cn("flex-shrink-0 mr-3", colors.icon)}>
+      <div className={cn("flex items-baseline", sizes.content)}>
+        <div className={cn("flex-shrink-0", colors.icon)}>
          {type === 'info' && (
-            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" className="w-5 h-5">
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" className={sizes.icon}>
              <path fillRule="evenodd" d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12zm8.706-1.442c1.146-.573 2.437.463 2.126 1.706l-.709 2.836.042-.02a.75.75 0 01.67 1.34l-.04.022c-1.147.573-2.438-.463-2.127-1.706l.71-2.836-.042.02a.75.75 0 11-.671-1.34l.041-.022zM12 9a.75.75 0 100-1.5.75.75 0 000 1.5z" clipRule="evenodd" />
            </svg>
          )}
          {type === 'warning' && (
-            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" className="w-5 h-5">
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" className={sizes.icon}>
              <path fillRule="evenodd" d="M9.401 3.003c1.155-2 4.043-2 5.197 0l7.355 12.748c1.154 2-.29 4.5-2.599 4.5H4.645c-2.309 0-3.752-2.5-2.598-4.5L9.4 3.003zM12 8.25a.75.75 0 01.75.75v3.75a.75.75 0 01-1.5 0V9a.75.75 0 01.75-.75zm0 8.25a.75.75 0 100-1.5.75.75 0 000 1.5z" clipRule="evenodd" />
            </svg>
          )}
          {type === 'success' && (
-            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" className="w-5 h-5">
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" className={sizes.icon}>
              <path fillRule="evenodd" d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12zm13.36-1.814a.75.75 0 10-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 00-1.06 1.06l2.25 2.25a.75.75 0 001.14-.094l3.75-5.25z" clipRule="evenodd" />
            </svg>
          )}
--- a/docs/src/mdx-components.tsx
+++ b/docs/src/mdx-components.tsx
@ -18,6 +18,8 @@ import { AsideSection, CollapsibleMethodSection, CollapsibleTypesSection, Method

 import { SDKOverview } from './components/sdk/overview';

+import { CursorIcon, StackAuthIcon } from './components/icons';
+import { Button } from './components/mdx/button';
 import { JWTViewer } from './components/mdx/jwt-viewer';
 import { Mermaid } from './components/mdx/mermaid';
 import { Accordion, AccordionGroup, ClickableTableOfContents, CodeBlocks, Icon, Markdown, ParamField } from './components/mdx/sdk-components';
@ -80,6 +82,11 @@ export function getMDXComponents(components?: MDXComponents): MDXComponents {
    CollapsibleTypesSection,
    SDKOverview,
    AppleSecretGenerator,
+    // Logo Icons
+    StackAuthIcon,
+    CursorIcon,
+    // UI Components
+    Button,
    JWTViewer
  } as MDXComponents;
 }
--- a/docs/templates/meta.json
+++ b/docs/templates/meta.json
@ -34,6 +34,7 @@
    "others/cli-authentication",
    "others/self-host",
    "others/supabase",
+    "others/mcp-setup",
    "others/convex",
    "sdk",
    "components"
--- a/docs/templates/others/mcp-setup.mdx
+++ b/docs/templates/others/mcp-setup.mdx
@ -0,0 +1,240 @@
+---
+title: MCP Setup
+---
+
+<div className="flex items-center justify-center gap-8 mb-8">
+  <StackAuthIcon size={128} />
+  <div className="text-3xl font-light text-fd-muted-foreground">+</div>
+  <img src="/imgs/mcp.svg" alt="MCP" width="128" height="128" className="flex-shrink-0 dark:invert" />
+</div>
+
+Set up Stack Auth's Model Context Protocol (MCP) server to get intelligent code assistance in your development environment.
+
+<Tabs defaultValue="cursor">
+  <TabsList>
+    <TabsTrigger value="cursor">Cursor</TabsTrigger>
+    <TabsTrigger value="vscode">VS Code</TabsTrigger>
+    <TabsTrigger value="claudecode">Claude Code</TabsTrigger>
+    <TabsTrigger value="claudedesktop">Claude Desktop</TabsTrigger>
+    <TabsTrigger value="windsurf">Windsurf</TabsTrigger>
+    <TabsTrigger value="chatgpt">ChatGPT</TabsTrigger>
+    <TabsTrigger value="gemini">Gemini CLI</TabsTrigger>
+  </TabsList>
+  
+  <TabsContent value="cursor">
+  Configure Stack Auth MCP in Cursor IDE for enhanced code assistance.
+
+  <Button href="cursor://anysphere.cursor-deeplink/mcp/install?name=stack-auth&config=eyJ1cmwiOiJodHRwczovL21jcC5zdGFjay1hdXRoLmNvbS8ifQ==" icon={<img src="/imgs/cursor.svg" alt="Cursor" width="14" height="14" className="w-full h-full object-contain" />}>Add to Cursor</Button>
+    
+  **Manual Installation**
+    
+  Add the following to your `mcp.json` file:
+    
+  ```json title="mcp.json"
+      {
+        "mcpServers": {
+          "stack-auth": {
+            "url": "https://mcp.stack-auth.com/"
+          }
+        }
+      }
+    ```
+  </TabsContent>
+  
+  <TabsContent value="vscode">
+    Configure Stack Auth MCP in VSCode IDE for enhanced code assistance.
+
+    <Button href="https://insiders.vscode.dev/redirect?url=vscode:mcp/install?%7B%22type%22%3A%22http%22%2C%22name%22%3A%22stack-auth%22%2C%22url%22%3A%22https%3A%2F%2Fmcp.stack-auth.com%2F%22%7D" icon={<img src="/imgs/vscode.svg" alt="VSCode" width="14" height="14" className="w-full h-full object-contain" />}>Add to VS Code</Button>
+
+    **Manual Installation**
+
+    Open a terminal and run the following command:
+
+    ```sh title="Terminal"
+      code --add-mcp '{"type":"http","name":"stack-auth","url":"https://mcp.stack-auth.com/"}'
+      ```
+
+    Then, from inside VS Code, open the .vscode/mcp.json file and click "Start server".
+
+  </TabsContent>
+
+  <TabsContent value="claudecode">
+    Open a terminal and run the following command:
+
+    ```sh title="Terminal"
+      claude mcp add --transport http stack-auth https://mcp.stack-auth.com/
+      ```
+
+    From within Claude Code, you can use the /mcp command to get more information about the server.
+  </TabsContent>
+
+  <TabsContent value="claudedesktop">
+    Open Claude Desktop and navigate to Settings > Connectors > Add Custom Connector.
+
+    Enter the name as stack-auth and the remote MCP server URL as https://mcp.stack-auth.com/.
+  </TabsContent>
+  
+  <TabsContent value="windsurf">
+  Copy the following JSON to your Windsurf MCP config file:
+
+  ```json title="mcp.json"
+      {
+        "mcpServers": {
+          "stack-auth": {
+            "serverUrl": "https://mcp.stack-auth.com/"
+          }
+        }
+      }
+    ```
+  </TabsContent>
+
+  <TabsContent value="chatgpt">
+   <Info>
+    In Team, Enterprise, and Edu workspaces, only workspace owners and admins have permission to set this.
+   </Info>
+    Navigate to **Settings > Connectors**
+    Add a custom connector with the server URL: `https://mcp.stack-auth.com`
+
+    After this, it should be visible in Composer > Deep research Tool.
+
+    <Info>
+    Connectors can only be used with **Deep Research**
+    </Info>
+  </TabsContent>
+  
+  <TabsContent value="gemini">
+  Add the following JSON to your Gemini CLI configuration file (~/.gemini/settings.json):
+
+  ```json title="settings.json"
+      {
+        "mcpServers": {
+          "stack-auth": {
+           "httpUrl": "https://mcp.stack-auth.com/",
+           "headers": {
+            "Accept": "application/json, text/event-stream"
+           }
+          }
+        }
+      }
+    ```
+  </TabsContent>
+
+</Tabs>
+
+
+## Markdown Instructions
+
+If you want to include instructions for all clients in your project's README.md file, feel free to copy the following markdown:
+
+<pre className="bg-fd-muted/30 p-4 rounded-lg overflow-x-auto"><code className="text-sm">{`<details name="mcp-install-instructions">
+<summary>Cursor</summary>
+
+#### Installation Link
+[![Add to Cursor](https://cursor.com/deeplink/mcp-install-dark.svg)](cursor://anysphere.cursor-deeplink/mcp/install?name=stack-auth&config=eyJ1cmwiOiJodHRwczovL21jcC5zdGFjay1hdXRoLmNvbS8ifQ==)
+
+#### Manual Installation
+Add the following to your \`mcp.json\` file:
+
+\`\`\`json
+{
+  "mcpServers": {
+    "stack-auth": {
+      "url": "https://mcp.stack-auth.com/"
+    }
+  }
+}
+\`\`\`
+</details>
+
+<details name="mcp-install-instructions">
+<summary>VSCode</summary>
+
+#### Installation Link
+[![Install in VS Code](https://img.shields.io/badge/VS_Code-Install_Server-0098FF?style=for-the-badge&logo=visual-studio-code&logoColor=white)](https://insiders.vscode.dev/redirect?url=vscode:mcp/install?%7B%22type%22%3A%22http%22%2C%22name%22%3A%22stack-auth%22%2C%22url%22%3A%22https%3A%2F%2Fmcp.stack-auth.com%2F%22%7D)
+
+#### Manual Installation
+Open a terminal and run the following command:
+
+\`\`\`
+code --add-mcp '{"type":"http","name":"stack-auth","url":"https://mcp.stack-auth.com/"}'
+\`\`\`
+
+Then, from inside VS Code, open the .vscode/mcp.json file and click "Start server".
+</details>
+
+<details name="mcp-install-instructions">
+<summary>Claude Code</summary>
+
+Open a terminal and run the following command:
+\`\`\`
+claude mcp add --transport http stack-auth https://mcp.stack-auth.com/
+\`\`\`
+From within Claude Code, you can use the \`/mcp\` command to get more information about the server.
+</details>
+
+<details name="mcp-install-instructions">
+<summary>Claude Desktop</summary>
+
+Open Claude Desktop and navigate to Settings > Connectors > Add Custom Connector.
+
+Enter the name as \`stack-auth\` and the remote MCP server URL as \`https://mcp.stack-auth.com/\`.
+</details>
+
+<details name="mcp-install-instructions">
+<summary>Windsurf</summary>
+
+Copy the following JSON to your Windsurf MCP config file:
+\`\`\`json
+{
+  "mcpServers": {
+    "stack-auth": {
+      "serverUrl": "https://mcp.stack-auth.com/"
+    }
+  }
+}
+\`\`\`
+</details>
+
+<details name="mcp-install-instructions">
+<summary>ChatGPT</summary>
+
+*Note: In Team, Enterprise, and Edu workspaces, only workspace owners and admins have permission*
+
+- Navigate to **Settings > Connectors**
+- Add a custom connector with the server URL: \`https://mcp.stack-auth.com/\`
+- It should then be visible in the Composer > Deep research tool
+- You may need to add the server as a source
+
+*Connectors can only be used with **Deep Research***
+</details>
+
+<details name="mcp-install-instructions">
+<summary>Gemini CLI</summary>
+
+Add the following JSON to your Gemini CLI configuration file (\`~/.gemini/settings.json\`):
+\`\`\`json
+{
+  "mcpServers": {
+    "stack-auth": {
+      "httpUrl": "https://mcp.stack-auth.com/",
+      "headers": {
+        "Accept": "application/json, text/event-stream"
+      }
+    }
+  }
+}
+\`\`\`
+</details>
+
+by [![Hypr MCP](https://hyprmcp.com/hyprmcp_20px.svg)](https://hyprmcp.com/)`}</code></pre>
+
+
+## Features
+
+The Stack Auth MCP server provides:
+
+- **Authentication Flow Assistance**: Get help implementing sign-in, sign-up, and user management
+- **API Documentation**: Access Stack Auth API documentation and examples
+- **Code Generation**: Generate boilerplate code for common authentication patterns
+- **Best Practices**: Receive guidance on security best practices and implementation patterns
+
				`@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="800" height="800" preserveAspectRatio="xMidYMid" viewBox="0 -1 256 256"><defs><linearGradient id="c" x1="50.0000484%" x2="50.0000484%" y1="-3.9e-7%" y2="99.999921%"><stop offset="0%" stop-color="#FFF"/><stop offset="100%" stop-color="#FFF" stop-opacity="0"/></linearGradient><path id="a" d="M180.82764 252.605272c4.016311 1.564887 8.59642 1.46428 12.650584-.486102l52.500918-25.262319c5.516451-2.65463 9.024747-8.238817 9.024747-14.363891V41.1971845c0-6.1252732-3.508296-11.7085634-9.024747-14.3631938L193.478224 1.57068551c-5.320218-2.55994222-11.546895-1.93291555-16.215658 1.46166039-.667393.48492576-1.302911 1.02635082-1.898584 1.62302008L74.8565893 96.3498444 31.0778002 63.1181557c-4.0753805-3.0935159-9.7757136-2.8401058-13.5607284.6029448L3.47578059 76.4937075c-4.62980482 4.2115486-4.63511408 11.4951968-.01146521 15.713519L41.430759 126.844525 3.46431538 161.482221c-4.62364887 4.218521-4.61833961 11.50207.01146521 15.713619l14.04129121 12.772109c3.7850148 3.443548 9.4853479 3.69656 13.5607284.603642l43.7787891-33.232187 100.5073927 91.694817c1.58979 1.590786 3.456498 2.789105 5.463658 3.571051Zm10.464124-183.6493202-76.262101 57.8885732 76.262101 57.888871V68.9559518Z"/></defs><mask id="b" fill="#fff"><use xlink:href="#a"/></mask><path fill="#0065A9" d="M246.134784 26.873337 193.593025 1.57523773c-6.081245-2.92824355-13.349852-1.69304554-18.123206 3.07990911L3.46641717 161.482221c-4.62645789 4.218521-4.62113867 11.50207.01147518 15.713619l14.04978805 12.772109c3.7874054 3.443548 9.4912249 3.69656 13.5689961.603642L238.228667 33.4363005c6.948856-5.2716078 16.929868-.3153681 16.929868 8.4069603v-.6100172c0-6.1225836-3.5073-11.7038817-9.023751-14.3599066Z" mask="url(#b)"/><path fill="#007ACC" d="m246.134784 226.816011-52.541759 25.298179c-6.081245 2.927564-13.349852 1.692389-18.123206-3.079969L3.46641717 92.2070273c-4.62645789-4.2182226-4.62113867-11.50207.01147518-15.7135191l14.04978805-12.772607c3.7874054-3.4430506 9.4912249-3.6965603 13.5689961-.6029447L238.228667 220.252649c6.948856 5.271409 16.929868.315767 16.929868-8.407159v.610614c0 6.122086-3.5073 11.703284-9.023751 14.359907Z" mask="url(#b)"/><path fill="#1F9CF0" d="M193.428324 252.134497c-6.083238 2.925572-13.351845 1.689401-18.125199-3.083953 5.881028 5.881027 15.937743 1.715299 15.937743-6.60221V11.2729623c0-8.31753961-10.056715-12.48301323-15.937743-6.60160249 4.773354-4.77339792 12.041961-6.01033911 18.125199-3.08468047l52.532793 25.26333506c5.520436 2.6546304 9.030724 8.2379207 9.030724 14.3631938V212.509283c0 6.125074-3.510288 11.708265-9.030724 14.362895l-52.532793 25.262319Z" mask="url(#b)"/><path fill="url(#c)" fill-opacity=".25" d="M180.827889 252.605272c4.016311 1.563891 8.59642 1.46428 12.649587-.486102l52.500919-25.263315c5.517447-2.65463 9.025743-8.237821 9.025743-14.362895V41.1969853c0-6.1252732-3.508296-11.7085634-9.024747-14.3631938L193.477476 1.57052613c-5.319221-2.5599492-11.545898-1.93292252-16.215657 1.46165043-.666397.48492576-1.301915 1.02635082-1.898584 1.62302008L74.8565395 96.3496452 31.0777504 63.1179565c-4.0752809-3.093516-9.7757136-2.8400062-13.5607284.6029447L3.4757806 76.4935082c-4.62980483 4.2115487-4.63511409 11.4952965-.01146521 15.7136187L41.4308088 126.844525 3.46431539 161.482221c-4.62364888 4.218521-4.61833962 11.50207.01146521 15.713619l14.0412414 12.772109c3.7850148 3.443548 9.4854475 3.69656 13.5607284.603642l43.7787891-33.232187 100.5066955 91.694817c1.58979 1.590786 3.457494 2.789105 5.464654 3.571051Zm10.464124-183.6495194-76.262101 57.8887724 76.262101 57.888871V68.9557526Z" mask="url(#b)"/></svg>