mirror of
https://github.com/mintlify/docs.git
synced 2026-09-14 13:35:46 +08:00
Patrick Foster
862b9010cc
* Banners can also be configured on a per-language * "Open in Grok" support in contextual-menu * Grok in keywords * Apply suggestion from @tembo[bot] Co-authored-by: tembo[bot] <208362400+tembo[bot]@users.noreply.github.com> --------- Co-authored-by: Ethan Palm <56270045+ethanpalm@users.noreply.github.com> Co-authored-by: tembo[bot] <208362400+tembo[bot]@users.noreply.github.com>
153 lines
4.8 KiB
Plaintext
153 lines
4.8 KiB
Plaintext
---
|
|
title: "Contextual menu"
|
|
description: "Add one-click AI integrations to your docs."
|
|
keywords: ["AI tools", "ChatGPT", "Claude", "Perplexity", "MCP", "Grok"]
|
|
---
|
|
|
|
import { PreviewButton } from "/snippets/previewbutton.jsx"
|
|
import IconsRequired from "/snippets/icons-required.mdx";
|
|
|
|
The contextual menu provides quick access to AI-optimized content and direct integrations with popular AI tools. When users select 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 of your choice with your documentation already loaded as context.
|
|
|
|
## Menu options
|
|
|
|
The contextual menu includes several pre-built options that you can enable by adding their identifier to your configuration.
|
|
|
|
| Option | Identifier | Description |
|
|
|:--------|:------------|:-------------|
|
|
| **Copy page** | `copy` | Copies the current page as Markdown for pasting as context into AI tools |
|
|
| **View as Markdown** | `view` | Opens the current page as Markdown |
|
|
| **Open in ChatGPT** | `chatgpt` | Creates a ChatGPT conversation with the current page as context |
|
|
| **Open in Claude** | `claude` | Creates a Claude conversation with the current page as context |
|
|
| **Open in Perplexity** | `perplexity` | Creates a Perplexity conversation with the current page as context |
|
|
| **Open in Grok** | `grok` | Creates a Grok conversation with the current page as context |
|
|
| **Copy MCP server URL** | `mcp` | Copies your MCP server URL to the clipboard |
|
|
| **Connect to Cursor** | `cursor` | Installs your hosted MCP server in Cursor |
|
|
| **Connect to VS Code** | `vscode` | Installs your hosted MCP server in VS Code |
|
|
| **Custom options** | Object | Add custom options to the contextual menu |
|
|
|
|
<Frame>
|
|
<img
|
|
src="/images/contextual-menu/contextual-menu.png"
|
|
alt="The expanded contextual menu showing the Copy page, View as Markdown, Open in ChatGPT, and Open in Claude menu items."
|
|
/>
|
|
</Frame>
|
|
|
|
## Enabling the contextual menu
|
|
|
|
Add the `contextual` field to your `docs.json` file and specify which options you want to include.
|
|
|
|
```json
|
|
{
|
|
"contextual": {
|
|
"options": [
|
|
"copy",
|
|
"view",
|
|
"chatgpt",
|
|
"claude",
|
|
"perplexity",
|
|
"grok",
|
|
"mcp",
|
|
"cursor",
|
|
"vscode"
|
|
]
|
|
}
|
|
}
|
|
```
|
|
|
|
## Adding custom options
|
|
|
|
Create custom options in the contextual menu by adding an object to the `options` array. Each custom option requires these properties:
|
|
|
|
<ResponseField name="title" type="string" required>
|
|
The title of the option.
|
|
</ResponseField>
|
|
|
|
<ResponseField name="description" type="string" required>
|
|
The description of the option. Displayed beneath the title when the contextual menu is expanded.
|
|
</ResponseField>
|
|
|
|
<IconsRequired />
|
|
|
|
<ResponseField name="href" type="string | object" required>
|
|
The href of the option. Use a string for simple links or an object for dynamic links with query parameters.
|
|
|
|
<Expandable title="href object">
|
|
<ResponseField name="base" type="string" required>
|
|
The base URL for the option.
|
|
</ResponseField>
|
|
|
|
<ResponseField name="query" type="object" required>
|
|
The query parameters for the option.
|
|
|
|
<Expandable title="query object">
|
|
<ResponseField name="key" type="string" required>
|
|
The query parameter key.
|
|
</ResponseField>
|
|
|
|
<ResponseField name="value" type="string" required>
|
|
The query parameter value. We will replace the following placeholders with the corresponding values:
|
|
- Use `$page` to insert the current page content in Markdown.
|
|
- Use `$path` to insert the current page path.
|
|
- Use `$mcp` to insert the hosted MCP server URL.
|
|
</ResponseField>
|
|
</Expandable>
|
|
</ResponseField>
|
|
</Expandable>
|
|
</ResponseField>
|
|
|
|
Example custom option:
|
|
|
|
```json {9-14} wrap
|
|
{
|
|
"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/orgs/mintlify/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/orgs/mintlify/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> |