> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify-mintlify-add-hello-world-quickstart-48843.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# 上下文菜单

> 为你的文档添加一键 AI 集成

export const PreviewButton = ({children, href}) => {
  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>;
};

上下文菜单可快速访问经AI优化的内容，并直接对接主流AI工具。用户在任意页面打开上下文菜单时，可以将内容复制为AI工具的上下文，或在 ChatGPT、Claude、Perplexity，或你自定义的工具中发起对话，并自动将你的文档作为上下文加载。

<div id="menu-options">
  ## 菜单选项
</div>

上下文菜单包含多个内置选项，你可以在配置中添加对应的标识符来启用。

| 选项                   | 标识符          | 描述                                  |
| :------------------- | :----------- | :---------------------------------- |
| **复制页面**             | `copy`       | 将当前页面复制为 Markdown，便于作为上下文粘贴到 AI 工具中 |
| **以 Markdown 查看**    | `view`       | 以 Markdown 形式打开当前页面                 |
| **在 ChatGPT 中打开**    | `chatgpt`    | 以当前页面为上下文创建一个 ChatGPT 对话            |
| **在 Claude 中打开**     | `claude`     | 以当前页面为上下文创建一个 Claude 对话             |
| **在 Perplexity 中打开** | `perplexity` | 以当前页面为上下文创建一个 Perplexity 对话         |
| **复制 MCP 服务器 URL**   | `mcp`        | 将你的 MCP 服务器 URL 复制到剪贴板              |
| **连接到 Cursor**       | `cursor`     | 在 Cursor 中安装你托管的 MCP 服务器            |
| **连接到 VS Code**      | `vscode`     | 在 VS Code 中安装你托管的 MCP 服务器           |

<Frame>
  <img src="https://mintcdn.com/mintlify-mintlify-add-hello-world-quickstart-48843/FYO7l_4g6ReiCSAk/images/contextual-menu/contextual-menu.png?fit=max&auto=format&n=FYO7l_4g6ReiCSAk&q=85&s=89864bdef54fb5ab69e2b165ed30ab8e" alt="展开的上下文菜单，显示“复制页面”、“以 Markdown 查看”、“在 ChatGPT 中打开”和“在 Claude 中打开”等菜单项。" width="1396" height="944" data-path="images/contextual-menu/contextual-menu.png" />
</Frame>

<div id="enabling-the-contextual-menu">
  ## 启用上下文菜单
</div>

在你的 `docs.json` 文件中添加 `contextual` 字段，并指定要包含的选项。

```json
{
 "contextual": {
   "options": [
     "复制",
     "查看",
     "ChatGPT",
     "Claude",
     "Perplexity",
     "MCP",
     "Cursor",
     "VS Code"
   ]
 }
}
```

<div id="adding-custom-options">
  ## 添加自定义选项
</div>

通过向 `options` 数组添加一个对象，可在上下文菜单中创建自定义选项。每个自定义选项需要包含以下属性：

<ResponseField name="title" type="string" required>
  选项标题。
</ResponseField>

<ResponseField name="description" type="string" required>
  选项描述。展开上下文菜单时显示在标题下方。
</ResponseField>

<ResponseField name="icon" type="string" required>
  要显示的图标。

  可选值：

  * [Font Awesome 图标](https://fontawesome.com/icons) 的名称
  * [Lucide 图标](https://lucide.dev/icons) 的名称
  * 用花括号包裹的、可用于 JSX 的 SVG 代码
  * 指向外部托管图标的 URL
  * 项目中图标文件的路径

  关于自定义 SVG 图标：

  1. 使用 [SVGR 转换器](https://react-svgr.com/playground/) 将 SVG 转换。
  2. 将你的 SVG 代码粘贴到 SVG 输入框中。
  3. 从 JSX 输出框中复制完整的 `<svg>...</svg>` 元素。
  4. 用花括号包裹可用于 JSX 的 SVG 代码：`icon={<svg ...> ... </svg>}`。
  5. 按需调整 `height` 和 `width`。
</ResponseField>

<ResponseField name="iconType" type="string">
  [Font Awesome](https://fontawesome.com/icons) 的图标样式。仅在使用 Font Awesome 图标时生效。

  可选值：`regular`、`solid`、`light`、`thin`、`sharp-solid`、`duotone`、`brands`。
</ResponseField>

<ResponseField name="href" type="string | object" required>
  选项的 href。简单链接使用字符串，带查询参数的动态链接使用对象。

  <Expandable title="href object">
    <ResponseField name="base" type="string" required>
      该选项的基础 URL。
    </ResponseField>

    <ResponseField name="query" type="object" required>
      该选项的查询参数。

      <Expandable title="query object">
        <ResponseField name="key" type="string" required>
          查询参数的键。
        </ResponseField>

        <ResponseField name="value" type="string" required>
          查询参数的值。我们会将以下占位符替换为对应的值：

          * 使用 `$page` 插入当前页面的 Markdown 内容。
          * 使用 `$path` 插入当前页面路径。
          * 使用 `$mcp` 插入托管的 MCP 服务器 URL。
        </ResponseField>
      </Expandable>
    </ResponseField>
  </Expandable>
</ResponseField>

自定义选项示例：

```json {9-14} wrap
{
    "contextual": {
        "options": [
            "copy",
            "view",
            "chatgpt",
            "claude",
            "perplexity",
            {
                "title": "功能需求",
                "description": "前往 GitHub 参与讨论并提交新功能请求",
                "icon": "plus"
                "href": "https://github.com/orgs/mintlify/discussions/categories/feature-requests"
            }
        ]
    }
}
```

<div id="custom-option-examples">
  ### 自定义选项示例
</div>

<AccordionGroup>
  <Accordion title="简单链接">
    ```json
    {
      "title": "请求新功能",
      "description": "在 GitHub 上参与讨论",
      "icon": "plus",
      "href": "https://github.com/orgs/mintlify/discussions/categories/feature-requests"
    }
    ```
  </Accordion>

  <Accordion title="包含页面内容的动态链接">
    ```json
    {
      "title": "在 X 上分享",
      "description": "将此页面分享到 X",
      "icon": "x",
      "href": {
        "base": "https://x.com/intent/tweet",
        "query": [
          {
          "key": "text",
          "value": "查看这份文档：$page"
          }
        ]
      }
    }
    ```
  </Accordion>
</AccordionGroup>