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

# Playground

> Permite a los desarrolladores probar endpoints de API en tu documentación con un playground interactivo que envía solicitudes y muestra respuestas.

El playground de API es un entorno interactivo que permite a los usuarios probar y explorar tus endpoints de API. Los desarrolladores pueden crear solicitudes de API, enviarlas y ver las respuestas sin salir de tu documentación.

Consulta [Trigger an update](/es/api/update/trigger) para ver un ejemplo del playground de API en acción.

<Frame>
  <img src="https://mintcdn.com/smartac-mintlify-b54f69e3/2d1wfQxoR9-a-wJ3/images/playground/API-playground-light.png?fit=max&auto=format&n=2d1wfQxoR9-a-wJ3&q=85&s=a81f0eb5639f9f2525722d553c544dc7" alt="Playground de API para el endpoint Trigger an update." className="block dark:hidden" width="2534" height="1022" data-path="images/playground/API-playground-light.png" />

  <img src="https://mintcdn.com/smartac-mintlify-b54f69e3/2d1wfQxoR9-a-wJ3/images/playground/API-playground-dark.png?fit=max&auto=format&n=2d1wfQxoR9-a-wJ3&q=85&s=b16735c61cb8085419d05c215d5b7447" alt="Playground de API para el endpoint Trigger an update." className="hidden dark:block" width="2534" height="1022" data-path="images/playground/API-playground-dark.png" />
</Frame>

El playground genera páginas interactivas para tus endpoints a partir de tu especificación OpenAPI o esquema AsyncAPI. Si modificas tu API, el playground actualiza automáticamente las páginas correspondientes.

Recomendamos generar tu playground de API a partir de una especificación OpenAPI. Sin embargo, puedes crear manualmente páginas de referencia de API después de definir una URL base y un método de autenticación en tu `docs.json`.

<div id="get-started">
  ## Primeros pasos
</div>

