# Add SDK examples (/api-playground/adding-sdk-examples)

<!-- agent-signals: reading_time_min: 3 · est_tokens: 1254 · updated: 2026-09-23 -->
Related: [Generate SDK reference pages from doc-tool output](/api-playground/sdk-reference-setup.md), [Complex data types](/api-playground/complex-data-types.md), [Multiple responses](/api-playground/multiple-responses.md), [Manage page visibility](/api-playground/managing-page-visibility.md), [Create manual API pages](/api-playground/mdx-setup.md)

If your users interact with your API through an SDK rather than direct network requests, add SDK code samples with the `x-codeSamples` extension. Mintlify displays these samples on your OpenAPI pages.

You can write these samples yourself. If you generate your SDKs with Speakeasy, Speakeasy can add the samples to your spec automatically.

## Add examples manually [#add-examples-manually]

Add the `x-codeSamples` property to any request method. It has the following schema.

<ParamField body="lang" type="string">
  The language of the code sample.
</ParamField>

<ParamField body="label" type="string">
  The label for the sample. This is useful when providing multiple examples for a single endpoint.
</ParamField>

<ParamField body="source" type="string">
  The source code of the sample.
</ParamField>

The following example shows code samples for a plant tracking app that has both a Bash CLI tool and a JavaScript SDK.

```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 });
```

## Generate examples with Speakeasy [#generate-examples-with-speakeasy]

If you generate your SDKs with [Speakeasy](https://www.speakeasy.com), you can pull its autogenerated snippets into your API reference instead of maintaining them by hand. The snippets appear in the [interactive playground](/api-playground/overview) alongside your endpoints.

<Steps>
  <Step title="Get the combined spec URL from the registry">
    Go to your [Speakeasy Dashboard](https://app.speakeasy.com) and open the **API Registry** tab. Open the `*-with-code-samples` entry for your API.

    <Frame>
      ![Screenshot of the Speakeasy API Registry page. A red square and the number 1 emphasize the API Registry tab, and a red square and the number 2 emphasize the entry for the API.](/_assets/c467e4709030c41a7f746ea91cd2b5b064d6fb7135eb3278c8f61b0ae807ea1c)
    </Frame>

    <Note>
      If the entry is not labeled **Combined Spec**, ensure that your API has an [automated code sample URL](https://www.speakeasy.com/docs/code-samples/automated-code-sample-urls) configured.
    </Note>

    From the registry entry's page, copy the provided public URL.

    <Frame>
      ![Screenshot showing the combined spec registry entry with the copy URL function emphasized with a red square.](/_assets/628f1be1cb011cd63b8245b1829129061f06283dffb5fda4c7db7bd323522a61)
    </Frame>
  </Step>

  <Step title="Add the combined spec URL to your `docs.json` file">
    Add the combined spec URL to an anchor or a tab in the `navigation` object of your `docs.json` file.

    <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="Verify the integration">
    After you redeploy your documentation, open any endpoint in your API reference and confirm that language snippets appear in the playground. The set of available languages matches the SDK targets configured in your Speakeasy project.

    If snippets do not appear, check that:

    * The `openapi` URL in `docs.json` points to the `*-with-code-samples` combined spec entry, not the source OpenAPI file.
    * The combined spec URL is publicly reachable from the browser.
    * Your Speakeasy project has an [automated code sample URL](https://www.speakeasy.com/docs/code-samples/automated-code-sample-urls) configured and at least one SDK target enabled.
  </Step>
</Steps>