Spellcheck API integrieren – JavaScript, Python, Node.js Guide

Voraussetzungen

Für diesen Guide benötigen Sie:

Einen FrameSpell-Account (kostenlos, kein Kreditkarte nötig)
Ihren persönlichen API Key aus dem Dashboard
Eine Laufzeitumgebung Ihrer Wahl: Browser, Node.js, Python, PHP o.ä.

Die API ist unter folgendem Endpunkt erreichbar:

POST https://framespell.pages.dev/api/spellcheck

Schritt 1 – Account & API Key

Klicken Sie auf der Startseite auf Registrieren und legen Sie ein kostenloses Konto an.

Nach der Bestätigung Ihrer E-Mail-Adresse gelangen Sie ins Dashboard.

Navigieren Sie zu API Keys → Key generieren. Der Key wird nur einmal angezeigt – kopieren Sie ihn sofort.

Speichern Sie den Key in einer Umgebungsvariable (.env), niemals direkt im Quellcode.

⚠ Sicherheitshinweis: Verwenden Sie API Keys ausschließlich serverseitig. Niemals in Browser-JavaScript oder Git-Repositories einbetten.

Schritt 2 – Der erste Request

Das Request-Format ist immer identisch: Sie senden einen HTTP POST mit einem JSON-Body und zwei Feldern:

Parameter	Typ	Beschreibung	Pflicht
`text`	string	Der zu korrigierende Text (max. 5.000 Zeichen)	✓
`language`	string	Sprachcode: `de`, `en` (bald), `es` (bald)	✓

JavaScript (Vanilla / Browser)

JavaScript

const response = await fetch(
  'https://framespell.pages.dev/api/spellcheck',
  {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'X-API-Key': process.env.FRAMESPELL_API_KEY  // ← nie hardcoden!
    },
    body: JSON.stringify({
      text: 'Das ist ein Beispeil text mit felern',
      language: 'de'
    })
  }
);

const { success, data, error } = await response.json();

if (success) {
  console.log('Korrigiert:',        data.corrected);
  console.log('Original:',          data.original);
  console.log('Verarbeitungszeit:', data.processing_time, 'ms');
  console.log('Token verbraucht:',  data.tokens_used);
} else {
  console.error('Fehler:', error);
}

Node.js (mit axios)

Node.js

import axios from 'axios';

const { data: result } = await axios.post(
  'https://framespell.pages.dev/api/spellcheck',
  { text: 'Das ist ein Beispeil text mit felern', language: 'de' },
  { headers: { 'X-API-Key': process.env.FRAMESPELL_API_KEY } }
);

if (result.success) {
  console.log(result.data.corrected);
} else {
  throw new Error(result.error);
}

// Installation: npm install axios

Python (mit requests)

Python

import os, requests

API_URL = "https://framespell.pages.dev/api/spellcheck"
API_KEY = os.environ["FRAMESPELL_API_KEY"]

payload  = {"text": "Das ist ein Beispeil text mit felern", "language": "de"}
headers  = {"X-API-Key": API_KEY, "Content-Type": "application/json"}

resp = requests.post(API_URL, json=payload, headers=headers, timeout=10)
resp.raise_for_status()

result = resp.json()
if result["success"]:
    print("Korrigiert:", result["data"]["corrected"])
    print("Zeit (ms):", result["data"]["processing_time"])
else:
    raise RuntimeError(result["error"])

# Installation: pip install requests

PHP

<?php
$apiKey = getenv('FRAMESPELL_API_KEY');
$url    = 'https://framespell.pages.dev/api/spellcheck';
$body   = json_encode(['text' => 'Beispeil text', 'language' => 'de']);

$ch = curl_init($url);
curl_setopt_array($ch, [
    CURLOPT_RETURNTRANSFER => true,
    CURLOPT_POST           => true,
    CURLOPT_POSTFIELDS     => $body,
    CURLOPT_HTTPHEADER     => [
        'Content-Type: application/json',
        'X-API-Key: ' . $apiKey,
    ],
    CURLOPT_TIMEOUT => 10,
]);

$response = json_decode(curl_exec($ch), true);
curl_close($ch);

if ($response['success']) {
    echo $response['data']['corrected'];
} else {
    throw new RuntimeException($response['error']);
}

Schritt 3 – Response verstehen

Jede erfolgreiche Antwort hat die folgende Struktur:

JSON Response

{
  "success": true,
  "data": {
    "corrected":       "Das ist ein Beispieltext mit Fehlern",
    "original":        "Das ist ein Beispeil text mit felern",
    "processing_time": 143.7,   // Millisekunden
    "tokens_used":     8        // Verbrauchte Tokens (für Billing)
  }
}

Im Fehlerfall:

JSON Error

{
  "success":     false,
  "error":       "Rate limit exceeded",
  "retry_after": 12   // Sekunden warten
}

Schritt 4 – Robustes Error Handling

Eine produktionsreife Integration sollte alle relevanten HTTP-Status-Codes behandeln:

HTTP-Code	Bedeutung	Empfohlene Reaktion
`200`	Erfolg	Ergebnis verarbeiten
`400`	Bad Request – ungültiger Body	Request prüfen, kein Retry
`401`	Unauthorized – falscher API Key	Key prüfen, kein Retry
`429`	Rate Limit überschritten	Exponential Backoff + Retry
`500`	Server-Fehler	Einmal nach 2s erneut versuchen
`503`	Service vorübergehend nicht verfügbar	Retry mit Backoff, max. 3×

Retry-Logik in JavaScript

JavaScript

