मैंने Claude के नए जेनरेटिव UI इंटरैक्शन को रेप्लिकेट किया!

Anthropic ने हाल ही में Claude में एक नया जनरेटिव UI इंटरैक्शन लॉन्च किया है। यह आपको चैट स्ट्रीम के भीतर अवधारणाओं और जानकारी को दृश्य रूप से पेश करने में मदद करता है, जिससे इसे सादे टेक्स्ट की तुलना में समझना बहुत आसान हो जाता है। !Image मैं भी इसी तरह के समाधानों पर विचार कर रहा था, और जब Claude ने अपना समाधान जारी किया, तो मुझे लगा कि मुझे अपने काम की गति बढ़ानी होगी। साथ ही, मैं संदर्भ के लिए उनके दृष्टिकोण को रिवर्स-इंजीनियर भी कर सकता था। दो दिनों तक Codex और Claude को गहनता से प्रॉम्प्ट करने के बाद, मैंने वास्तव में इसे कर दिखाया! !https://pbs.twimg.com/amplify_video_thumb/2033112086713364480/img/EUmHCjsTK7tfnToZ.jpg यह सुविधा AI को स्ट्रीमिंग आउटपुट के साथ सीधे चैट में इंटरैक्टिव चार्ट बनाने की अनुमति देती है, जो जनरेट होते ही रेंडर हो जाता है। पहले, जब AI से कोई वेबपेज लिखने के लिए कहा जाता था, तो रेंडर होने से पहले पूरे कोड के जनरेट होने का इंतजार करना पड़ता था, जिसमें बहुत समय लगता था। अब यह अलग है। आप कैनवास पर स्ट्रोक दर स्ट्रोक चार्ट बनते हुए देख सकते हैं, जिसमें SVG नोड्स एक के बाद एक दिखाई देते हैं। जनरेशन प्रक्रिया स्वयं अद्भुत है, और पूरा होने के तुरंत बाद यह इंटरैक्टिव हो जाता है। इसे सीधे मेरे Agent उत्पाद, Code Pilot में अनुभव करें: https://github.com/op7418/CodePilot इस पोस्ट में, मैं इसके उपयोग, विशिष्ट कार्यान्वयन प्रक्रिया और कुछ सावधानियों के बारे में बताऊंगा। ## कुछ मजेदार उपयोग के मामले क्या हैं? डेटा विश्लेषण: आखिरकार, संख्याएँ समझ में आती हैं उदाहरण के लिए, इसे "अमेरिका-ईरान संघर्ष की दैनिक लागत का अनुमान" के लिए एक चार्ट बनाने के लिए कहें। पहले, AI आपको टेक्स्ट का एक ढेर देता था जहाँ संख्यात्मक संबंधों को देखना मुश्किल होता था। अब, यह सीधे एक चार्ट जनरेट करता है, जिससे प्रत्येक भाग की राशि स्पष्ट रूप से दिखाई देती है। टेक्स्ट और चार्ट एक साथ आउटपुट होते हैं, जहाँ आवश्यकता हो वहाँ समझाते हैं और जहाँ आवश्यकता हो वहाँ चित्र बनाते हैं। !Image छोटे उपकरण: एक इंटरैक्टिव कैलकुलेटर या ऐसा ही कुछ बनाएँ इसे एक चक्रवृद्धि ब्याज कैलकुलेटर बनाने के लिए कहें। प्रारंभिक राशि या निवेश के वर्षों को बदलने के लिए स्लाइडर्स को खींचें, और नीचे के चार्ट और संख्याएँ रीयल-टाइम में अपडेट होती हैं। यह एक स्थिर छवि नहीं है; यह एक वास्तविक इंटरैक्टिव उपकरण है। ऋण गणना, इकाई रूपांतरण और इसी तरह की चीजें सभी की जा सकती हैं। !Image आर्किटेक्चर आरेख: एक प्रोग्रामर का पसंदीदा आप इसे किसी प्रोजेक्ट का आर्किटेक्चर बनाने या किसी कार्यान्वयन योजना को विज़ुअलाइज़ करने में मदद करने के लिए कह सकते हैं। उदाहरण के लिए, यहाँ मैंने इसे API से JWT प्रमाणीकरण तक का पूरा प्रवाह बनाने के लिए कहा। सुविधा तुलना, फ़्लोचार्ट और पदानुक्रमित संरचनाएँ सभी ग्राफिकल हैं, जो टेक्स्ट विवरण पढ़ने की तुलना में आर्किटेक्चर को समझने में बहुत तेज़ बनाती हैं। !Image ऑनलाइन डेटा का विश्लेषण करें खेलने का एक और तरीका यह है कि इसमें एक GitHub रिपॉजिटरी लिंक डालें; यह डेटा को क्रॉल करेगा और एक दृश्य विश्लेषण करेगा। उदाहरण के लिए, मैंने इसे अपना प्रोजेक्ट पता, CodePilot, विश्लेषण के लिए भेजा। स्टार्स, फोर्क्स, टेक स्टैक, आर्किटेक्चर डिज़ाइन और कोर मॉड्यूल सभी को चार्ट में बनाया गया है। आप एक नज़र में प्रोजेक्ट की पूरी तस्वीर देख सकते हैं, जो एक लंबा टेक्स्ट पढ़ने से कहीं बेहतर है। !Image इंटरैक्टिव और गहन स्पष्टीकरण सबसे मजबूत हिस्सा मॉडल के साथ इसका घनिष्ठ एकीकरण है; यह केवल एक बार का आउटपुट नहीं है। आप जनरेट किए गए आरेखों के साथ बातचीत कर सकते हैं और अधिक विस्तृत स्पष्टीकरण मांग सकते हैं। उदाहरण के लिए, यहाँ मैंने इसे मानसून और समुद्री धाराओं के बीच संबंध समझाने के लिए कहा। !Image यदि हम और अधिक जानना चाहते हैं, तो हम समुद्री धारा तंत्र के लिए बटन पर क्लिक कर सकते हैं। यह स्वचालित रूप से वर्तमान मॉडल को समुद्री धारा तंत्र का एक आरेख जनरेट करना जारी रखने का आदेश भेजेगा। !Image बेशक, हम अधिक जटिल इंटरैक्शन कर सकते हैं, जैसे कि सामान्य भौतिकी और गणित के सूत्रों को विज़ुअलाइज़ करना। यह छात्रों के लिए बहुत उपयोगी है; प्रत्येक पैरामीटर को स्लाइडर्स और इनपुट के माध्यम से नियंत्रित किया जा सकता है, और एनिमेशन तुरंत बदल जाता है। !Image चीनी मॉडलों के लिए समर्थन CodePilot में एक बार लागू होने के बाद, यह केवल Claude के लिए नहीं है। Kimi K2.5, Minimax M2.5, और Anthropic के मूल मॉडल सभी इसे अच्छी तरह से चलाते हैं। मुझे लगता है कि K2.5 द्वारा बनाए गए ग्राफिक्स Sonnet 3.5 से भी बेहतर दिखते हैं, और आर्किटेक्चर विश्लेषण बहुत विस्तृत है। यदि आप इस सुविधा का उपयोग करते हैं, तो मैं पहले K2.5 आज़माने की सलाह देता हूँ। ठीक है, मॉडल प्रदर्शनों के लिए मूल रूप से यही है। यदि आपको इस बात की परवाह नहीं है कि इसे कैसे लागू किया गया है, तो आप बस CodePilot इंस्टॉल कर सकते हैं और मज़ा ले सकते हैं। ## इसे कैसे लागू किया गया? !Image Claude इसे कैसे करता है Claude.ai आधिकारिक तौर पर tool_use तंत्र का उपयोग करता है। मॉडल संरचित विजेट सामग्री को आउटपुट करने के लिए एक समर्पित टूल को कॉल करता है, और फ्रंटएंड रेंडर करने के लिए टूल कॉल के इनपुट पैरामीटर को पार्स करता है। यह समाधान Claude.ai के अपने आर्किटेक्चर के तहत ठीक काम करता है। लेकिन यह CodePilot के लिए तीन कारणों से काम नहीं करता है: पहला, SDK सीमाएँ। CodePilot, Claude Agent SDK के claude_code प्रीसेट मोड का उपयोग करता है, जो कस्टम टूल पंजीकृत करने की अनुमति नहीं देता है। SDK एक टेक्स्ट डेल्टा स्ट्रीम को उजागर करता है, इसलिए इसे टूल स्तर पर विस्तारित नहीं किया जा सकता है। दूसरा, स्ट्रीमिंग अनुभव। tool_use के परिणामों को input_json_delta समाप्त होने तक प्रतीक्षा करनी पड़ती है, और यह वृद्धिशील HTML रेंडरिंग का समर्थन नहीं करता है। कोड फेंस के साथ, HTML टेक्स्ट स्ट्रीम के साथ आता है, जिससे जनरेट करते समय रेंडरिंग की अनुमति मिलती है। तीसरा, रेंडरिंग अलगाव। Claude.ai अलगाव के लिए Shadow DOM का उपयोग करता है। हमने एक सैंडबॉक्स iframe चुना। Iframe अलगाव अधिक गहन है—एक पूरी तरह से स्वतंत्र JS निष्पादन वातावरण, CSP सटीक रूप से संसाधन लोडिंग को नियंत्रित करता है, और कोई स्टाइल लीकेज या स्क्रिप्ट एस्केप नहीं है। हमने यह कैसे किया ट्रिगर: कोड फेंस मॉडल रेंडरिंग को ट्रिगर करने के लिए एक विशेष Markdown कोड फेंस आउटपुट करता है: ``show-widget {"title":"training_flow","widget_code":"<svg width=\"100%\" viewBox=\"0 0 680 400\">...</svg>"} ` यह प्रारूप CodePilot के मौजूदा कोड फेंस मोड (image-gen-request, batch-plan, आदि) का पुन: उपयोग करता है, जिसे फ्रंटएंड पार्सर श्रृंखला स्वाभाविक रूप से समर्थन करती है। ![Image](https://pbs.twimg.com/media/HDcR5dyasAAtwTN?format=jpg&name=small) **रेंडरिंग: सैंडबॉक्स Iframe** प्रत्येक विजेट को sandbox="allow-scripts" के साथ एक iframe में रेंडर किया जाता है। iframe का srcdoc एक सावधानीपूर्वक निर्मित रिसीवर पेज है। CSP नीति केवल 4 CDN डोमेन से बाहरी स्क्रिप्ट की अनुमति देती है, और connect-src 'none' सभी नेटवर्क अनुरोधों को प्रतिबंधित करता है। सामग्री अपडेट postMessage के माध्यम से प्राप्त होते हैं। स्ट्रीमिंग पूर्वावलोकन चरण के दौरान, widget:update स्क्रिप्ट निष्पादित किए बिना भेजा जाता है। अंतिम रेंडरिंग widget:finalize भेजता है, जो स्क्रिप्ट निष्पादित करता है। एक ResizeObserver सामग्री की ऊंचाई में परिवर्तनों की निगरानी करता है और उन्हें postMessage के माध्यम से पैरेंट पेज पर रिपोर्ट करता है। सभी <a> क्लिक को इंटरसेप्ट किया जाता है और एक नई विंडो में खोलने के लिए पैरेंट पेज पर अग्रेषित किया जाता है। थीम सिंक्रोनाइज़ेशन डार्क/लाइट मोड के बीच रीयल-टाइम में स्विच करने के लिए पैरेंट पेज पर क्लास परिवर्तनों की निगरानी पर निर्भर करता है। ![Image](https://pbs.twimg.com/media/HDcR8ilbgAATB-8?format=jpg&name=small) **CSS वेरिएबल ब्रिजिंग** यह विजेट को ऐप के साथ दृश्य रूप से मिश्रित करने की कुंजी है। CodePilot OKLCH कलर स्पेस में CSS वेरिएबल का उपयोग करता है। Anthropic के विजेट डिज़ाइन दिशानिर्देश --color-background-primary जैसे मानक वेरिएबल नामों का उपयोग करते हैं। ब्रिजिंग परत CodePilot के वेरिएबल मानों को iframe के :root में इंजेक्ट करती है जब यह आरंभ होता है। दिशानिर्देशों के अनुसार मॉडल द्वारा लिखा गया CSS सीधे वर्तमान थीम के रंगों का उपयोग कर सकता है। डार्क मोड पर स्विच करते समय, पैरेंट पेज क्लास परिवर्तन का पता लगाता है, वेरिएबल मानों की पुनर्गणना करता है, और उन्हें iframe में धकेलता है। ![Image](https://pbs.twimg.com/media/HDcR_fLaYAAL88P?format=jpg&name=small) **स्ट्रीमिंग रेंडरिंग** यह पूरे कार्यान्वयन का सबसे जटिल हिस्सा है। मॉडल टोकन दर टोकन जनरेट करता है। किसी भी क्षण, प्राप्त विजेट कोड अधूरा JSON, अधूरा HTML, या एक अधूरा <script> टैग हो सकता है। प्रसंस्करण प्रवाह इस प्रकार है: Regex show-widget से मेल खाता है ताकि "अनक्लोज्ड" और "क्लोज्ड" स्थितियों के बीच अंतर किया जा सके। "widget_code":" के बाद की सामग्री को मैन्युअल रूप से ढूंढें और इसे कैरेक्टर दर कैरेक्टर अनएस्केप करें। JSON.parse का उपयोग नहीं किया जा सकता क्योंकि JSON अभी समाप्त नहीं हुआ है। जब एक अनक्लोज्ड <script> टैग का पता चलता है, तो JavaScript कोड को दृश्य टेक्स्ट के रूप में प्रदर्शित होने से रोकने के लिए <script से पहले ट्रंकेट करें। एक 120ms डिबाउंस iframe को बहुत बार अपडेट होने से रोकता है। स्ट्रीमिंग सामग्री सभी स्क्रिप्ट और इवेंट हैंडलर को हटा देती है; पूर्वावलोकन चरण के दौरान इंटरैक्शन की आवश्यकता नहीं है। ![Image](https://pbs.twimg.com/media/HDcSDCGb0AAwY7J?format=jpg&name=small) **अनुभव को निखारना: वे विवरण जिन पर ध्यान नहीं जाना चाहिए** कोड या कार्यान्वयन के दृष्टिकोण से, यह उतना जटिल नहीं है; जटिलता अनुभव को निखारने में है। ऐसे बहुत से स्थान हैं जो अनुभव को प्रभावित कर सकते हैं, और उपयोगकर्ताओं को उन विवरणों और जनरेशन प्रक्रिया पर ध्यान नहीं देना चाहिए। इसके लिए प्रत्येक चरण को अलग-अलग तरीके से संभालने की आवश्यकता होती है: 1. वे विवरण जो स्ट्रीमिंग की तरह नहीं दिखते 2. वह सामग्री जो दिखाई नहीं देनी चाहिए ![Image](https://pbs.twimg.com/media/HDcSKQLaEAABilZ?format=jpg&name=small) **टेक्स्ट का गायब होना** मॉडल पहले एक परिचयात्मक टेक्स्ट आउटपुट करता है ("मुझे दृश्य रूप से समझाने दें..."), फिर विजेट फेंस शुरू करता है। जैसे ही फेंस दिखाई देता है, पिछला टेक्स्ट अचानक गायब हो जाता है और विजेट के रेंडरिंग समाप्त होने के बाद ही वापस आता है। इसका कारण यह है कि parseAllShowWidgets() सादे टेक्स्ट के लिए एक खाली सरणी लौटाता है। जब फेंस अभी दिखाई देता है लेकिन बंद नहीं हुआ है, तो फेंस से पहले का टेक्स्ट इस फ़ंक्शन में पास हो जाता है और हटा दिया जाता है। फिक्स: जब फेंस से पहले के टेक्स्ट में कोई पूर्ण विजेट फेंस नहीं है, तो इसे पार्सिंग फ़ंक्शन को बायपास करते हुए सीधे <MessageResponse> के रूप में रेंडर करें। **ऊंचाई में उछाल** जिस क्षण विजेट रेंडरिंग समाप्त करता है, पूरा चैट क्षेत्र हिल जाता है। iframe की प्रारंभिक ऊंचाई 0px है। जब सामग्री पहली बार अपनी वास्तविक ऊंचाई की रिपोर्ट करती है, तो यह 400px+ हो सकती है, और एक CSS ट्रांज़िशन इस परिवर्तन को 300ms में होने देता है, जिसके परिणामस्वरूप एक ध्यान देने योग्य उछाल आता है। फिक्स: पहली ऊंचाई रिपोर्ट के दौरान अस्थायी रूप से CSS ट्रांज़िशन को अक्षम करें ताकि ऊंचाई तुरंत अपनी जगह पर आ जाए। बाद के ऊंचाई समायोजन स्मूथ ट्रांज़िशन का उपयोग करते हैं। **फाइनलाइज़ फ्लिकरिंग** जब विजेट स्ट्रीमिंग पूर्वावलोकन से अंतिम रेंडरिंग पर स्विच करता है, तो सामग्री फ्लैश होती है। रिसीवर iframe फाइनलाइज़ेशन के दौरान root.innerHTML = html के साथ पूरे DOM को बदल देता है। भले ही नई और पुरानी सामग्री समान हो (शुद्ध SVG विजेट), ब्राउज़र रीपेंट का एक फ्रेम ट्रिगर करता है। फिक्स: फाइनलाइज़ेशन के दौरान, पहले नए HTML को एक अस्थायी कंटेनर में पार्स करें और स्क्रिप्ट तत्वों को अलग करें। विज़ुअल HTML (स्क्रिप्ट के बिना) की वर्तमान DOM से तुलना करें—यदि वे समान हैं, तो innerHTML प्रतिस्थापन को छोड़ दें और निष्पादन के लिए केवल स्क्रिप्ट संलग्न करें। शुद्ध SVG विजेट शून्य-रीपेंट फाइनलाइज़ेशन प्राप्त करते हैं। **स्क्रॉल जंपिंग** चैट स्वचालित रूप से नीचे की ओर स्क्रॉल कर रही है, फिर अचानक कई सौ पिक्सेल पीछे कूद जाती है और फिर से वापस कूद जाती है। जब स्ट्रीमिंग समाप्त होती है, तो StreamingMessage घटक अनमाउंट हो जाता है और MessageItem घटक माउंट हो जाता है। ये दो पूरी तरह से अलग React घटक हैं, और आंतरिक WidgetRenderer नष्ट और पुनर्निर्मित हो जाता है। नए इंस्टेंस की iframe ऊंचाई 0 से शुरू होती है, जिससे सामग्री क्षेत्र की ऊंचाई तेजी से गिरती है, जो use-stick-to-bottom में स्क्रॉल समायोजन को ट्रिगर करती है। फिक्स: मॉड्यूल-स्तरीय ऊंचाई कैशिंग। जब भी कोई विजेट अपनी ऊंचाई की रिपोर्ट करता है, तो इसे widgetCode के पहले 200 वर्णों को कुंजी के रूप में उपयोग करके एक कैश में लिखा जाता है। नया WidgetRenderer इंस्टेंस useState आरंभीकरण के दौरान कैश से ऊंचाई पढ़ता है, इसलिए iframe सही ऊंचाई पर रेंडरिंग शुरू करता है, जिससे 0→वास्तविक संक्रमण समाप्त हो जाता है। **स्क्रिप्ट कोड लीकेज** जब Chart.js के साथ एक विजेट लोड होता है, तो JavaScript कोड का एक बड़ा ब्लॉक नीचे प्रदर्शित होता है। मॉडल द्वारा आउटपुट किए गए <script> टैग कैरेक्टर दर कैरेक्टर आते हैं। जब ओपनिंग टैग आता है लेकिन क्लोजिंग टैग नहीं आया है, तो sanitizeForStreaming ओपनिंग टैग को हटा देता है, लेकिन अंदर का JavaScript कोड एक नंगे टेक्स्ट नोड बन जाता है जो दृश्य सामग्री के रूप में रेंडर होता है। फिक्स: StreamingMessage में आंशिक कोड निकालने के बाद, जांचें कि क्या अंतिम <script में मेल खाने वाला </script> है। यदि नहीं, तो <script स्थान पर ट्रंकेट करें। विजेट दिशानिर्देश निर्दिष्ट करते हैं कि स्क्रिप्ट अंत में जाती हैं, इसलिए ट्रंकेशन दृश्य सामग्री को प्रभावित नहीं करता है। ट्रंकेशन के दौरान, एक शिमर मास्क दिखाया जाता है, और स्टेटस बार "विज़ुअलाइज़ेशन में इंटरैक्टिव एनिमेशन जोड़ रहा है" प्रदर्शित करता है। **Iframe Ready रेस कंडीशन** दुर्लभ मामलों में, विजेट बिल्कुल भी रेंडर नहीं होता है, 0px ऊंचाई पर रहता है। WidgetRenderer useEffect के माध्यम से एक संदेश इवेंट लिसनर पंजीकृत करता है। हालांकि, iframe का रिसीवर स्क्रिप्ट लोड होते ही widget:ready भेजता है। यदि iframe React प्रभाव के निष्पादित होने से तेजी से लोड होता है, तो widget:ready लिसनर के पंजीकृत होने से पहले भेजा जाता है, और iframeReady कभी भी सही नहीं होता है। फिक्स: फॉलबैक के रूप में iframe तत्व में एक onLoad कॉलबैक जोड़ें। जब onLoad ट्रिगर होता है, तो रिसीवर स्क्रिप्ट ने निष्पादित करना समाप्त कर दिया होगा, जो एक विश्वसनीय तत्परता संकेत प्रदान करता है। **React कम्पोनेंट ट्री स्थिरता** फेंस के बंद होने के क्षण में विजेट फ्लैश होता है। दो समस्याएं ओवरलैप होती हैं: स्ट्रीमिंग आंशिक विजेट में कोई React कुंजी नहीं है, और बंद होने के बाद, इसे key="w-0" मिलता है। कुंजी परिवर्तन एक रीमाउंट का कारण बनता है। साथ ही, शिमर ओवरले को एक रैपिंग <div> के साथ लागू किया गया था, जिसने कम्पोनेंट ट्री संरचना को बदल दिया और एक और रीमाउंट का कारण बना। फिक्स: आंशिक विजेट को एक स्थिर कुंजी असाइन करें (w-N, जहाँ N अंतिम सेगमेंट सरणी में अपेक्षित स्थान है), जो बंद होने के बाद की कुंजी के अनुरूप हो। शिमर ओवरले को WidgetRenderer के अंदर ले जाएँ, जिसे showOverlay प्रॉप के माध्यम से नियंत्रित किया जाता है। कम्पोनेंट ट्री पूरे समय <WidgetRenderer key="w-N"> बना रहता है। ## **अंतिम विचार** पूरे जनरेटिव UI सिस्टम के लिए, कठिन हिस्सा "एक iframe में HTML का एक टुकड़ा चलाना" नहीं है। वह सरल है। असली जटिलता स्ट्रीमिंग, कम्पोनेंट लाइफसाइकिल स्विच और थीम परिवर्तन जैसे राज्य संक्रमणों के दौरान उस iframe को दृश्य रूप से स्थिर रखने में है। प्रत्येक "फ्लैश," "जंप," या "गायब होना" के लिए React के रिकंसिलिएशन, ब्राउज़र की रेंडरिंग पाइपलाइन और postMessage` के टाइमिंग को समझने की आवश्यकता होती है। अंतिम प्रभाव यह है कि उपयोगकर्ता मॉडल के उत्तरों में स्वाभाविक रूप से बिखरे हुए चार्ट और आरेख देखते हैं, जैसे कि वे हमेशा वहाँ होने के लिए थे। आज के लिए बस इतना ही। यदि आपको यह उपयोगी लगा, तो कृपया मुझे एक लाइक दें या इसे उन दोस्तों के साथ साझा करें जिन्हें इसकी आवश्यकता हो सकती है।