<Steps>
  <Step title="Añade tu archivo de especificación de OpenAPI.">
    <Tip>
      Valida tu archivo de especificación de OpenAPI con el [Swagger Editor](https://editor.swagger.io/) o con el comando de la [Mint CLI](https://www.npmjs.com/package/mint) `mint validate`.
    </Tip>

    ```bash {3} theme={null}
    /your-project
      |- docs.json
      |- openapi.json
    ```
  </Step>

  <Step title="Genera páginas de endpoints.">
    Actualiza tu `docs.json` para hacer referencia a tu especificación de OpenAPI.

    **Para generar automáticamente páginas para todos los endpoints de tu especificación de OpenAPI**, añade una propiedad `openapi` a cualquier elemento de navegación.

    Este ejemplo genera una página para cada endpoint definido en `openapi.json` y organiza las páginas en el grupo "API reference".

    ```json Generate all endpoint pages theme={null}
    "navigation": {
      "groups": [
        {
          "group": "API reference",
          "openapi": "openapi.json"
        }
      ]
    }
    ```

    **Para generar páginas solo para endpoints específicos**, enumera los endpoints en la propiedad `pages` del elemento de navegación.

    Este ejemplo genera páginas únicamente para los endpoints `GET /users` y `POST /users`. Para generar otras páginas de endpoints, añade más endpoints al arreglo `pages`.

    ```json Generate specific endpoint pages theme={null}
    "navigation": {
      "groups": [
          {
            "group": "API reference",
            "openapi": "openapi.json",
            "pages": [
              "GET /users",
              "POST /users"
            ]
          }
      ]
    }
    ```
  </Step>
</Steps>

<div id="customize-your-playground">
  ## Personaliza tu área de pruebas de la API
</div>

Personaliza tu área de pruebas de la API definiendo las siguientes propiedades en tu `docs.json`.

<ResponseField name="playground" type="object">
  Configuraciones para el área de pruebas de la API.

  <Expandable title="playground" defaultOpen="True">
    <ResponseField name="display" type="&#x22;interactive&#x22; | &#x22;simple&#x22; | &#x22;none&#x22; | &#x22;auth&#x22;">
      El modo de visualización del área de pruebas de la API.

      * `"interactive"`: Muestra el área de pruebas interactiva.
      * `"simple"`: Muestra un endpoint copiable sin área de pruebas.
      * `"none"`: No muestra nada.
      * `"auth"`: Muestra el área de pruebas interactiva solo a los usuarios autenticados. Los usuarios no autenticados o los usuarios que no están en los grupos obligatorios no ven ninguna área de pruebas.

      El valor predeterminado es `interactive`.
    </ResponseField>

    <ResponseField name="proxy" type="boolean" defaultOpen="True">
      Indica si las solicitudes de API deben pasar por el servidor proxy de Mintlify. El valor predeterminado es `true`.

      Cuando es `true`, las solicitudes del playground se enrutan a través de los servidores de Mintlify. Cuando es `false`, el playground envía las solicitudes directamente desde el navegador a tu API. Establécelo en `false` cuando tu API acepte solicitudes directas del navegador y no necesites que Mintlify actúe como proxy del tráfico. Por ejemplo, cuando tu API requiere encabezados específicos que no se pueden reenviar a través del proxy o cuando necesitas que la solicitud se origine directamente desde el navegador del usuario por motivos de autenticación.
    </ResponseField>

    <ResponseField name="credentials" type="boolean">
      Indica si se deben incluir cookies, encabezados de autorización y certificados de cliente TLS en las solicitudes cross-origin cuando `proxy` es `false`. El valor predeterminado es `false`.

      Cuando es `true` y `proxy` es `false`, el playground envía solicitudes con las credenciales gestionadas por el navegador incluidas. Por ejemplo, cuando tu API utiliza autenticación basada en cookies o tokens de sesión HTTP.

      Esta opción no tiene efecto cuando `proxy` es `true`.
    </ResponseField>
  </Expandable>
</ResponseField>

<ResponseField name="url" type="&#x22;full&#x22;">
  El modo de visualización de las URL base en los encabezados de los endpoints. Cuando se establece en `full`, se muestra la URL base completa en cada página del endpoint. De forma predeterminada, solo se muestra la ruta relativa del endpoint.
</ResponseField>

<ResponseField name="examples" type="object">
  Configuraciones para los ejemplos de API generados automáticamente.

  <Expandable title="examples" defaultOpen="True">
    <ResponseField name="languages" type="array of string">
      Lenguajes para los fragmentos de API generados automáticamente.

      Se muestran en el orden especificado.

      <Accordion title="All supported languages">
        | Nombre visible | Clave        | Alias                     |
        | -------------- | ------------ | ------------------------- |
        | cURL           | `bash`       | `curl`, `sh`, `shell`     |
        | Python         | `python`     | `py`                      |
        | JavaScript     | `javascript` | `js`                      |
        | Node.js        | `node`       | `nodejs`, `node.js`       |
        | PHP            | `php`        |                           |
        | Go             | `go`         | `golang`                  |
        | Java           | `java`       |                           |
        | Ruby           | `ruby`       | `rb`                      |
        | PowerShell     | `powershell` |                           |
        | Swift          | `swift`      |                           |
        | C#             | `csharp`     | `c#`                      |
        | .NET           | `dotnet`     | `.net`, `.NET`, `dot-net` |
        | TypeScript     | `typescript` | `ts`                      |
        | C              | `c`          |                           |
        | C++            | `c++`        | `cpp`                     |
        | Kotlin         | `kotlin`     | `kt`                      |
        | Rust           | `rust`       | `rs`                      |
        | Dart           | `dart`       | `flutter`                 |
      </Accordion>
    </ResponseField>

    <ResponseField name="defaults" type="&#x22;required&#x22; | &#x22;all&#x22;">
      Indica si se muestran los parámetros opcionales en los ejemplos de API. El valor predeterminado es `all`.
    </ResponseField>

    <ResponseField name="prefill" type="boolean">
      Indica si se debe rellenar previamente el área de pruebas de la API con datos de ejemplos del esquema. Cuando está habilitado, el área de pruebas completa automáticamente los campos de la solicitud con valores de ejemplo de tu especificación OpenAPI. El valor predeterminado es `false`.
    </ResponseField>

    <ResponseField name="autogenerate" type="boolean">
      Indica si se deben generar ejemplos de código para los endpoints a partir de las especificaciones de API. El valor predeterminado es `true`. Cuando se establece en `false`, solo aparecen en el área de pruebas de la API los ejemplos de código redactados manualmente (de `x-codeSamples` en las especificaciones OpenAPI o de componentes `<RequestExample>` en MDX).
    </ResponseField>
  </Expandable>
</ResponseField>

<div id="example-configuration">
  ### Configuración de ejemplo
</div>

Este ejemplo configura el área de pruebas de la API para que sea interactiva, con fragmentos de código de ejemplo para cURL, Python y JavaScript. Solo muestra los parámetros obligatorios en los fragmentos de código, y el área de pruebas rellena el cuerpo de la solicitud con valores de ejemplo.

```json theme={null}
{
 "api": {
   "playground": {
     "display": "interactive"
   },
   "examples": {
     "languages": ["curl", "python", "javascript"],
     "defaults": "required",
     "prefill": true
   }
 }
}
```

<div id="auth-based-playground-display">
  ### Visualización del playground basada en la autenticación
</div>

Usa el modo de visualización `auth` para mostrar el playground interactivo solo a usuarios autenticados. Esto es útil cuando quieres que los usuarios puedan consultar públicamente la documentación de tu API mientras restringes el acceso al playground a los usuarios que han iniciado sesión.

Cuando `display` está configurado en `auth`:

* Los usuarios autenticados ven el playground interactivo.
* Los usuarios no autenticados no ven ningún playground (equivalente a `none`).

También puedes combinar `auth` con la propiedad `groups` en el frontmatter de la página para restringir el acceso al playground a grupos de usuarios específicos.

```mdx Page with group-restricted playground theme={null}
---
title: "Crear usuario"
openapi: POST /users
playground: auth
groups: ["admin", "developer"]
public: true
---
```

En este ejemplo:

* La página es públicamente visible (cualquiera puede ver la documentación).
* Solo los usuarios autenticados que pertenecen a los grupos `admin` o `developer` ven el playground interactivo.
* Los usuarios que no están en esos grupos no ven ningún playground.

Si la página no tiene la propiedad `groups`, todos los usuarios autenticados pueden ver el playground interactivo.

<Note>
  El modo de visualización `auth` requiere que tu documentación tenga la [autenticación](/es/deploy/authentication-setup) configurada.
</Note>

<div id="custom-endpoint-pages">
  ### Páginas de endpoints personalizadas
</div>

Cuando necesites más control sobre la documentación de tu API, usa la extensión `x-mint` en tu especificación OpenAPI o crea páginas MDX individuales para tus endpoints.

Ambas opciones te permiten:

* Personalizar el metadata de la página
* Agregar contenido adicional, como ejemplos
* Controlar el comportamiento del playground por página

Recomendamos la extensión `x-mint` para que toda la documentación de tu API se genere automáticamente a partir de tu especificación OpenAPI y se mantenga en un solo archivo.

Recomendamos las páginas MDX individuales para APIs pequeñas o cuando quieras experimentar con cambios página por página.

<div id="response-rendering">
  ## Renderizado de respuestas
</div>

El playground renderiza automáticamente las respuestas según el encabezado `Content-Type` devuelto por tu API.

* **Imágenes**: Se renderizan en línea (`image/*`).
* **Audio**: Se renderiza con un reproductor de audio integrado (`audio/*`).
* **Video**: Se renderiza con un reproductor de video integrado (`video/*`). Cualquier respuesta con un tipo de contenido `video/*`, como `video/mp4` o `video/webm`, se muestra como un video reproducible directamente en el playground.
* **Todas las demás respuestas**: Se muestran en un bloque de código.

<div id="parameter-anchor-links">
  ## Enlaces de anclaje de parámetros
</div>

Cada parámetro en el playground de API tiene un enlace de anclaje clicable. Pasa el cursor sobre el nombre de un parámetro para revelar el ícono de enlace y haz clic para copiar una URL directa a ese parámetro.

Usa los enlaces de anclaje de parámetros para:

* Compartir enlaces a parámetros específicos en conversaciones de soporte o documentación
* Navegar directamente a un parámetro desde otra página o recurso externo
* Guardar en marcadores los parámetros que consultas con frecuencia

El formato de la URL es `tu-url-de-docs/ruta-del-endpoint#nombre-del-parametro`. Para parámetros anidados, el anclaje incluye la ruta del elemento padre.

<div id="further-reading">
  ## Más información
</div>

* [Configuración de OpenAPI](/es/api-playground/openapi-setup) para obtener más información sobre cómo crear tu documento OpenAPI.
* [Extensión x-mint](/es/api-playground/openapi-setup#customize-your-endpoint-pages) para obtener más información sobre cómo personalizar las páginas de tus endpoints.
* [Configuración de MDX](/es/api-playground/mdx-setup) para obtener más información sobre cómo crear manualmente páginas individuales de referencia de API.
* [Configuración de AsyncAPI](/es/api-playground/asyncapi-setup) para obtener más información sobre cómo crear tu esquema AsyncAPI para generar páginas de referencia de WebSocket.