LLM streaming response handler — production SSE streaming UIs with cancellation and error recovery
Construire des interfaces de streaming LLM de qualité production avec les Server-Sent Events — affichage token par token, annulation via AbortController, reprise sur erreur, hooks React, patterns serveur Next.js et checklist de production
- Quoi
- Construire des interfaces de streaming LLM de qualité production avec les Server-Sent Events — affichage token par token, annulation via AbortController, reprise sur erreur, hooks React, patterns serveur Next.js et checklist de production
- Coût
- Gratuit
- Prérequis
- un projet frontend/backend qui appelle une API de streaming LLM (OpenAI, Anthropic ou similaire) — le skill est un guide d'implémentation que l'agent suit, pas un logiciel
- Installation
- Copiez le prompt d’installation ci-dessous dans votre Muse — votre agent fait le reste.
Sélectionné par Skill Harbor — le skill llm-streaming-response-handler de @curiositech : un guide complet pour construire des interfaces de streaming de qualité production pour les réponses LLM qui semblent instantanées. Couvre pourquoi le SSE bat les WebSockets pour le streaming LLM unidirectionnel (simplicité, reconnexion auto, passage des pare-feu), les formats de streaming d'OpenAI/Anthropic/Vercel AI SDK, cinq anti-patterns courants avec correctifs (bufferisation avant affichage, pas d'annulation du stream, pas de reprise sur erreur, fuites mémoire des streams non fermés, pas d'indicateur de frappe), et des patterns d'implémentation prêts à copier — un gestionnaire SSE de base, un hook React useStreaming (content, isStreaming, error, stream, cancel), et une route API Next.js en edge runtime convertissant les streams OpenAI en SSE — plus une checklist de production en 12 points (AbortController, états d'erreur avec retry, indicateur de frappe, nettoyage au démontage, rate limiting, suivi des tokens, fallback de streaming, accessibilité, boutons stop tactiles, reprise réseau, longueur max, estimation de coût). Bémols honnêtes : centré sur le streaming SSE unidirectionnel, pas sur le chat WebSocket bidirectionnel ; les détails d'API (formats d'événements, Vercel AI SDK) peuvent évoluer. Licence MIT. Skill Harbor ne vérifie jamais le code, examinez-le vous-même avant usage. Découvert via skills.sh.
Version :
Installation
Prérequis : un projet frontend/backend qui appelle une API de streaming LLM (OpenAI, Anthropic ou similaire) — le skill est un guide d'implémentation que l'agent suit, pas un logiciel Installe-moi « Gestionnaire de streaming LLM — interfaces de streaming SSE de production avec annulation et reprise sur erreur ». Il donne à mon agent le guide de streaming de @curiositech : choisir le SSE pour le streaming LLM unidirectionnel, implémenter l'affichage token par token (jamais de bufferisation avant affichage), ajouter l'annulation via AbortController, les états d'erreur avec retry, le nettoyage au démontage pour éviter les fuites mémoire, les indicateurs de frappe, et utiliser les patterns prêts à copier — gestionnaire SSE de base, hook React useStreaming, route API Next.js en edge runtime — puis appliquer la checklist de production en 12 points (rate limiting, suivi des tokens, fallback de streaming, accessibilité, cibles tactiles, reprise réseau, longueur max, estimation de coût). Licence MIT. Dépôt : https://github.com/curiositech/some_claude_skills/blob/HEAD/.claude/skills/llm-streaming-response-handler/SKILL.md 1. Récupère le fichier SKILL.md (et les fichiers d'aide éventuels) depuis le chemin du dépôt dans un dossier temporaire et résume en une ou deux phrases ce qu'il fait. 2. Vérification de sécurité : examine le SKILL.md et les scripts pour tout contenu suspect (appels réseau inattendus, commandes shell, collecte d'identifiants). Ce dépôt ne devrait contenir aucun secret en dur. Vérifie que c'est bien le cas ici ; STOP sur tout signal d'alerte et dis-le-moi. 3. Installe-le comme skill : copie le SKILL.md et ses fichiers d'aide dans le répertoire des skills de l'agent, dans un dossier nommé « llm-streaming-response-handler ». 4. Vérifie sans appels réseau : frontmatter valide, fichiers en place. 5. Indique ce qui a été installé, où, et ce qu'il me reste à faire moi-même (p. ex. brancher le hook useStreaming ou le gestionnaire SSE dans mon UI de chat et ma route API ; rien d'autre — c'est une méthodologie). GitHub est optionnel : si j'ai un compte GitHub ou la CLI gh, tu peux l'utiliser ; sinon l'accès public suffit. Ne jamais l'exiger sauf s'il figure dans les prérequis ci-dessus. Règles : ne touche à rien en dehors du dossier temporaire et de la cible d'installation. Si quelque chose semble anormal, arrête-toi et demande-moi.
Questions
Comment installer une création ?
Chaque fiche produit contient un prompt d’installation à copier-coller. Collez-le dans votre Muse et il installe la création pour vous — sans configuration manuelle.
Où va mon argent ?
Directement au vendeur. Skill Harbor ne traite jamais les paiements : le paiement se fait sur la page du vendeur, généralement via Stripe.
Que signifie le ✓ à côté du nom d’un créateur ?
Il signifie que nous avons confirmé l’identité de la personne derrière la fiche. Il ne dit rien sur le code lui-même — vérifiez toujours une création avant de l’installer.