# Configuración de AsyncAPI (/es/api-playground/asyncapi-setup)

<!-- agent-signals: reading_time_min: 3 · est_tokens: 1248 · updated: 2026-07-30 -->
Related: [Playground](/es/api-playground/overview.md), [Configuración de OpenAPI](/es/api-playground/openapi-setup.md), [Tipos de datos complejos](/es/api-playground/complex-data-types.md), [Agregar ejemplos de SDK](/es/api-playground/adding-sdk-examples.md), [Gestionar la visibilidad de páginas](/es/api-playground/managing-page-visibility.md), [Respuestas múltiples](/es/api-playground/multiple-responses.md)

<div id="demo">
  ## Demostración [#demostración]
</div>

Consulta el [playground de WebSocket](/es/api-playground/websocket-playground) para ver un ejemplo del playground de AsyncAPI.

<div id="add-an-asyncapi-specification-file">
  ## Agrega un archivo de especificación de AsyncAPI [#agrega-un-archivo-de-especificación-de-asyncapi]
</div>

Para crear páginas para tus canales WebSocket, debes contar con un documento de esquema de AsyncAPI válido en formato JSON o YAML que cumpla con la [especificación de AsyncAPI 3.0](https://www.asyncapi.com/docs/reference/specification/v3.0.0).

<Tip>
  Usa [AsyncAPI Studio](https://studio.asyncapi.com/) para validar tu esquema de AsyncAPI.
</Tip>

```json {3}
/tu-proyecto
  |- docs.json
  |- asyncapi.json
```

<div id="auto-populate-websockets-pages">
  ## Generar automáticamente páginas de WebSocket [#generar-automáticamente-páginas-de-websocket]
</div>

Para generar automáticamente páginas para todos los canales de tu esquema AsyncAPI, agrega una propiedad `asyncapi` a cualquier elemento de navegación. La propiedad `asyncapi` acepta una ruta a un documento de esquema AsyncAPI en tu repositorio de documentación, una URL a un documento AsyncAPI alojado o una lista de enlaces a documentos de esquemas AsyncAPI.

<div id="examples-with-tabs">
  ### Ejemplos con pestañas [#ejemplos-con-pestañas]
</div>

<CodeGroup>
  <CodeBlockTabs defaultValue="Local file" groupId="local-file+multiple-files+remote-url">
    <CodeBlockTabsList>
      <CodeBlockTabsTrigger value="Local file">
        Local file
      </CodeBlockTabsTrigger>

      <CodeBlockTabsTrigger value="Remote URL">
        Remote URL
      </CodeBlockTabsTrigger>

      <CodeBlockTabsTrigger value="Multiple files">
        Multiple files
      </CodeBlockTabsTrigger>
    </CodeBlockTabsList>

    <CodeBlockTab value="Local file">
      ```json  
      "navigation": {
        "tabs": [
          {
              "tab": "API Reference",
              "asyncapi": "/path/to/asyncapi.json"
          }
        ]
      }

      ```
    </CodeBlockTab>

    <CodeBlockTab value="Remote URL">
      ```json  
      "navigation": {
        "tabs": [
          {
              "tab": "API Reference",
              "asyncapi": "https://github.com/asyncapi/spec/blob/master/examples/simple-asyncapi.yml"
          }
        ]
      }
      ```
    </CodeBlockTab>

    <CodeBlockTab value="Multiple files">
      ```json  
      "navigation": {
        "tabs": [
          {
            "tab": "API Reference",
            "asyncapi": [
              "/path/to/events.json",
              "/path/to/webhooks.json"
            ]
          }
        ]
      }
      ```
    </CodeBlockTab>
  </CodeBlockTabs>
</CodeGroup>

<Note>
  Cuando especificas varios archivos AsyncAPI, cada archivo genera su propio conjunto de páginas de canales.
</Note>

<div id="examples-with-groups">
  ### Ejemplos con grupos [#ejemplos-con-grupos]
</div>

```json
"navigation": {
  "tabs": [
    {
      "tab": "AsyncAPI",
      "groups": [
        {
          "group": "Websockets",
          "asyncapi": {
            "source": "/path/to/asyncapi.json",
            "directory": "websockets"
          }
        }
      ]
    }
  ]
}
```

<Note>
  El campo `directory` es opcional. Si no se especifica, Mintlify añade los archivos a la carpeta **api-reference** del repositorio de documentación.
</Note>

### Ejemplos con grupos anidados [#ejemplos-con-grupos-anidados]

La propiedad `asyncapi` admite grupos anidados. Mintlify genera las páginas de canal y las añade al grupo anidado, junto con cualquier página existente.

Esto resulta útil cuando quieres organizar los canales WebSocket como una subsección de un grupo de API más amplio, o cuando necesitas combinar varias especificaciones de AsyncAPI bajo un grupo principal común.

```json
"navigation": {
  "tabs": [
    {
      "tab": "API Reference",
      "groups": [
        {
          "group": "Voice API",
          "pages": [
            "voice/overview",
            {
              "group": "Voice API Commands",
              "asyncapi": "/path/to/voice-asyncapi.json"
            }
          ]
        }
      ]
    }
  ]
}
```

<div id="schema-rendering">
  ## Renderizado de esquemas [#renderizado-de-esquemas]
</div>

Los esquemas de tipo arreglo y los esquemas combinatorios (`oneOf`, `anyOf`, `allOf`) se expanden para mostrar sus atributos hijos en línea en las páginas de canal generadas. Las personas que leen pueden abrir la sección expandible del esquema de un elemento del arreglo o seleccionar una pestaña para cada opción de `oneOf`/`anyOf` para ver todos los campos anidados.

<div id="channel-page">
  ## Página de canal [#página-de-canal]
</div>

Si quieres tener más control sobre el orden de tus canales o necesitas referirte solo a canales específicos, crea un archivo MDX con la propiedad `asyncapi` en el frontmatter.

```mdx
---
title: "Canal WebSocket"
asyncapi: "/path/to/asyncapi.json channelName"
---
```