> ## 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.

# Menu contextuel

> Ajoutez des intégrations IA en un clic à votre documentation

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 à du contenu optimisé pour 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 le contenu pour l’utiliser comme contexte dans des outils d’IA, ou lancer des conversations dans ChatGPT, Claude, Perplexity, ou un outil personnalisé de votre choix, avec votre documentation déjà chargée comme contexte.

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

Le menu contextuel propose 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 au format Markdown pour la coller comme contexte dans des outils d’IA |
| **Afficher en Markdown**        | `view`       | Ouvre la page actuelle au format Markdown                                                    |
| **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                        |
| **Copier l’URL du serveur MCP** | `mcp`        | Copie l’URL de votre serveur MCP dans le presse-papiers                                      |
| **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                                              |

<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="Le menu contextuel déroulé 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>

<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
{
 "contextual": {
   "options": [
     "copier",
     "afficher",
     "chatgpt",
     "claude",
     "perplexity",
     "mcp",
     "cursor",
     "vscode"
   ]
 }
}
```

<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 nécessite 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 est développé.
</ResponseField>

<ResponseField name="icon" type="string" required>
  L’icône à afficher.

  Options :

  * Nom de l’[icône Font Awesome](https://fontawesome.com/icons)
  * Nom de l’[icône Lucide](https://lucide.dev/icons)
  * Code SVG compatible JSX entre accolades
  * URL d’une icône hébergée en externe
  * Chemin vers un fichier d’icône dans votre projet

  Pour les icônes SVG personnalisées :

  1. Convertissez votre SVG avec le [convertisseur SVGR](https://react-svgr.com/playground/).
  2. Collez votre code SVG dans le champ de saisie SVG.
  3. Copiez l’élément complet `<svg>...</svg>` depuis le champ de sortie JSX.
  4. Entourez le code SVG compatible JSX d’accolades : `icon={<svg ...> ... </svg>}`.
  5. Ajustez `height` et `width` si nécessaire.
</ResponseField>

<ResponseField name="iconType" type="string">
  Le 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 les liens simples ou un objet pour les 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 clé du paramètre de requête.
        </ResponseField>

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

          * Utilisez `$page` pour insérer le contenu de la page en cours au format Markdown.
          * Utilisez `$path` pour insérer le chemin de la page en cours.
          * 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
{
    "contextual": {
        "options": [
            "copy",
            "view",
            "chatgpt",
            "claude",
            "perplexity",
            {
                "title": "Demander une fonctionnalité",
                "description": "Participez à la discussion sur GitHub pour proposer 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
    {
      "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 contenu de page">
    ```json
    {
      "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>