> ## Documentation Index
> Fetch the complete documentation index at: https://docs.chromaflow.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Contextual Menu

> Add one-click AI integrations to your docs and share page context to AI tools.

# Contextual menu

> Add one-click AI integrations to your docs

```tsx
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.

## Menu options

Enable any of the built-in options by adding their identifier to your configuration.

| Option                  | Identifier   | Description                                                |
| :---------------------- | :----------- | :--------------------------------------------------------- |
| **Copy page**           | `copy`       | Copies the current page as Markdown for AI tools           |
| **View as Markdown**    | `view`       | Opens the current page as Markdown                         |
| **Open in ChatGPT**     | `chatgpt`    | Starts a ChatGPT conversation with this page as context    |
| **Open in Claude**      | `claude`     | Starts a Claude conversation with this page as context     |
| **Open in Perplexity**  | `perplexity` | Starts a Perplexity conversation with this page as context |
| **Copy MCP server URL** | `mcp`        | Copies your MCP server URL                                 |
| **Connect to Cursor**   | `cursor`     | Installs your hosted MCP server in Cursor                  |
| **Connect to VS Code**  | `vscode`     | Installs your hosted MCP server in VS Code                 |

<Frame>
  <img src="https://mintcdn.com/mintlify/GiucHIlvP3i5L17o/images/contextual-menu/contextual-menu.png?fit=max&auto=format&n=GiucHIlvP3i5L17o&q=85&s=b37c2bfffdc0db86422a7f7e692adaf7" alt="Contextual menu showing AI actions" width="1396" height="944" />
</Frame>

## Enabling the contextual menu

Add the `contextual` field to your `docs.json` file and include the options you want:

```json
{
  "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:

<ResponseField name="title" type="string" required>
  The title of the option.
</ResponseField>

<ResponseField name="description" type="string" required>
  The description shown when the contextual menu expands.
</ResponseField>

<ResponseField name="icon" type="string" required>
  The icon to display. Options: Font Awesome name, Lucide name, JSX-compatible SVG in `{}` braces, URL, or local path.
</ResponseField>

<ResponseField name="iconType" type="string">
  Font Awesome style if using FA icons. One of: `regular`, `solid`, `light`, `thin`, `sharp-solid`, `duotone`, `brands`.
</ResponseField>

<ResponseField name="href" type="string | object" required>
  The target link. Use a string for simple links or an object for dynamic links with query params.
</ResponseField>

### href object

<ResponseField name="base" type="string" required>
  The base URL for the option.
</ResponseField>

<ResponseField name="query" type="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
</ResponseField>

### Example custom option

```json
{
  "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

<AccordionGroup>
  <Accordion title="Simple link">
    ```json
    {
      "title": "Request a feature",
      "description": "Join the discussion on GitHub",
      "icon": "plus",
      "href": "https://github.com/TypeTenzinHoTT/FrodoFinal/discussions/categories/feature-requests"
    }
    ```
  </Accordion>

  <Accordion title="Dynamic link with page content">
    ```json
    {
      "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" }
        ]
      }
    }
    ```
  </Accordion>
</AccordionGroup>