# Configuration d’AsyncAPI (/fr/api-playground/asyncapi-setup)

<!-- agent-signals: reading_time_min: 3 · est_tokens: 1255 · updated: 2026-07-30 -->
Related: [Playground](/fr/api-playground/overview.md), [Configuration d’OpenAPI](/fr/api-playground/openapi-setup.md), [Types de données complexes](/fr/api-playground/complex-data-types.md), [Ajouter des exemples de SDK](/fr/api-playground/adding-sdk-examples.md), [Gérer la visibilité des pages](/fr/api-playground/managing-page-visibility.md), [Réponses multiples](/fr/api-playground/multiple-responses.md)

<div id="demo">
  ## Démo [#démo]
</div>

Consultez l’[aire de jeu WebSocket](/fr/api-playground/websocket-playground) pour un exemple de l’aire de jeu AsyncAPI.

<div id="add-an-asyncapi-specification-file">
  ## Ajouter un fichier de spécification AsyncAPI [#ajouter-un-fichier-de-spécification-asyncapi]
</div>

Pour créer des pages pour vos canaux WebSocket, vous devez disposer d’un document de schéma AsyncAPI valide, au format JSON ou YAML, conforme à la [spécification AsyncAPI 3.0](https://www.asyncapi.com/docs/reference/specification/v3.0.0).

<Tip>
  Utilisez [AsyncAPI Studio](https://studio.asyncapi.com/) pour valider votre schéma AsyncAPI.
</Tip>

```json {3}
/votre-projet
  |- docs.json
  |- asyncapi.json
```

<div id="auto-populate-websockets-pages">
  ## Remplir automatiquement les pages WebSocket [#remplir-automatiquement-les-pages-websocket]
</div>

Pour générer automatiquement des pages pour tous les canaux de votre schéma AsyncAPI, ajoutez une propriété `asyncapi` à n’importe quel élément de navigation. La propriété `asyncapi` accepte un chemin d’accès vers un document de schéma AsyncAPI dans votre dépôt de documentation, une URL vers un document AsyncAPI hébergé, ou un tableau de liens vers des documents de schéma AsyncAPI.

<div id="examples-with-tabs">
  ### Exemples avec onglets [#exemples-avec-onglets]
</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": "Référence de l’API",
              "asyncapi": "/path/to/asyncapi.json"
          }
        ]
      }

      ```
    </CodeBlockTab>

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

    <CodeBlockTab value="Multiple files">
      ```json  
      "navigation": {
        "tabs": [
          {
            "tab": "Référence de l’API",
            "asyncapi": [
              "/path/to/events.json",
              "/path/to/webhooks.json"
            ]
          }
        ]
      }
      ```
    </CodeBlockTab>
  </CodeBlockTabs>
</CodeGroup>

<Note>
  Lorsque vous spécifiez plusieurs fichiers AsyncAPI, chaque fichier génère son propre ensemble de pages de canaux.
</Note>

<div id="examples-with-groups">
  ### Exemples avec des groupes [#exemples-avec-des-groupes]
</div>

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

<Note>
  Le champ `directory` est facultatif. S’il n’est pas indiqué, Mintlify ajoute les fichiers dans le dossier **api-reference** du dépôt de documentation.
</Note>

### Exemples avec des groupes imbriqués [#exemples-avec-des-groupes-imbriqués]

La propriété `asyncapi` prend en charge les groupes imbriqués. Mintlify génère les pages de canaux et les ajoute au groupe imbriqué, aux côtés des pages existantes.

C'est utile lorsque vous souhaitez organiser les canaux WebSocket comme une sous-section d'un groupe d'API plus large, ou lorsque vous devez combiner plusieurs spécifications AsyncAPI sous un groupe parent commun.

```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">
  ## Rendu des schémas [#rendu-des-schémas]
</div>

Les schémas de tableau et les schémas combinatoires (`oneOf`, `anyOf`, `allOf`) se développent pour afficher leurs attributs enfants en ligne dans les pages de canal générées. Les lecteurs peuvent ouvrir la section dépliable du schéma d’un élément de tableau ou sélectionner un onglet pour chaque option `oneOf`/`anyOf` afin d’afficher tous les champs imbriqués.

<div id="channel-page">
  ## Page de canal [#page-de-canal]
</div>

Si vous souhaitez mieux contrôler l’ordre de vos canaux ou ne référencer que certains canaux, créez un fichier MDX avec la propriété `asyncapi` dans le frontmatter.

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