Création d'une API Claude Streaming prête pour la production avec Next.js Edge Runtime

DEV - 09/02
Chaque didacticiel IA vous montre le streaming OpenAI. Mais si vous construisez avec Claude (Anthropic), le...

Chaque didacticiel IA vous montre le streaming OpenAI. Mais si vous construisez avec Claude (Anthropic), la mise en œuvre est sensiblement différente. Voici comment j'ai créé une API de streaming prête pour la production pour Claude Sonnet à l'aide de Next.js Edge Runtime et des événements envoyés par le serveur.

Le problème

La plupart des exemples de « streaming IA » ressemblent à ceci :

// Style OpenAI (ce que montre chaque tutoriel) const stream = wait openai.chat.completions.create({ model: 'gpt-4', messages, stream: true, }) // ...pipe vers la réponse
Entrer en mode plein écran Quitter le mode plein écran

L'API de Claude est différente. Les SDK Anthropicmessages.stream()renvoie une structure d'événement différente. Vous ne pouvez pas simplement échanger le nom du modèle et vous attendre à ce que cela fonctionne.

Architecture

Client (React) → POST /api/claude/stream → Edge Runtime → SDK Anthropic → SSE → Client
Entrer en mode plein écran Quitter le mode plein écran

Trois décisions clés :

  1. Edge Runtime : déployé à l'échelle mondiale, pas de démarrage à froid, temps système inférieur à 50 ms
  2. Événements envoyés par le serveur — Basé sur HTTP, prise en charge native du navigateur, reconnexion intégrée
  3. Custom ReadableStream — transforme les événements Anthropic SDK au format SSE

Étape 1 : la route de l'API Edge

La route API s'exécute sur Edge Runtime pour un déploiement global à faible latence :

// app/api/claude/stream/route.ts importer Anthropic depuis '@anthropic-ai/sdk' importer { N...
[Courte citation de 8% de l'article original]