Dein Frontend. Strukturierte Inhalte dahinter.

Dein Weg zur ersten Integration

Der API Explorer liest veröffentlichte Inhalte. Zum Ausführen brauchst du die Berechtigung zur Verwaltung von API-Schlüsseln. Sein temporärer Zugang gilt eine Stunde und wird nicht in kopierten Code übernommen. Die öffentliche Referenz ist lesbar, ihr CMS-Space ist kein allgemein zugänglicher Testaccount.

Mit einem leeren Projekt starten

1. Öffne deinen Space im CMS und wähle die Umgebung für dein Projekt. Für diesen Einstieg brauchst du Rechte zum Verwalten von Inhaltstypen, Veröffentlichen und Erstellen von API-Schlüsseln.
2. Lege unter Content Types den Typ article an. Ergänze ein Textfeld title und speichere den Inhaltstyp.
3. Erstelle unter Content einen Datensatz dieses Typs mit dem Titel Hallo Welt. Veröffentliche ihn in einer aktiven Inhaltssprache deines Spaces. Die Sprache der Website ist davon unabhängig.

Danach erstellst du den Delivery-Schlüssel und führst dieselbe Leseabfrage über REST und GraphQL aus. Es sind weder ein Framework noch eine KI-Generierung nötig.

Vom Inhalt zur API-Antwort

Ändere Sprache und Seite. Code und Beispiel-Antwort passen sich sofort an. Dies ist eine lokale Demonstration mit erfundenen Daten; es wird keine API aufgerufen.

REST liefert ohne locale die Sprachwerte eines Felds. Mit locale erhältst du eine flache Projektion. GraphQL nutzt dafür das JSON-Feld hydrated; dessen Inhalte sind keine einzeln auswählbaren GraphQL-Felder.

curl --get \
  'https://www.smartcms.ai/api/content/v1/environments/'"$SMARTCMS_ENVIRONMENT_ID"'/content' \
  --data-urlencode 'limit=10' \
  --data-urlencode 'skip=0' \
  --header "Authorization: Bearer $SMARTCMS_DELIVERY_TOKEN"

interface DeliveryContentResponse {
  items: Array<{
    id: string;
    contentTypeId: string;
    status: string;
    data: Record<string, unknown>;
  }>;
  total: number;
  limit: number;
  skip: number;
}

const res = await fetch(
  `https://www.smartcms.ai/api/content/v1/environments/${process.env.SMARTCMS_ENVIRONMENT_ID}/content?limit=10&skip=0`,
  {
    headers: {
      Authorization: `Bearer ${process.env.SMARTCMS_DELIVERY_TOKEN}`,
    },
  }
);

if (!res.ok) {
  throw new Error(`smartcms delivery request failed: ${res.status}`);
}

const { items, total }: DeliveryContentResponse = await res.json();

curl "https://www.smartcms.ai/api/content/v1/spaces/$SMARTCMS_SPACE_ID/environments/$SMARTCMS_ENVIRONMENT_ID/graphql" \
  --header "Authorization: Bearer $SMARTCMS_DELIVERY_TOKEN" \
  --header "Content-Type: application/json" \
  --data '{"query":"query { contentRecords(limit: 10, skip: 0) { id contentTypeId status hydrated } }"}'

{
  "items": [
    {
      "id": "example-1",
      "contentTypeId": "example-content-type-id",
      "status": "published",
      "data": {
        "title": {
          "de-DE": "Hallo Welt",
          "it-IT": "Ciao mondo",
          "en-US": "Hello world"
        }
      }
    }
  ],
  "total": 42,
  "limit": 10,
  "skip": 0
}

Echte Antworten aus Berg & Tal

Diese Auszüge stammen aus erfolgreichen Delivery-Abfragen des öffentlichen, fiktiven Alpenlicht-Projekts. REST und GraphQL liefern dieselben IDs und Inhaltswerte.

Aufgenommen am 2026-09-17. Gespeicherte Momentaufnahme, keine Live-Abfrage. Gekürzt auf einen Datensatz sowie IDs, Titel, Kurzbeschreibung und Slug. total, limit und skip stammen aus der ursprünglichen REST-Liste. Die Seitenauswahl im simulierten Beispiel oben verändert diesen Auszug nicht.

{
  "items": [
    {
      "id": "cmu4fkt0700269ja8peyvpeeh",
      "contentTypeId": "cmu4fkrs3000l9ja81bqr53iw",
      "data": {
        "title": "Alpenlicht — Gastlichkeit neu erzählt",
        "summary": "Ein fiktives Boutiquehotel erhält eine ruhige Identität und eine zweisprachige Website.",
        "slug": "alpenlicht"
      }
    }
  ],
  "total": 9,
  "limit": 100,
  "skip": 0
}

{
  "data": {
    "contentRecords": [
      {
        "id": "cmu4fkt0700269ja8peyvpeeh",
        "contentTypeId": "cmu4fkrs3000l9ja81bqr53iw",
        "hydrated": {
          "title": "Alpenlicht — Gastlichkeit neu erzählt",
          "summary": "Ein fiktives Boutiquehotel erhält eine ruhige Identität und eine zweisprachige Website.",
          "slug": "alpenlicht"
        }
      }
    ]
  }
}

