Menu contextuel

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

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.

​

Options du menu

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

​

Activer le menu contextuel

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

{
 "contextual": {
   "options": [
     "copier",
     "afficher",
     "chatgpt",
     "claude",
     "perplexity",
     "mcp",
     "cursor",
     "vscode"
   ]
 }
}

​

Ajout d’options personnalisées

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 :

title · string · requis

Le titre de l’option.

description · string · requis

La description de l’option. Affichée sous le titre lorsque le menu contextuel est développé.

icon · string · requis

L’icône à afficher.

Options :

• Nom de l’icône Font Awesome
• Nom de l’icône Lucide
• 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.
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.

iconType · string

Le style d’icône Font Awesome. Utilisé uniquement avec les icônes Font Awesome.

Options : regular, solid, light, thin, sharp-solid, duotone, brands.

href · string | object · requis

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.

Afficher href object

base · string · requis

L’URL de base de l’option.

query · object · requis

Les paramètres de requête de l’option.

Afficher query object

key · string · requis

La clé du paramètre de requête.

value · string · requis

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

Exemple d’option personnalisée :

{
    "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"
            }
        ]
    }
}

​

Exemples d’options personnalisées

Lien simple

{
  "title": "Demander une fonctionnalité",
  "description": "Rejoindre la discussion sur GitHub",
  "icon": "plus",
  "href": "https://github.com/orgs/mintlify/discussions/categories/feature-requests"
}

Lien dynamique avec contenu de page

{
  "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"
      }
    ]
  }
}