> ## 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.
# Menú contextual
> Agrega integraciones de IA con un clic a tu documentación.
export const PreviewButton = ({children, href}) => {
return
{children}
;
};
El menú contextual ofrece acceso rápido a contenido optimizado con IA e integraciones directas con herramientas de IA populares. Cuando los usuarios seleccionan el menú contextual en cualquier página, pueden copiar contenido como contexto para herramientas de IA o abrir conversaciones en ChatGPT, Claude, Perplexity o una herramienta personalizada de su elección, con su documentación ya cargada como contexto.
## Opciones del menú
El menú contextual incluye varias opciones preconfiguradas que puedes habilitar agregando su identificador a tu configuración.
| Opción | Identificador | Descripción |
| :------------------------------ | :------------ | :------------------------------------------------------------------------------------ |
| **Copiar página** | `copy` | Copia la página actual como Markdown para pegarla como contexto en herramientas de IA |
| **Ver como Markdown** | `view` | Abre la página actual como Markdown |
| **Abrir en ChatGPT** | `chatgpt` | Crea una conversación en ChatGPT con la página actual como contexto |
| **Abrir en Claude** | `claude` | Crea una conversación en Claude con la página actual como contexto |
| **Abrir en Perplexity** | `perplexity` | Crea una conversación en Perplexity con la página actual como contexto |
| **Copiar URL del servidor MCP** | `mcp` | Copia la URL de tu servidor MCP al portapapeles |
| **Conectar con Cursor** | `cursor` | Instala tu servidor MCP alojado en Cursor |
| **Conectar con VS Code** | `vscode` | Instala tu servidor MCP alojado en VS Code |
| **Opciones personalizadas** | Object | Agrega opciones personalizadas al menú contextual |
## Activar el menú contextual
Añade el campo `contextual` a tu archivo `docs.json` y especifica qué opciones quieres incluir.
```json theme={null}
{
"contextual": {
"options": [
"copy",
"view",
"chatgpt",
"claude",
"perplexity",
"mcp",
"cursor",
"vscode"
]
}
}
```
## Agregar opciones personalizadas
Crea opciones personalizadas en el menú contextual agregando un objeto al arreglo `options`. Cada opción personalizada requiere estas propiedades:
El título de la opción.
La descripción de la opción. Se muestra debajo del título cuando se expande el menú contextual.
El icono que se mostrará.
Opciones:
* Nombre de [icono de Font Awesome](https://fontawesome.com/icons)
* Nombre de [icono de Lucide](https://lucide.dev/icons)
* Código SVG compatible con JSX envuelto entre llaves
* URL a un icono alojado externamente
* Ruta a un archivo de icono en tu proyecto
Para iconos SVG personalizados:
1. Convierte tu SVG usando el [convertidor SVGR](https://react-svgr.com/playground/).
2. Pega tu código SVG en el campo de entrada de SVG.
3. Copia el elemento completo `` del campo de salida de JSX.
4. Envuelve el código SVG compatible con JSX entre llaves: `icon={}`.
5. Ajusta `height` y `width` según sea necesario.
El estilo de icono de [Font Awesome](https://fontawesome.com/icons). Solo se usa con iconos de Font Awesome.
Opciones: `regular`, `solid`, `light`, `thin`, `sharp-solid`, `duotone`, `brands`.
El href de la opción. Usa una cadena para enlaces simples o un objeto para enlaces dinámicos con parámetros de búsqueda.
La URL base de la opción.
Los parámetros de búsqueda de la opción.
La key del parámetro de búsqueda.
El value del parámetro de búsqueda. Reemplazaremos los siguientes marcadores de posición por los valores correspondientes:
* Usa `$page` para insertar el contenido de la página actual en Markdown.
* Usa `$path` para insertar la ruta de la página actual.
* Usa `$mcp` para insertar la URL del servidor MCP alojado.
Ejemplo de opción personalizada:
```json {9-14} wrap theme={null}
{
"contextual": {
"options": [
"copy",
"view",
"chatgpt",
"claude",
"perplexity",
{
"title": "Solicitar una funcionalidad",
"description": "Únete a la discusión en GitHub para solicitar una nueva funcionalidad",
"icon": "plus",
"href": "https://github.com/orgs/mintlify/discussions/categories/feature-requests"
}
]
}
}
```
### Ejemplos de opciones personalizadas
```json theme={null}
{
"title": "Solicitar una función",
"description": "Únete a la conversación en GitHub",
"icon": "plus",
"href": "https://github.com/orgs/mintlify/discussions/categories/feature-requests"
}
```
```json theme={null}
{
"title": "Compartir en X",
"description": "Comparte esta página en X",
"icon": "x",
"href": {
"base": "https://x.com/intent/tweet",
"query": [
{
"key": "text",
"value": "Consulta esta documentación: $page"
}
]
}
}
```
Añade el campo `contextual` a tu archivo `docs.json` y especifica qué opciones quieres incluir.
```json theme={null}
{
"contextual": {
"options": [
"copy",
"view",
"chatgpt",
"claude",
"perplexity",
"mcp",
"cursor",
"vscode"
]
}
}
```