Menú contextual

Añade integraciones de IA con un clic a tu documentación

El menú contextual ofrece acceso rápido a contenido optimizado para IA e integraciones directas con herramientas de IA populares. Cuando los usuarios abren el menú contextual en cualquier página, pueden copiar contenido para usarlo como contexto en herramientas de IA o iniciar conversaciones en ChatGPT, Claude, Perplexity o en una herramienta personalizada de su elección, con su documentación ya cargada como contexto.

​

Opciones del menú

El menú contextual incluye varias opciones predefinidas que puedes habilitar agregando su identificador a tu configuración.

Opción	Identificador	Descripción
Copiar página	copy	Copia la página actual en formato Markdown para pegarla como contexto en herramientas de IA
Ver como Markdown	view	Abre la página actual en formato 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 en el 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

​

Habilitar el menú contextual

Agrega el campo contextual a tu archivo docs.json y especifica qué opciones quieres incluir.

{
 "contextual": {
   "options": [
     "copiar",
     "ver",
     "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:

title · string · requerido

El título de la opción.

description · string · requerido

La descripción de la opción. Se muestra debajo del título cuando se expande el menú contextual.

icon · string · requerido

El ícono que se mostrará.

Opciones:

• Nombre del ícono de Font Awesome
• Nombre del ícono de Lucide
• Código SVG compatible con JSX, envuelto entre llaves
• URL de un ícono alojado externamente
• Ruta a un archivo de ícono en tu proyecto

Para íconos SVG personalizados:

1. Convierte tu SVG con el convertidor de SVGR.
2. Pega tu código SVG en el campo de entrada de SVG.
3. Copia el elemento completo <svg>...</svg> del campo de salida de JSX.
4. Envuelve el código SVG compatible con JSX entre llaves: icon={<svg ...> ... </svg>}.
5. Ajusta height y width según sea necesario.

iconType · string

El estilo del ícono de Font Awesome. Solo se usa con íconos de Font Awesome.

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

href · string | object · requerido

El href de la opción. Usa una cadena para enlaces simples o un objeto para enlaces dinámicos con parámetros de consulta.

Mostrar href object

base · string · requerido

La URL base de la opción.

query · object · requerido

Los parámetros de consulta de la opción.

Mostrar query object

key · string · requerido

La clave del parámetro de consulta.

value · string · requerido

El valor del parámetro de consulta. 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:

{
    "contextual": {
        "options": [
            "copy",
            "view",
            "chatgpt",
            "claude",
            "perplexity",
            {
                "title": "Solicitar una función",
                "description": "Únete a la conversación en GitHub para solicitar una nueva función"
                "icon": "plus",
                "href": "https://github.com/orgs/mintlify/discussions/categories/feature-requests"
            }
        ]
    }
}

​

Ejemplos de opciones personalizadas

Enlace simple

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

Enlace dinámico con contenido de la página

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