Für aktuelle Antworten deiner eigenen Inhalte öffne den API Explorer im CMS. Die IDs hier gehören zur Referenz und sind keine Zugangsdaten für deinen Space.

Inhalte mit GraphQL abfragen

GraphQL ist eine Alternative zur REST-API. Du wählst in einer Query die benötigten Datensatzfelder aus, etwa id, contentTypeId und hydrated. Beide APIs lesen dieselben veröffentlichten Inhalte mit deinem Delivery-Schlüssel.

Endpoint und Authentifizierung

POST https://www.smartcms.ai/api/content/v1/spaces/{spaceId}/environments/{environmentId}/graphql
Authorization: Bearer <delivery-token>
Content-Type: application/json

Ersetze die Platzhalter durch deine Space-ID, Environment-ID und deinen Schlüssel. Sende die Query als JSON-Body mit dem Feld query. Das interaktive GraphQL-Beispiel übernimmt dieses Format für dich.

Eine erste Query

query {
  contentRecords(limit: 5, skip: 0, locale: "en-US") {
    id
    contentTypeId
    hydrated(locale: "en-US")
  }
}

Die Antwort enthält die Liste unter data.contentRecords. hydrated liefert die Inhaltsfelder als JSON in der gewünschten Sprache. Eigene Felder wie title sind darin enthalten; sie lassen sich nicht als Unterfelder von hydrated auswählen. Mit limit und skip blätterst du durch die Ergebnisse. Prüfe auch bei HTTP 200 das Feld errors in der Antwort.

Für den direkten REST-/GraphQL-Vergleich nutze den API Explorer im rechten CMS-Bereich. Im GraphQL Playground kannst du zusätzlich das Schema erkunden und eigene Queries ausführen. Zum Erstellen des temporären Playground-Schlüssels benötigst du die Berechtigung zur Verwaltung von API-Schlüsseln.

Mit deinen Inhalten weiterarbeiten

Setze SMARTCMS_ENVIRONMENT_ID und SMARTCMS_DELIVERY_TOKEN in deiner Shell (cURL) oder in der Server-Umgebung (TypeScript). GraphQL benötigt zusätzlich SMARTCMS_SPACE_ID. Das TypeScript-Beispiel läuft serverseitig, etwa in Node.js oder einer Next.js Server Component.

Für echte Abfragen: Öffne deinen Space, wähle eine Umgebung und öffne rechts den API Explorer · REST / GraphQL. Er zeigt die Anfrage, echte Antwort und kopierbaren Code für dieselbe Auswahl. Bei REST filterst du mit content_type nach dem Content-Type-Namen; GraphQL verwendet contentTypeId mit der internen ID.

Einmal einrichten, beide APIs testen

Ersetze diese drei Platzhalter und führe die Zeilen in deinem Terminal aus (macOS/Linux, bash/zsh). Verwende einen Delivery-Schlüssel, der nur die gewünschte Umgebung lesen darf. Die Werte werden ausschließlich lokal gesetzt.

export SMARTCMS_SPACE_ID='<your-space-id>'
export SMARTCMS_ENVIRONMENT_ID='<your-environment-id>'
export SMARTCMS_DELIVERY_TOKEN='<your-delivery-token>'

Lade das Node.js-Beispiel herunter und führe es im Download-Verzeichnis aus. Es benötigt Node.js 18 oder neuer und keine Pakete. Ersetze de-DE durch die Sprache, in der du deinen Datensatz veröffentlicht hast. Es liest echte Inhalte und verändert nichts.

node smartcms-delivery.mjs rest de-DE
node smartcms-delivery.mjs graphql de-DE

Vergleiche die IDs: In deinem neuen Projekt enthalten beide Antworten den veröffentlichten Datensatz. Beide Beispiele lesen höchstens zehn Einträge; größere Bestände benötigen Pagination. REST liefert die Felder unter items[].data, GraphQL unter data.contentRecords[].hydrated. Die Reihenfolge ist kein Vergleichskriterium. Ein leeres Ergebnis wird erklärt; HTTP-Fehler und GraphQL-errors führen zu einem Fehlerstatus im Terminal.

Sprachen, Entwürfe und Fallback verstehen

Die Oberfläche und deine Inhalte haben getrennte Sprachen. Veröffentliche den Datensatz in der gewünschten Inhaltssprache und übergib deren Code als locale. REST verwendet ohne locale rohe Sprachwerte; GraphQL hydrated verwendet ohne locale die Standardsprache des Datensatzes. Ein fehlender Feldwert kann über den konfigurierten Fallback ersetzt werden. Das ist keine automatische Übersetzung.

In Berg & Tal fehlt Talmarkt absichtlich auf Italienisch: Die Referenz zeigt den deutschen Ersatztext. Ein gespeicherter neuer Entwurf verändert die veröffentlichte Fassung erst beim erneuten Veröffentlichen.

Wenn die erste Abfrage nicht klappt