---
title: Beispiele
description: Codeblöcke auf Desktop in einer fixierten rechten Seitenleiste anheften, damit Leser sie beim Scrollen referenzieren können. Unterstützt Sprach-Tabs.
---

> **For AI agents:** the complete documentation index is at [llms.txt](/docs/llms.txt). Append `.md` to any page URL for its markdown version.

Codeblöcke werden auf Desktop in einer fixierten rechten Seitenleiste angeheftet, damit Leser sie beim Scrollen referenzieren können. Auf Mobilgeräten werden sie inline dargestellt.

## RequestExample

Verwenden Sie `RequestExample`, um Code für API-Anfragen anzuzeigen. Mehrere Codeblöcke erzeugen Tab-Ansichten.

<RequestExample>
```bash cURL
curl -X POST https://api.example.com/users \
  -H "Authorization: Bearer $TOKEN" \
  -H "Content-Type: application/json" \
  -d '{"name": "John Doe", "email": "john@example.com"}'
```
</RequestExample>

**Verwendung:**

````mdx
<RequestExample>
```bash cURL
curl -X POST https://api.example.com/users \
  -H "Authorization: Bearer $TOKEN" \
  -H "Content-Type: application/json" \
  -d '{"name": "John Doe", "email": "john@example.com"}'
```
</RequestExample>
````

## ResponseExample

Verwenden Sie `ResponseExample`, um API-Antworten anzuzeigen. Fügen Sie nach dem Sprachbezeichner einen Statuscode und eine Beschreibung ein.

<ResponseExample>
```json 200: Success
{
  "id": "usr_123",
  "name": "John Doe",
  "email": "john@example.com",
  "created_at": "2024-01-15T10:30:00Z"
}
```
</ResponseExample>

**Verwendung:**

````mdx
<ResponseExample>
```json 200: Success
{
  "id": "usr_123",
  "name": "John Doe",
  "email": "john@example.com",
  "created_at": "2024-01-15T10:30:00Z"
}
```
</ResponseExample>
````

Der Statuscode bestimmt die Farbe der Anzeige:
- **Grün** – 2xx-Erfolgscodes
- **Blau** – 3xx-Weiterleitungscodes
- **Bernsteinfarben** – 4xx-Clientfehler
- **Rot** – 5xx-Serverfehler

## Mehrere Programmiersprachen

Fügen Sie mehrere Codeblöcke hinzu, um eine Tab-Oberfläche zu erstellen:

<RequestExample>
```bash cURL
curl -X GET https://api.example.com/users/123 \
  -H "Authorization: Bearer $TOKEN"
```

```python Python
import requests

response = requests.get(
    "https://api.example.com/users/123",
    headers={"Authorization": f"Bearer {TOKEN}"}
)
user = response.json()
```

```javascript JavaScript
const response = await fetch("https://api.example.com/users/123", {
  headers: {
    "Authorization": `Bearer ${TOKEN}`
  }
});
const user = await response.json();
```

```go Go
package main

import (
  "fmt"
  "io"
  "net/http"
)

func main() {
  req, _ := http.NewRequest("GET", "https://api.example.com/users/123", nil)
  req.Header.Set("Authorization", "Bearer TOKEN")

  resp, _ := (&http.Client{}).Do(req)
  defer resp.Body.Close()

  body, _ := io.ReadAll(resp.Body)
  fmt.Println(string(body))
}
```

```ruby Ruby
require 'net/http'
require 'uri'
require 'json'

uri = URI("https://api.example.com/users/123")
http = Net::HTTP.new(uri.host, uri.port)
http.use_ssl = true

request = Net::HTTP::Get.new(uri)
request["Authorization"] = "Bearer TOKEN"

response = http.request(request)
puts JSON.parse(response.body)
```
</RequestExample>

**Verwendung:**

````mdx
<RequestExample>
```bash cURL
curl -X GET https://api.example.com/users/123 \
  -H "Authorization: Bearer $TOKEN"
```

```python Python
import requests

response = requests.get(
    "https://api.example.com/users/123",
    headers={"Authorization": f"Bearer {TOKEN}"}
)
user = response.json()
```

