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

# Menu contextuel

> Ajoutez un menu contextuel à votre documentation avec des intégrations d'IA en un clic pour ChatGPT, Claude, Perplexity, Cursor, MCP et plus encore.

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>;
};

Le menu contextuel offre un accès rapide à un objet optimisé par l’IA et à des intégrations directes avec des outils d’IA populaires. Lorsque les utilisateurs ouvrent le menu contextuel sur n’importe quelle page, ils peuvent copier l’objet comme context pour des outils d’IA ou lancer des conversations dans ChatGPT, Claude, Perplexity, Google AI Studio, Grok, Devin, Devin Desktop, ou un outil personnalisé de votre choix, avec votre documentation déjà chargée comme context.

<Tip>
  Associez le menu contextuel à votre fichier [`skill.md`](/fr/ai/skillmd) hébergé et à votre [serveur MCP](/fr/ai/model-context-protocol) afin que vos utilisateurs puissent installer dans leurs outils d’IA toutes les capacités de votre produit, et pas seulement la page qu’ils consultent.
</Tip>

<div id="menu-options">
  ## Options du menu
</div>

Le menu contextuel comprend plusieurs options prédéfinies que vous pouvez activer en ajoutant leur identifiant à votre configuration.

| Option                                    | Identifiant       | Description                                                                                                                                                                                   |
| :---------------------------------------- | :---------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Copier la page**                        | `copy`            | Copie la page actuelle en Markdown pour la coller comme contexte dans des outils d’IA                                                                                                         |
| **Afficher en Markdown**                  | `view`            | Ouvre la page actuelle en Markdown                                                                                                                                                            |
| **Demander à l’Assistant**                | `assistant`       | Ouvre l’[Assistant](/fr/assistant/index) avec la page actuelle comme contexte                                                                                                                 |
| **Télécharger le PDF**                    | `download-pdf`    | Télécharge la page actuelle au format PDF. Disponible avec les [offres Enterprise](https://mintlify.com/pricing).                                                                             |
| **Ouvrir dans ChatGPT**                   | `chatgpt`         | Crée une conversation ChatGPT avec la page actuelle comme contexte                                                                                                                            |
| **Ouvrir dans Claude**                    | `claude`          | Crée une conversation Claude avec la page actuelle comme contexte                                                                                                                             |
| **Ouvrir dans Perplexity**                | `perplexity`      | Crée une conversation Perplexity avec la page actuelle comme contexte                                                                                                                         |
| **Ouvrir dans Grok**                      | `grok`            | Crée une conversation Grok avec la page actuelle comme contexte                                                                                                                               |
| **Ouvrir dans Google AI Studio**          | `aistudio`        | Crée une conversation Google AI Studio avec la page actuelle comme contexte                                                                                                                   |
| **Ouvrir dans Devin**                     | `devin`           | Crée une session Devin avec la page actuelle comme contexte                                                                                                                                   |
| **Ouvrir dans Devin Desktop**             | `devin-desktop`   | Ouvre Devin Desktop avec la page actuelle comme contexte. Nécessite l'installation de Devin Desktop.                                                                                          |
| **Copier l’URL du serveur MCP**           | `mcp`             | Copie l’URL de votre serveur MCP dans le presse‑papiers                                                                                                                                       |
| **Copier la commande d’installation MCP** | `add-mcp`         | Copie la commande `npx add-mcp` pour installer le serveur MCP                                                                                                                                 |
| **Se connecter à Cursor**                 | `cursor`          | Installe votre serveur MCP hébergé dans Cursor                                                                                                                                                |
| **Se connecter à VS Code**                | `vscode`          | Installe votre serveur MCP hébergé dans VS Code                                                                                                                                               |
| **Se connecter à Devin**                  | `devin-mcp`       | Installe votre serveur MCP hébergé dans Devin                                                                                                                                                 |
| **Télécharger la spécification d'API**    | `downloadApiSpec` | Télécharge la spécification OpenAPI de votre déploiement. Si plusieurs spécifications sont configurées, les télécharge dans une archive zip. N'apparaît que sur les pages de référence d'API. |
| **Télécharger le PDF**                    | `download-pdf`    | Télécharge la page actuelle au format PDF                                                                                                                                                     |
| **Options personnalisées**                | Objet             | Ajoutez des options personnalisées au menu contextuel                                                                                                                                         |

<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="Le menu contextuel développé affichant les éléments Copier la page, Afficher en Markdown, Ouvrir dans ChatGPT et Ouvrir dans Claude." width="1396" height="944" data-path="images/contextual-menu/contextual-menu.png" />
</Frame>

<Note>
  L'option `downloadApiSpec` n'apparaît que sur les pages de référence d'API (pages dont le frontmatter déclare `api`, `openapi` ou `asyncapi`). Sur les déploiements avec authentification ou authentification utilisateur activée, seuls les lecteurs authentifiés peuvent télécharger la spécification.
</Note>

<div id="enabling-the-contextual-menu">
  ## Activer le menu contextuel
</div>

Ajoutez le champ `contextual` à votre fichier `docs.json` et indiquez les options que vous souhaitez inclure.

```json theme={null}
{
 "contextual": {
   "options": [
     "copy",
     "view",
     "assistant",
     "download-pdf",
     "chatgpt",
     "claude",
     "perplexity",
     "grok",
      "aistudio",
      "devin",
      "devin-desktop",
      "mcp",
      "cursor",
      "vscode",
      "devin-mcp",
      "downloadApiSpec",
      "download-pdf"
    ]
 }
}
```

<div id="display-location">
  ## Emplacement d’affichage
</div>

Par défaut, le menu contextuel apparaît dans l’en-tête de la page. Vous pouvez le configurer pour qu’il s’affiche à la place dans la barre latérale de la table des matières à l’aide de l’option `display`.

```json theme={null}
{
  "contextual": {
    "options": ["copy", "view", "chatgpt", "claude"],
    "display": "toc"
  }
}
```

| Valeur   | Description                                                                 |
| :------- | :-------------------------------------------------------------------------- |
| `header` | Affiche les options dans le menu contextuel en haut de la page (par défaut) |
| `toc`    | Affiche les options dans la barre latérale de la table des matières         |

<div id="adding-custom-options">
  ## Ajout d’options personnalisées
</div>

Créez des options personnalisées dans le menu contextuel en ajoutant un objet au tableau `options`. Chaque option personnalisée requiert les propriétés suivantes :

<ResponseField name="title" type="string" required>
  Le titre de l’option.
</ResponseField>

<ResponseField name="description" type="string" required>
  La description de l’option. Affichée sous le titre lorsque le menu contextuel se déroule.
</ResponseField>

<ResponseField name="icon" type="string" required>
  Icône à afficher.

  Options :

  * Nom d’icône [Font Awesome](https://fontawesome.com/icons) si vous avez la [propriété](/fr/organize/settings#param-icons) `icons.library` définie sur `fontawesome` dans votre `docs.json`
  * Nom d’icône [Lucide](https://lucide.dev/icons) si vous avez la [propriété](/fr/organize/settings#param-icons) `icons.library` définie sur `lucide` dans votre `docs.json`
  * Nom d’icône [Tabler](https://tabler.io/icons) si vous avez la [propriété](/fr/organize/settings#param-icons) `icons.library` définie sur `tabler` dans votre `docs.json`
  * URL vers une icône hébergée en externe
  * Chemin vers un fichier d’icône dans votre projet
</ResponseField>

<ResponseField name="iconType" type="string">
  Style d’icône [Font Awesome](https://fontawesome.com/icons). Utilisé uniquement avec les icônes Font Awesome.

  Options : `regular`, `solid`, `light`, `thin`, `sharp-solid`, `duotone`, `brands`.
</ResponseField>

<ResponseField name="href" type="string | object" required>
  Le href de l’option. Utilisez une chaîne pour des liens simples ou un objet pour des liens dynamiques avec des paramètres de requête.

  <Expandable title="href object">
    <ResponseField name="base" type="string" required>
      L’URL de base de l’option.
    </ResponseField>

    <ResponseField name="query" type="object" required>
      Les paramètres de requête de l’option.

      <Expandable title="query object">
        <ResponseField name="key" type="string" required>
          La key du paramètre de requête.
        </ResponseField>

        <ResponseField name="value" type="string" required>
          La valeur du paramètre de requête. Mintlify remplace les espaces réservés suivants par les valeurs correspondantes :

          * Utilisez `$page` pour insérer le contenu de la page actuelle en Markdown.
          * Utilisez `$path` pour insérer le chemin de la page actuelle.
          * Utilisez `$mcp` pour insérer l’URL du serveur MCP hébergé.
        </ResponseField>
      </Expandable>
    </ResponseField>
  </Expandable>
</ResponseField>

Exemple d’option personnalisée :

```json {9-14} wrap theme={null}
{
    "contextual": {
        "options": [
            "copy",
            "view",
            "chatgpt",
            "claude",
            "perplexity",
            {
                "title": "Demander une fonctionnalité",
                "description": "Rejoignez la discussion sur GitHub pour demander une nouvelle fonctionnalité",
                "icon": "plus",
                "href": "https://github.com/orgs/mintlify/discussions/categories/feature-requests"
            }
        ]
    }
}
```

<div id="custom-option-examples">
  ### Exemples d’options personnalisées
</div>

<AccordionGroup>
  <Accordion title="Lien simple">
    ```json theme={null}
    {
      "title": "Demander une fonctionnalité",
      "description": "Rejoindre la discussion sur GitHub",
      "icon": "plus",
      "href": "https://github.com/orgs/mintlify/discussions/categories/feature-requests"
    }
    ```
  </Accordion>

  <Accordion title="Lien dynamique avec le contenu de la page">
    ```json theme={null}
    {
      "title": "Partager sur X",
      "description": "Partager cette page sur X",
      "icon": "x",
      "href": {
        "base": "https://x.com/intent/tweet",
        "query": [
          {
          "key": "text",
          "value": "Découvrez cette documentation : $page"
          }
        ]
      }
    }
    ```
  </Accordion>
</AccordionGroup>


## Related topics

- [Configurations](/fr/editor/configurations.md)
- [Serveur Search Model Context Protocol (MCP)](/fr/ai/model-context-protocol.md)
- [Intégrations Analytics](/fr/integrations/analytics/overview.md)