> ## Documentation Index
> Fetch the complete documentation index at: https://smartac-mintlify-d32b5473.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Menú contextual

> Agrega un menú contextual a tu documentación con integraciones de IA en un clic para ChatGPT, Claude, Perplexity, Cursor, MCP y más herramientas.

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>;
};

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, Google AI Studio, Grok, Devin, Windsurf o una herramienta personalizada de su elección, con su documentación ya cargada como contexto.

<Tip>
  Combina el menú contextual con tu archivo [`skill.md`](/es/ai/skillmd) alojado y tu [servidor MCP](/es/ai/model-context-protocol) para que los usuarios puedan instalar todas las capacidades de tu producto en sus herramientas de IA, no solo la página que están leyendo.
</Tip>

<div id="menu-options">
  ## Opciones del menú
</div>

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                                                                                                                                               |
| **Preguntar a assistant**                          | `assistant`       | Abre el [assistant](/es/assistant/index) con la página actual como contexto                                                                                                       |
| **Descargar PDF**                                  | `download-pdf`    | Descarga la página actual como PDF. Disponible en los [planes Enterprise](https://mintlify.com/pricing).                                                                          |
| **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                                                                                                            |
| **Abrir en Grok**                                  | `grok`            | Crea una conversación en Grok con la página actual como contexto                                                                                                                  |
| **Abrir en Google AI Studio**                      | `aistudio`        | Crea una conversación en Google AI Studio con la página actual como contexto                                                                                                      |
| **Abrir en Devin**                                 | `devin`           | Crea una sesión de Devin con la página actual como contexto                                                                                                                       |
| **Abrir en Devin Desktop**                         | `windsurf`        | Abre Devin Desktop con la página actual como contexto. Requiere instalar Devin Desktop.                                                                                           |
| **Copiar URL del servidor MCP**                    | `mcp`             | Copia la URL de tu servidor MCP al portapapeles                                                                                                                                   |
| **Copiar comando de instalación del servidor MCP** | `add-mcp`         | Copia el comando `npx add-mcp` para instalar el servidor MCP                                                                                                                      |
| **Conectar con Cursor**                            | `cursor`          | Instala tu servidor MCP alojado en Cursor                                                                                                                                         |
| **Conectar con VS Code**                           | `vscode`          | Instala tu servidor MCP alojado en VS Code                                                                                                                                        |
| **Conectar con Devin**                             | `devin-mcp`       | Instala tu servidor MCP alojado en Devin                                                                                                                                          |
| **Descargar especificación de API**                | `downloadApiSpec` | Descarga la especificación OpenAPI de tu despliegue. Si hay varias especificaciones configuradas, las descarga como un archivo zip. Solo aparece en páginas de referencia de API. |
| **Descargar PDF**                                  | `download-pdf`    | Descarga la página actual como un PDF                                                                                                                                             |
| **Opciones personalizadas**                        | Object            | Agrega opciones personalizadas al menú contextual                                                                                                                                 |

<Frame>
  <img src="https://mintcdn.com/smartac-mintlify-d32b5473/cwweAFqJE-zKwmm3/images/contextual-menu/contextual-menu.png?fit=max&auto=format&n=cwweAFqJE-zKwmm3&q=85&s=8f5638324d14ccbec36dba7f7f3ddb40" alt="El menú contextual expandido que muestra los elementos del menú Copiar página, Ver como Markdown, Abrir en ChatGPT y Abrir en Claude." width="1396" height="944" data-path="images/contextual-menu/contextual-menu.png" />
</Frame>

<Note>
  La opción `downloadApiSpec` solo aparece en páginas de referencia de API (páginas cuyo frontmatter declara `api`, `openapi` o `asyncapi`). En despliegues con autenticación o autenticación de usuario habilitada, solo los lectores autenticados pueden descargar la especificación.
</Note>

<div id="enabling-the-contextual-menu">
  ## Activar el menú contextual
</div>

Añade el campo `contextual` a tu archivo `docs.json` y especifica qué opciones quieres incluir.

```json theme={null}
{
 "contextual": {
   "options": [
     "copy",
     "view",
     "assistant",
     "download-pdf",
     "chatgpt",
     "claude",
     "perplexity",
      "grok",
       "aistudio",
       "devin",
       "windsurf",
        "mcp",
      "cursor",
      "vscode",
      "devin-mcp",
      "downloadApiSpec",
      "download-pdf"
    ]
 }
}
```

<div id="display-location">
  ## Ubicación de visualización
</div>

De forma predeterminada, el menú contextual aparece en el encabezado de la página. Puedes configurarlo para que se muestre en la barra lateral de la tabla de contenidos mediante la opción `display`.

```json theme={null}
{
  "contextual": {
    "options": ["copy", "view", "chatgpt", "claude"],
    "display": "toc"
  }
}
```

| Valor    | Descripción                                                                                   |
| :------- | :-------------------------------------------------------------------------------------------- |
| `header` | Muestra las opciones en el menú contextual de la parte superior de la página (predeterminado) |
| `toc`    | Muestra las opciones en la barra lateral de la tabla de contenidos                            |

<div id="adding-custom-options">
  ## Agregar opciones personalizadas
</div>

Crea opciones personalizadas en el menú contextual agregando un objeto al arreglo `options`. Cada opción personalizada requiere estas propiedades:

<ResponseField name="title" type="string" required>
  El título de la opción.
</ResponseField>

<ResponseField name="description" type="string" required>
  La descripción de la opción. Se muestra debajo del título cuando el menú contextual se expande.
</ResponseField>

<ResponseField name="icon" type="string" required>
  El icono que se mostrará.

  Options:

  * [Font Awesome icon](https://fontawesome.com/icons) name, if you have the `icons.library` [property](/es/organize/settings#param-icons) set to `fontawesome` in your `docs.json`
  * [Lucide icon](https://lucide.dev/icons) name, if you have the `icons.library` [property](/es/organize/settings#param-icons) set to `lucide` in your `docs.json`
  * Nombre del [icono Tabler](https://tabler.io/icons), si tienes la `icons.library` [propiedad](/es/organize/settings#param-icons) configurada como `tabler` en tu `docs.json`
  * URL to an externally hosted icon
  * Path to an icon file in your project
</ResponseField>

<ResponseField name="iconType" type="string">
  The [Font Awesome](https://fontawesome.com/icons) icon style. Only used with Font Awesome icons.

  Options: `regular`, `solid`, `light`, `thin`, `sharp-solid`, `duotone`, `brands`.
</ResponseField>

<ResponseField name="href" type="string | object" required>
  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.

  <Expandable title="href object">
    <ResponseField name="base" type="string" required>
      La URL base de la opción.
    </ResponseField>

    <ResponseField name="query" type="object" required>
      Los parámetros de búsqueda de la opción.

      <Expandable title="query object">
        <ResponseField name="key" type="string" required>
          La key del parámetro de búsqueda.
        </ResponseField>

        <ResponseField name="value" type="string" required>
          El value del parámetro de búsqueda. Mintlify reemplaza 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.
        </ResponseField>
      </Expandable>
    </ResponseField>
  </Expandable>
</ResponseField>

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

<div id="custom-option-examples">
  ### Ejemplos de opciones personalizadas
</div>

<AccordionGroup>
  <Accordion title="Enlace simple">
    ```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"
    }
    ```
  </Accordion>

  <Accordion title="Enlace dinámico con contenido de la página">
    ```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"
          }
        ]
      }
    }
    ```
  </Accordion>
</AccordionGroup>