```javascript JavaScript
const response = await fetch("https://api.example.com/users/123", {
  headers: {
    "Authorization": `Bearer ${TOKEN}`
  }
});
const user = await response.json();
```

```go Go
package main

import (
  "fmt"
  "io"
  "net/http"
)

func main() {
  req, _ := http.NewRequest("GET", "https://api.example.com/users/123", nil)
  req.Header.Set("Authorization", "Bearer TOKEN")

  resp, _ := (&http.Client{}).Do(req)
  defer resp.Body.Close()

  body, _ := io.ReadAll(resp.Body)
  fmt.Println(string(body))
}
```

```ruby Ruby
require 'net/http'
require 'uri'
require 'json'

uri = URI("https://api.example.com/users/123")
http = Net::HTTP.new(uri.host, uri.port)
http.use_ssl = true

request = Net::HTTP::Get.new(uri)
request["Authorization"] = "Bearer TOKEN"

response = http.request(request)
puts JSON.parse(response.body)
```
</RequestExample>
````

## Mehrere Antwortcodes

Zeigen Sie verschiedene Antwortszenarien in separaten Tabs an:

<ResponseExample>
```json 200: Success
{
  "id": "usr_123",
  "name": "John Doe",
  "email": "john@example.com"
}
```

```json 400: Bad Request
{
  "error": "validation_error",
  "message": "Email is required"
}
```

```json 404: Not Found
{
  "error": "not_found",
  "message": "User not found"
}
```
</ResponseExample>

**Verwendung:**

````mdx
<ResponseExample>
```json 200: Success
{
  "id": "usr_123",
  "name": "John Doe",
  "email": "john@example.com"
}
```

```json 400: Bad Request
{
  "error": "validation_error",
  "message": "Email is required"
}
```

```json 404: Not Found
{
  "error": "not_found",
  "message": "User not found"
}
```
</ResponseExample>
````

## Kombinierte Verwendung

Verwenden Sie für API-Dokumentation beide Komponenten zusammen. Die Anfrage wird in der Seitenleiste über der Antwort angezeigt:

<RequestExample>
```bash cURL
curl -X POST https://api.example.com/orders \
  -H "Authorization: Bearer $TOKEN" \
  -H "Content-Type: application/json" \
  -d '{
    "product_id": "prod_456",
    "quantity": 2
  }'
```
</RequestExample>

<ResponseExample>
```json 201: Created
{
  "id": "ord_789",
  "product_id": "prod_456",
  "quantity": 2,
  "status": "pending",
  "created_at": "2024-01-15T10:30:00Z"
}
```
</ResponseExample>

**Verwendung:**

````mdx
<RequestExample>
```bash cURL
curl -X POST https://api.example.com/orders \
  -H "Authorization: Bearer $TOKEN" \
  -H "Content-Type: application/json" \
  -d '{
    "product_id": "prod_456",
    "quantity": 2
  }'
```
</RequestExample>

<ResponseExample>
```json 201: Created
{
  "id": "ord_789",
  "product_id": "prod_456",
  "quantity": 2,
  "status": "pending",
  "created_at": "2024-01-15T10:30:00Z"
}
```
</ResponseExample>
````

## Formate für Statuscodes

`ResponseExample` unterstützt zwei Formate für Statuscodes:

```mdx
```json 200: Success      // Colon separator
```json 400 - Bad Request // Dash separator
```

Beide Formate werden identisch verarbeitet und zeigen den Statuscode mit seiner Beschreibung im Tab an.

## Wie geht es weiter?

<Columns cols={2}>
  <Card title="Komponentenübersicht" icon="puzzle-piece" href="/de/components/overview">
    Alle verfügbaren Komponenten durchsuchen
  </Card>
  <Card title="MDX-Grundlagen" icon="file-code" href="/de/content/mdx-basics">
    Erfahren Sie, wie Sie Komponenten in MDX verwenden
  </Card>
  <Card title="API-Beispiele" icon="code" href="/de/api-reference/request-response-examples">
    Sehen Sie eine vollständige Anfrage-/Antwortseite in Aktion
  </Card>
  <Card title="OpenAPI-Unterstützung" icon="plug" href="/de/api-reference/openapi-example">
    API-Dokumentation automatisch aus OpenAPI-Spezifikationen generieren
  </Card>
</Columns>

```