mintlify__docs/es/api-playground/asyncapi-setup.mdx

---
title: "Configuración de AsyncAPI"
description: "Configura documentación WebSocket en tiempo real con archivos AsyncAPI para generar páginas de referencia interactivas de canales y mensajes."
keywords: ["asyncapi", "websocket"]
---

<div id="demo">
  ## 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
</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
</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
</div>

<CodeGroup>

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

```

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

```json Multiple files
"navigation": {
  "tabs": [
    {
      "tab": "API Reference",
      "asyncapi": [
        "/path/to/events.json",
        "/path/to/webhooks.json"
      ]
    }
  ]
}
```

</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
</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

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
</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
</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"
---
```