# Ajouter des exemples de SDK (/fr/api-playground/adding-sdk-examples)

<!-- agent-signals: reading_time_min: 3 · est_tokens: 1388 · updated: 2026-09-23 -->
Related: [Configuration des références SDK](/fr/api-playground/sdk-reference-setup.md), [Types de données complexes](/fr/api-playground/complex-data-types.md), [Réponses multiples](/fr/api-playground/multiple-responses.md), [Gérer la visibilité des pages](/fr/api-playground/managing-page-visibility.md), [Créer manuellement des pages d'API](/fr/api-playground/mdx-setup.md)

Si vos utilisateurs interagissent avec votre API via un SDK plutôt que par des requêtes réseau directes, ajoutez des exemples de code SDK avec l'extension `x-codeSamples`. Mintlify affiche ces exemples sur vos pages OpenAPI.

Vous pouvez écrire ces exemples vous-même. Si vous générez vos SDK avec Speakeasy, Speakeasy peut ajouter automatiquement les exemples à votre spécification.

<div id="add-examples-manually">
  ## Ajouter des exemples manuellement [#ajouter-des-exemples-manuellement]
</div>

Ajoutez la propriété `x-codeSamples` à n'importe quelle méthode de requête. Elle suit le schéma suivant.

<ParamField body="lang" type="string">
  Le langage de l'exemple de code.
</ParamField>

<ParamField body="label" type="string">
  Le libellé de l'exemple. Utile lorsque vous fournissez plusieurs exemples pour un même endpoint.
</ParamField>

<ParamField body="source" type="string">
  Le code source de l'exemple.
</ParamField>

L'exemple suivant montre des exemples de code pour une application de suivi de plantes qui dispose à la fois d'un outil CLI Bash et d'un SDK JavaScript.

```yaml
paths:
  /plants:
    get:
      # ...
      x-codeSamples:
        - lang: bash
          label: List all unwatered plants
          source: |
            planter list -u
        - lang: javascript
          label: List all unwatered plants
          source: |
            const planter = require('planter');
            planter.list({ unwatered: true });
        - lang: bash
          label: List all potted plants
          source: |
            planter list -p
        - lang: javascript
          label: List all potted plants
          source: |
            const planter = require('planter');
            planter.list({ potted: true });
```

<div id="generate-examples-with-speakeasy">
  ## Générer des exemples avec Speakeasy [#générer-des-exemples-avec-speakeasy]
</div>

Si vous générez vos SDK avec [Speakeasy](https://www.speakeasy.com), vous pouvez intégrer ses extraits autogénérés dans votre référence d'API au lieu de les maintenir manuellement. Les extraits apparaissent dans le [playground interactif](/fr/api-playground/overview) à côté de vos endpoints.

<Steps>
  <Step title="Récupérez l'URL de la spécification combinée depuis le registre">
    Accédez à votre [tableau de bord Speakeasy](https://app.speakeasy.com) et ouvrez l'onglet **API Registry**. Ouvrez l'entrée `*-with-code-samples` de votre API.

    <Frame>
      ![Capture d'écran de la page API Registry de Speakeasy. Un carré rouge et le chiffre 1 mettent en évidence l'onglet API Registry, et un carré rouge et le chiffre 2 mettent en évidence l'entrée de l'API.](/_assets/c467e4709030c41a7f746ea91cd2b5b064d6fb7135eb3278c8f61b0ae807ea1c)
    </Frame>

    <Note>
      Si l'entrée n'est pas étiquetée **Combined Spec**, vérifiez que votre API dispose d'une [URL d'exemples de code automatiques](https://www.speakeasy.com/docs/code-samples/automated-code-sample-urls) configurée.
    </Note>

    Depuis la page de l'entrée du registre, copiez l'URL publique fournie.

    <Frame>
      ![Capture d'écran montrant l'entrée du registre de la spécification combinée avec la fonction de copie d'URL mise en évidence par un carré rouge.](/_assets/628f1be1cb011cd63b8245b1829129061f06283dffb5fda4c7db7bd323522a61)
    </Frame>
  </Step>

  <Step title="Ajoutez l'URL de la spécification combinée à votre fichier `docs.json`">
    Ajoutez l'URL de la spécification combinée à une ancre ou à un onglet dans l'objet `navigation` de votre fichier `docs.json`.

    <CodeGroup>
      <CodeBlockTabs defaultValue="Anchor" groupId="anchor+tab">
        <CodeBlockTabsList>
          <CodeBlockTabsTrigger value="Anchor">
            Anchor
          </CodeBlockTabsTrigger>

          <CodeBlockTabsTrigger value="Tab">
            Tab
          </CodeBlockTabsTrigger>
        </CodeBlockTabsList>

        <CodeBlockTab value="Anchor">
          ```json  
          {
            "navigation": {
              "anchors": [
                {
                  "anchor": "API reference",
                  "icon": "square-terminal",
                  // !mark
                  "openapi": "SPEAKEASY_COMBINED_SPEC_URL"
                }
              ]
            }
          }
          ```
        </CodeBlockTab>

        <CodeBlockTab value="Tab">
          ```json  
          {
            "navigation": {
              "tabs": [
                {
                  "tab": "API reference",
                  // !mark
                  "openapi": "SPEAKEASY_COMBINED_SPEC_URL"
                }
              ]
            }
          }
          ```
        </CodeBlockTab>
      </CodeBlockTabs>
    </CodeGroup>
  </Step>

  <Step title="Vérifiez l'intégration">
    Après avoir redéployé votre documentation, ouvrez n'importe quel endpoint dans votre référence d'API et confirmez que les extraits par langage apparaissent dans le playground. L'ensemble des langages disponibles correspond aux cibles de SDK configurées dans votre projet Speakeasy.

    Si les extraits n'apparaissent pas, vérifiez que :

    * L'URL `openapi` dans `docs.json` pointe vers l'entrée de spécification combinée `*-with-code-samples`, et non vers le fichier OpenAPI source.
    * L'URL de la spécification combinée est accessible publiquement depuis le navigateur.
    * Votre projet Speakeasy dispose d'une [URL d'exemples de code automatisés](https://www.speakeasy.com/docs/code-samples/automated-code-sample-urls) configurée et d'au moins une cible de SDK activée.
  </Step>
</Steps>