> ## Documentation Index
> Fetch the complete documentation index at: https://wiki.another-horizon.eu/llms.txt
> Use this file to discover all available pages before exploring further.
# Menu contextuel
> Ajoutez des intégrations d’IA en un clic à votre documentation.
export const PreviewButton = ({children, href}) => {
return
{children}
;
};
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, ou un outil personnalisé de votre choix, avec votre documentation déjà chargée comme context.
## Options du menu
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 |
| **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 |
| **Options personnalisées** | Objet | Ajoutez des options personnalisées au menu contextuel |
## Activer le menu contextuel
Ajoutez le champ `contextual` à votre fichier `docs.json` et indiquez les options que vous souhaitez inclure.
```json theme={null}
{
"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 requiert les propriétés suivantes :
Le titre de l’option.
La description de l’option. Affichée sous le titre lorsque le menu contextuel est déroulé.
L’icône à afficher.
Options :
* Nom d’[icône Font Awesome](https://fontawesome.com/icons)
* Nom d’[icône Lucide](https://lucide.dev/icons)
* Code SVG compatible JSX, entouré d’accolades
* URL d’une icône hébergée en externe
* Chemin vers un fichier d’icône dans votre projet
Pour des 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 `` depuis le champ de sortie JSX.
4. Enveloppez le code SVG compatible JSX dans des accolades : `icon={}`.
5. Ajustez `height` et `width` si nécessaire.
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`.
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.
L’URL de base de l’option.
Les paramètres de requête de l’option.
La key du paramètre de requête.
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 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é.
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"
}
]
}
}
```
### Exemples d’options personnalisées
```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"
}
```
```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"
}
]
}
}
```
Ajoutez le champ `contextual` à votre fichier `docs.json` et indiquez les options que vous souhaitez inclure.
```json theme={null}
{
"contextual": {
"options": [
"copier",
"afficher",
"chatgpt",
"claude",
"perplexity",
"mcp",
"cursor",
"vscode"
]
}
}
```