---
title: RequestExample & ResponseExample
description: Styled wrappers that visually distinguish request and response code blocks.
url: http://localhost:3040/components/request-response-example
---

# RequestExample & ResponseExample

Styled wrappers that visually distinguish request and response code blocks.

Use `<RequestExample>` and `<ResponseExample>` to frame HTTP request/response pairs in MDX-written API docs. They add a labeled header bar — blue for requests, green for responses — matching the style used by the auto-generated API Reference pages.

## Example

```bash cURL
curl -X POST https://api.example.com/pets \
  -H "Authorization: Bearer sk-..." \
  -H "Content-Type: application/json" \
  -d '{"name": "Buddy", "species": "dog"}'
```

```json 201 Created
{
  "id": "a1b2c3d4-e5f6-7890-abcd-ef1234567890",
  "name": "Buddy",
  "species": "dog",
  "status": "available",
  "created_at": "2025-01-15T10:30:00Z"
}
```

```mdx
<RequestExample>
\`\`\`bash cURL
curl -X POST https://api.example.com/pets \
  -H "Authorization: Bearer sk-..." \
  -d '{"name": "Buddy", "species": "dog"}'
\`\`\`
</RequestExample>

<ResponseExample>
\`\`\`json 201 Created
{ "id": "a1b2c3d4", "name": "Buddy", "status": "available" }
\`\`\`
</ResponseExample>
```

## With CodeGroup

Wrap a `` inside `<RequestExample>` to show the same request in multiple languages:

```mdx
<RequestExample>

  \`\`\`typescript TypeScript
  await client.pets.create({ name: 'Buddy', species: 'dog' })
  \`\`\`

  \`\`\`python Python
  client.pets.create(name="Buddy", species="dog")
  \`\`\`

</RequestExample>
```

## See it in action

The API Reference pages are auto-generated from your OpenAPI spec and render using the same visual components — `ParamField`, `ResponseField`, `Expandable`, `RequestExample`, and `ResponseExample`. Open any endpoint to see them all in context:

    `GET /pets` — query parameters, paginated response schema with nested expandable fields.

    `POST /pets` — request body params, full response schema, and live cURL example.