​
Contextual menu

Add one-click AI integrations to your docs 
export const PreviewButton = ({ children, href }: { children: React.ReactNode; href: string }) => {
  return (
    <a
      href={href}
      className="text-sm font-medium text-white dark:!text-zinc-950 bg-zinc-900 hover:bg-zinc-700 dark:bg-zinc-100 hover:dark:bg-zinc-300 rounded-full px-3.5 py-1.5 not-prose"
    >
      {children}
    </a>
  );
};
The contextual menu provides quick access to AI-optimized content and direct integrations with popular AI tools. When users open the contextual menu on any page, they can copy content as context for AI tools or open conversations in ChatGPT, Claude, Perplexity, or a custom tool with your documentation loaded as context. Enable any of the built-in options by adding their identifier to your configuration.
OptionIdentifierDescription
Copy pagecopyCopies the current page as Markdown for AI tools
View as MarkdownviewOpens the current page as Markdown
Open in ChatGPTchatgptStarts a ChatGPT conversation with this page as context
Open in ClaudeclaudeStarts a Claude conversation with this page as context
Open in PerplexityperplexityStarts a Perplexity conversation with this page as context
Copy MCP server URLmcpCopies your MCP server URL
Connect to CursorcursorInstalls your hosted MCP server in Cursor
Connect to VS CodevscodeInstalls your hosted MCP server in VS Code
Contextual menu showing AI actions

​
Enabling the contextual menu

Add the contextual field to your docs.json file and include the options you want: 
{
  "contextual": {
    "options": ["copy", "view", "chatgpt", "claude", "perplexity", "mcp", "cursor", "vscode"]
  }
}

​
Adding custom options

Create custom options by adding an object to the options array. Each custom option supports:
​
title
string
required
The title of the option.
​
description
string
required
The description shown when the contextual menu expands.
​
icon
string
required
The icon to display. Options: Font Awesome name, Lucide name, JSX-compatible SVG in {} braces, URL, or local path.
​
iconType
string
Font Awesome style if using FA icons. One of: regular, solid, light, thin, sharp-solid, duotone, brands.
​
href
string | object
required
The target link. Use a string for simple links or an object for dynamic links with query params.

​
href object

​
base
string
required
The base URL for the option.
​
query
object
required
The query parameters to append to the base URL. Use these placeholders in value: - $page: current page content in Markdown - $path: current page path - $mcp: hosted MCP server URL

​
Example custom option

{
  "contextual": {
    "options": [
      "copy",
      "view",
      "chatgpt",
      "claude",
      "perplexity",
      {
        "title": "Request a feature",
        "description": "Join the discussion on GitHub to request a new feature",
        "icon": "plus",
        "href": "https://github.com/TypeTenzinHoTT/FrodoFinal/discussions/categories/feature-requests"
      }
    ]
  }
}

​
Custom option examples

{
  "title": "Share on X",
  "description": "Share this page on X",
  "icon": "x",
  "href": {
    "base": "https://x.com/intent/tweet",
    "query": [
      { "key": "text", "value": "Check out this documentation: $page" }
    ]
  }
}