async function spellcheck(text, retries = 3) {
  for (let attempt = 0; attempt < retries; attempt++) {
    const resp = await fetch(API_URL, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json', 'X-API-Key': API_KEY },
      body: JSON.stringify({ text, language: 'de' })
    });

    if (resp.status === 429) {
      const { retry_after = 5 } = await resp.json();
      const waitMs = (retry_after + attempt * 2) * 1000;  // Exponential Backoff
      console.warn(`Rate limited – warte ${waitMs}ms`);
      await new Promise(r => setTimeout(r, waitMs));
      continue;
    }

    if (!resp.ok) throw new Error(`HTTP ${resp.status}`);

    const { success, data, error } = await resp.json();
    if (!success) throw new Error(error);
    return data.corrected;
  }
  throw new Error('Max retries exceeded');
}

Schritt 5 – Batch-Verarbeitung

Für längere Texte oder viele Dokumente empfiehlt sich eine parallele Batch-Verarbeitung. Das folgende Pattern verarbeitet bis zu 5 Requests gleichzeitig, um das Rate Limit nicht zu überschreiten:

JavaScript – Batch mit Concurrency-Limit

async function batchSpellcheck(texts, concurrency = 5) {
  const results = [];
  for (let i = 0; i < texts.length; i += concurrency) {
    const chunk = texts.slice(i, i + concurrency);
    const batch = await Promise.all(chunk.map(t => spellcheck(t)));
    results.push(...batch);
  }
  return results;
}

// Beispiel: 20 Absätze parallel korrigieren
const paragraphs = Array.from({length: 20}, (_, i) => `Absatz ${i} mit fehlerr`);
const corrected  = await batchSpellcheck(paragraphs);
console.log(corrected);

TypeScript-Typdefinitionen

Für TypeScript-Projekte empfehlen wir folgende Interface-Definitionen:

TypeScript

interface SpellcheckRequest {
  text:     string;
  language: 'de' | 'en' | 'es' | 'fr';
}

interface SpellcheckData {
  corrected:       string;
  original:        string;
  processing_time: number;
  tokens_used:     number;
}

interface SpellcheckResponse {
  success:     true;
  data:        SpellcheckData;
}

interface SpellcheckError {
  success:     false;
  error:       string;
  retry_after?: number;
}

type ApiResponse = SpellcheckResponse | SpellcheckError;

async function spellcheck(req: SpellcheckRequest): Promise<SpellcheckData> {
  const resp = await fetch(API_URL, {
    method:  'POST',
    headers: { 'Content-Type': 'application/json', 'X-API-Key': API_KEY },
    body:    JSON.stringify(req),
  });
  const json: ApiResponse = await resp.json();
  if (!json.success) throw new Error(json.error);
  return json.data;
}

Integration in React / Next.js

In Next.js-Projekten empfiehlt sich eine serverseitige Route, damit der API Key nie den Browser erreicht:

Next.js – app/api/spellcheck/route.ts

// app/api/spellcheck/route.ts
import { NextRequest, NextResponse } from 'next/server';

export async function POST(req: NextRequest) {
  const { text } = await req.json();

  const resp = await fetch(
    'https://framespell.pages.dev/api/spellcheck',
    {
      method:  'POST',
      headers: {
        'Content-Type': 'application/json',
        'X-API-Key':    process.env.FRAMESPELL_API_KEY!,
      },
      body: JSON.stringify({ text, language: 'de' }),
    }
  );

  const data = await resp.json();
  return NextResponse.json(data);
}

✅ Best Practice: API-Aufrufe immer über eine Server-Route abstrahieren. So bleibt der Key sicher, und Sie können Caching, Logging und Rate Limiting serverseitig ergänzen.

Umgebungsvariablen richtig verwenden

API Keys gehören in Umgebungsvariablen – nicht in den Quellcode. Hier die wichtigsten Plattformen im Überblick:

Plattform	Variable setzen
Node.js lokal	`FRAMESPELL_API_KEY=xxx node server.js` oder `.env` + dotenv
Vercel	Settings → Environment Variables → `FRAMESPELL_API_KEY`
Netlify	Site Settings → Build & Deploy → Environment
Cloudflare Workers	`wrangler secret put FRAMESPELL_API_KEY`
Docker	`docker run -e FRAMESPELL_API_KEY=xxx ...`
GitHub Actions	Settings → Secrets → Actions → New repository secret

Performance-Optimierung mit Caching

Identische Texte müssen nur einmal korrigiert werden. Ein einfaches In-Memory-Cache reduziert API-Aufrufe drastisch:

Node.js – einfaches Cache

const cache = new Map<string, string>();

async function cachedSpellcheck(text: string): Promise<string> {
  if (cache.has(text)) return cache.get(text)!;

  const data = await spellcheck({ text, language: 'de' });
  cache.set(text, data.corrected);
  return data.corrected;
}

Für produktive Systeme empfehlen sich Redis oder Cloudflare KV als persistentes Cache-Backend.

Monitoring & Logging

Um API-Nutzung und Fehler im Blick zu behalten, loggen Sie jeden Request strukturiert. Ergänzen Sie die API-Antwort um Kontext-Informationen:

Structured Logging

const start = Date.now();
const data  = await spellcheck({ text, language: 'de' });

console.log(JSON.stringify({
  event:          'spellcheck',
  text_length:    text.length,
  tokens_used:    data.tokens_used,
  api_time_ms:    data.processing_time,
  total_time_ms:  Date.now() - start,
  timestamp:      new Date().toISOString(),
}));

Nächste Schritte

Sie haben die API erfolgreich integriert – herzlichen Glückwunsch! Hier sind mögliche nächste Schritte:

🚀

Anwendungsfälle entdecken

CMS, SaaS, Chatbots, EdTech

⚖️

API-Vergleich 2026

FrameSpell vs. LanguageTool vs. OpenAI

💳

Auf Pro upgraden

100 Anfragen/min, alle Sprachen

Nächster Guide →

Anwendungsfälle & Use Cases 🚀