रियल बैकप्रेशर के साथ ब्राउज़र पर Claude को स्ट्रीम करना

LLM टोकन को स्ट्रीम करना 80% तक आसान है। आखिरी 20% वह हिस्सा है जहाँ अधिकांश डेवलपर्स विफल हो जाते हैं। साधारण सेटअप आपके लोकल मशीन पर तो काम करते हैं, लेकिन धीमे कनेक्शन या तेज़ मॉडल्स के साथ टूट जाते हैं।

यदि आप प्रोडक्शन-ग्रेड स्ट्रीमिंग चाहते हैं, तो आपको दो विशिष्ट समस्याओं का समाधान करना होगा।

1. Nginx बफर समस्या (The Nginx Buffer Problem)

कई डेवलपर्स X-Accel-Buffering हेडर को भूल जाते हैं। इसे no पर सेट किए बिना, Nginx आपके स्ट्रीम को बफर कर देता है। जब तक पूरा रिस्पॉन्स खत्म नहीं हो जाता, तब तक आपके यूजर को कुछ भी दिखाई नहीं देता। यह स्ट्रीमिंग के उद्देश्य को ही विफल कर देता है।

2. छोड़ी गई स्ट्रीम की समस्या (The Abandoned Stream Problem)

यह सबसे महंगी गलती है। यदि मॉडल जनरेट कर रहा हो और यूजर टैब बंद कर दे या कनेक्शन टूट जाए, तो सर्वर चलता रहता है। आपका लूप Claude से टोकन खींचता रहता है। आप उस आउटपुट के लिए भुगतान करते हैं जिसे कोई नहीं देख रहा है।

समाधान: एंड-टू-एंड अबॉर्ट्स (The Fix: End-to-End Aborts)

आपको रिक्वेस्ट सिग्नल को Claude स्ट्रीम से जोड़ना होगा। जब क्लाइंट डिस्कनेक्ट हो जाए, तो सर्वर को तुरंत जनरेशन रोक देनी चाहिए।

अपने Next.js रूट में, Anthropic SDK को रिक्वेस्ट सिग्नल पास करें:

  • अपने SDK कॉल में { signal: request.signal } का उपयोग करें।
  • अबॉर्ट सिग्नल के लिए एक इवेंट लिसनर जोड़ें।
  • अबॉर्ट होने पर llm.abort() और controller.close() को कॉल करें।

यह जनरेशन को रोकता है और आपके बिल को बढ़ने से भी बचाता है।

फ्रंटएंड पर (On the Frontend)

ब्राउज़र रैंडम बाउंड्रीज़ पर चंक्स (chunks) प्राप्त करता है। आपको इन चंक्स को बफर करना होगा और उन्हें SSE डेलिमीटर (delimiter) द्वारा विभाजित करना होगा।

  • अपने fetch कॉल में एक AbortController का उपयोग करें।
  • उस कंट्रोलर को अपने React कंपोनेंट में रिटर्न करें।
  • कंपोनेंट क्लीनअप फंक्शन में controller.abort() को कॉल करें।

यह सुनिश्चित करता है कि अबॉर्ट सिग्नल UI से होते हुए सीधे आपके सर्वर तक पहुँचे।

परफॉरमेंस के लिए एक अंतिम टिप: तेज़ मॉडल्स टोकन को DOM के रिपेंट (repaint) होने की गति से भी तेज़ उत्सर्जित (emit) करते हैं। हर एक टोकन के लिए React स्टेट को अपडेट करने से आपका UI लैग (lag) करेगा। टोकन को बफर करें और बैच में अपडेट करें। इससे आपका इंटरफ़ेस स्मूथ रहेगा।

केवल डेमो के लिए स्ट्रीम बनाना बंद करें। पैसे बचाने और मजबूत ऐप्स बनाने के लिए प्रॉक्सी बफरिंग को डिसेबल करें और अबॉर्ट्स को प्रोपेगेट (propagate) करें।

Source: https://dev.to/pavelespitia/streaming-claude-to-the-browser-with-backpressure-that-actually-works-4oaf

Optional learning community: https://t.me/GyaanSetuAi