ai for designersMay 1, 202610 min read

स्ट्रीमिंग UI डिज़ाइन करना

स्ट्रीमिंग आउटपुट का क्षेत्र अब नया कैनवास है। AI स्ट्रीमिंग UI को एक असली इंटरैक्शन मॉडल की तरह डिज़ाइन करने की व्यावहारिक गाइड: पाँच लेयर, असली प्रोडक्ट टियरडाउन, एंटी-पैटर्न और शिप से पहले का ऑडिट।

By Boone
XLinkedIn
designing streaming uis

स्ट्रीमिंग रिस्पॉन्स आधुनिक सॉफ़्टवेयर की सबसे कम डिज़ाइन की गई सतह है। ज़्यादातर टीमों ने एक TypeScript fetch hook लिखा, उसे एक div से जोड़ा और उसे प्रोडक्ट डिज़ाइन कह दिया। नतीजा: इंटरफ़ेस का भेष धरे एक टाइपराइटर।

स्ट्रीमिंग का मतलब टेक्स्ट का दिख जाना नहीं है। यह एक इंटरैक्शन मॉडल है जिसमें लय, ठहराव, स्क्रोल व्यवहार, इंटरप्ट के साधन और ट्रस्ट सिग्नल शामिल हैं। जिस टीम ने सिर्फ़ इनपुट डिज़ाइन किया, उसने आधा प्रोडक्ट शिप किया है। आउटपुट क्षेत्र दूसरा आधा है, और ज़्यादातर AI प्रोडक्ट यूज़र को यहीं खो रहे हैं।

यह लेख इसका ऑपरेशनल वर्शन है। स्ट्रीमिंग UI असल में क्या है, हर अच्छे UI में कौन-सी पाँच लेयर होती हैं, असली टियरडाउन, प्रोडक्शन में सतहों को मार रहे एंटी-पैटर्न, और शिप से पहले का ऑडिट।

स्ट्रीमिंग UI एक सतह है, fetch लूप नहीं

स्ट्रीमिंग UI वह पूरा क्षेत्र है जिसे यूज़र मॉडल के चलते समय पढ़ता है। दिखता हुआ टेक्स्ट सिर्फ़ एक हिस्सा है। कैडेंस, कर्सर, स्क्रोल व्यवहार, स्ट्रक्चरल कमिटमेंट, इंटरप्ट कंट्रोल और पोस्ट-स्ट्रीम स्थिति बाकी सब हैं।

इस सतह के मापने योग्य गुण होते हैं। टाइम-टू-फ़र्स्ट-टोकन। टोकन कैडेंस। स्ट्रक्चरल कमिटमेंट। इंटरप्ट लेटेंसी। कम्प्लीशन सिग्नल। पोस्ट-स्ट्रीम एफ़ोर्डेंस। इनमें से किसी को भी नज़रअंदाज़ करें और स्ट्रीम एक API का साइड इफ़ेक्ट बनकर रह जाती है, डिज़ाइन किया हुआ कंपोनेंट नहीं।

Cursor, Claude, v0, Lovable, Linear AI, Raycast AI। कोई भी स्ट्रीमिंग को कच्चा टोकन आउटपुट नहीं मानता। हर एक स्ट्रक्चर्ड सतह शिप करता है। यही बार है।

बेहतरीन स्ट्रीमिंग सतह की पाँच लेयर

पाँच लेयर, उसी क्रम में जिसमें यूज़र उन्हें अनुभव करता है। चार से कम लेयर वाला स्ट्रीमिंग UI अधूरा है।

पाँच-लेयर टावर का वॉक्सेल डायग्राम, जिसकी स्लैब पर time-to-first-token, टोकन रिदम, स्ट्रक्चरल कमिटमेंट, इंटरप्ट और एडिट, और कम्प्लीशन लिखा है
पाँच-लेयर टावर का वॉक्सेल डायग्राम, जिसकी स्लैब पर time-to-first-token, टोकन रिदम, स्ट्रक्चरल कमिटमेंट, इंटरप्ट और एडिट, और कम्प्लीशन लिखा है

Time-to-first-token वह क्षण है जब खालीपन फ़ीडबैक बनता है। टोकन रिदम वह एहसास है जो स्ट्रीम चलने पर आता है। स्ट्रक्चरल कमिटमेंट यह है कि सतह लिस्ट, टेबल और कोड को बिना re-flow के कैसे संभालती है। इंटरप्ट और एडिट यूज़र का इमरजेंसी एग्ज़िट है। कम्प्लीशन वह क्षण है जब स्ट्रीम खत्म होती है और आर्टिफ़ैक्ट इंटरैक्टिव बन जाता है। कोई भी छोड़ें और स्ट्रीम उसी लेयर से ऊपर की ओर सड़ने लगती है।

लेयर 1: Time-to-first-token

पहले 200 मिलीसेकंड तय करते हैं कि यूज़र सतह पर भरोसा करेगा या नहीं। असली फ़ीडबैक सिग्नल के साथ 200ms से कम तुरंत जैसा लगता है। फ़ीडबैक के बिना 800ms के पार, यूज़र पहले ही मान चुका होता है कि प्रोडक्ट टूटा है।

विकल्प ठोस हैं। एक स्केलेटन प्लेसहोल्डर जो आउटपुट क्षेत्र पहले से घेर लेता है। एक ब्लिंक करता कर्सर। टाइपिंग-डॉट्स। एक स्ट्रीमिंग प्रीफ़िक्स, जहाँ "Here is" जैसा जाना-पहचाना वाक्यांश कंटेंट से पहले 300ms में उतर आता है।

ChatGPT के तीन डॉट्स इसलिए काम करते हैं क्योंकि वे ईमानदार हैं। Claude का ग्रेडिएंट पल्स उसका अपग्रेड है, एक नरम एनिमेटेड पट्टी जो बिना नकली कंटेंट के बताती है कि सतह ज़िंदा है। Cursor एक पतली कर्सर-लाइन और एक स्टेटस चिप दिखाता है जो नाम लेकर बताता है कि क्या हो रहा है। हर मामले में यूज़र 200ms के भीतर कुछ देख रहा होता है।

खालीपन ही विफलता है। 600ms तक अटका खाली क्षेत्र यूज़र को सिखाता है कि AI कुछ ऐसा है जिसका इंतज़ार करना पड़ता है। मॉडल से पहले कर्सर शिप करें।

लेयर 2: टोकन रिदम

कच्ची टोकन स्ट्रीम झटकेदार होती हैं। जो मॉडल चार टोकन, फिर बीस, फिर एक भेजता है, वह ग्लिच करते टर्मिनल जैसा दिखता है, भले ही डिलीवरी ठीक हो। रिदम एक डिज़ाइन फ़ैसला है।

समाधान है स्मूद की हुई कैडेंस। आने वाले टोकन को 30 से 60 मिलीसेकंड बफ़र करें, फिर एक स्थिर दर से रेंडर करें। यूज़र 250 से 400 शब्द प्रति मिनट पढ़ता है, इसलिए लक्ष्य ऐसी स्ट्रीम है जो बिना स्पाइक के पढ़ने की गति पर या उससे ज़रा ऊपर उतरे। Claude ने यह अनुशासन शुरू में ही अपना लिया था।

v0 में Vercel के स्ट्रीमिंग UI primitives यही विचार शिप करते हैं: एक रेंडर लूप जो नेटवर्क को विज़ुअल अपडेट से अलग कर देता है। API से आने वाली टोकन स्ट्रीम एक लेयर है। विज़ुअल स्ट्रीम दूसरी। इन दोनों को कभी एक नहीं होना चाहिए।

कर्सर मायने रखता है। जो कर्सर आख़िरी रेंडर हुए टोकन का पीछा करता है और पीछे हल्का फ़ेड छोड़ता है, वह नज़र को टिकाता है। उसके बिना यूज़र की नज़र यह ढूँढते हुए इधर-उधर कूदती है कि स्ट्रीम कहाँ है। Cursor के कंपोज़र में कर्सर का होना नाम का संयोग नहीं है।

लेयर 3: स्ट्रक्चरल कमिटमेंट

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

स्ट्रीमिंग आउटपुट पैनल का वॉक्सेल रेंडरिंग, जिसमें एक पैराग्राफ़ पूरा रेंडर है, एक लिस्ट आधी रेंडर हुई है, और एक कोड ब्लॉक का लेआउट रिज़र्व है
स्ट्रीमिंग आउटपुट पैनल का वॉक्सेल रेंडरिंग, जिसमें एक पैराग्राफ़ पूरा रेंडर है, एक लिस्ट आधी रेंडर हुई है, और एक कोड ब्लॉक का लेआउट रिज़र्व है

नादान वर्शन है markdown-as-streaming। रेंडरर हर चंक पार्स करता है, हर कमिट पर लेआउट रीफ़्लो होता है, लिस्ट दोबारा नंबर होती है, कोड ब्लॉक बीच स्ट्रीम में फ़ॉन्ट बदल देता है, पेज उछलता है। हर रीफ़्लो ध्यान पर टैक्स है।

सही वर्शन स्ट्रक्चर को पहचाने जाते ही कमिट कर देता है, फिर कंटेंट को बिना re-flow के उसी लेआउट में स्ट्रीम करता है। पहला हाइफ़न आते ही लिस्ट जगह रिज़र्व कर लेती है। ट्रिपल-बैकटिक पर कोड ब्लॉक मोनोस्पेस पेन रिज़र्व करता है। टेबल कॉलम की गिनती तुरंत कमिट कर देती है। Cursor की diff स्ट्रीमिंग इसका पाठ्यपुस्तक उदाहरण है। diff पेन लेआउट रिज़र्व करता है, फ़ाइल पाथ पहले आते हैं, अलग-अलग लाइनें पहले से बनी पंक्तियों में स्ट्रीम होती हैं। v0 की सेलेक्शन-अवेयर स्ट्रीमिंग कैनवास की तरफ़ यही पैटर्न शिप करती है।

Linear AI के स्ट्रक्चर्ड सुझाव यूज़र को कभी "loading" स्थिति दिखाए बिना कमिटमेंट शिप करते हैं। सुझाव एक टाइप्ड ऑब्जेक्ट की तरह उतरता है, फ़ील्ड निर्भरता के क्रम में भरते हैं, वर्कफ़्लो कभी नहीं रुकता। Linear काम शिप करता है, बाकी ट्रांसक्रिप्ट।

लेयर 4: इंटरप्ट और एडिट

इंटरप्ट के बिना स्ट्रीमिंग UI शत्रुतापूर्ण है। यूज़र मॉडल को कुछ ऐसा लिखते देख रहा है जो उसे पहले से पता है कि गलत है, और बाहर निकलने का एकमात्र रास्ता टैब बंद करना है। यह प्रोडक्ट नहीं है। यह टोकन काउंटर वाला बंधक संकट है।

स्टॉप बटन सतह का सबसे सस्ता और सबसे असरदार तत्व है। पहले टोकन से दिखे, 100वें के बाद नहीं। Claude, Cursor, ChatGPT और v0 सभी इसे शिप करते हैं। ज़्यादातर घर में बने चैट UI इसे भूल जाते हैं।

इंटरप्ट न्यूनतम स्तर है। एडिट छत है। जो पैटर्न ज़्यादातर टीमों ने अभी कमाया नहीं है, वह है लाइव एडिट, जहाँ यूज़र बीच स्ट्रीम में प्रॉम्प्ट बदलता है और सतह रूट बदल लेती है। स्ट्रीमिंग के दौरान Cursor का accept और reject अब तक का सबसे करीबी शिप किया हुआ वर्शन है। यूज़र diff को उतरते हुए पढ़ता है, जो हिस्से काम के हैं उन्हें accept करता है, बाकी को reject। यह असली इंटरैक्शन लूप है।

ChatGPT का regenerate इसका उलट है। बटन पिछले रिस्पॉन्स को ओवरराइट कर देता है, और यूज़र वह वर्शन खो देता है जो उसे पसंद था। ओवरराइट के रूप में regenerate विनाशकारी है। ब्रांच के रूप में regenerate डिज़ाइन है। Claude की हिस्ट्री सतह ब्रांच शिप करती है।

लेयर 5: कम्प्लीशन और पोस्ट-स्ट्रीम

स्ट्रीम खत्म होने का क्षण एक डिज़ाइन क्षण है। ज़्यादातर प्रोडक्ट इसे कुछ नहीं मानते। स्ट्रीम रुकती है, कर्सर गायब हो जाता है, और यूज़र टेक्स्ट की दीवार को घूरते हुए सोचता है कि आगे क्या करे।

Claude का आर्टिफ़ैक्ट मटीरियलाइज़ेशन गोल्ड स्टैंडर्ड है। स्ट्रीम होता टेक्स्ट एक शांत कम्प्लीशन सिग्नल पाता है, और आर्टिफ़ैक्ट पेन उसी क्षण स्ट्रीमिंग प्रीव्यू से इंटरैक्टिव सतह में बदल जाता है। यूज़र "पढ़ना खत्म" नहीं करता, वह अब "आर्टिफ़ैक्ट में" है। यह ट्रांज़िशन ही पूरा मकसद है।

v0 का प्रीव्यू स्वैप डिज़ाइन-साइड वर्शन है। स्ट्रीमिंग कोड खत्म होता है, लाइव प्रीव्यू iframe फ़ाइनल बिल्ड के साथ रीलोड होता है, और deploy बटन उभर आता है। तीन स्थितियाँ, एक ट्रांज़िशन, कोई डेड एयर नहीं।

Cursor का diff-to-accept तीसरा पैटर्न है। स्ट्रीम खत्म, diff एडिट करने योग्य बना रहता है, accept और reject मौजूद रहते हैं, और यूज़र के कहने तक फ़ाइल कमिट नहीं होती। स्ट्रीम खत्म हुई, फ़ैसला नहीं। यही अलगाव सतह को चैट लॉग की जगह टूल जैसा महसूस कराता है।

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

असली प्रोडक्ट टियरडाउन

Cursor कंपोज़र-स्ट्रीमिंग के साथ diff-मटीरियलाइज़ेशन चलाता है। कंपोज़र प्लान स्ट्रीम करता है, diff पेन पैच स्ट्रीम करता है, accept और reject लाइव रहते हैं, और पोस्ट-स्ट्रीम स्थिति एक पेंडिंग diff है जो यूज़र की अपनी है। हर लेयर निशाने पर।

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

v0 लाइव प्रीव्यू के साथ सेलेक्शन-ड्रिवन स्ट्रीमिंग शिप करता है। यूज़र कैनवास के एक हिस्से पर क्लिक करता है, प्रॉम्प्ट खुद को स्कोप कर लेता है, स्ट्रीम कोड के रूप में उतरती है और प्रीव्यू iframe में स्वैप होता है। कम्प्लीशन deploy बटन को हैंड-ऑफ़ करता है।

ChatGPT बेसलाइन है। तीन-डॉट फ़ीडबैक के साथ टोकन स्ट्रीमिंग, ओवरराइट के रूप में regenerate, और हाल की बढ़ोतरी के रूप में branch-from-here। कैटेगरी का डिफ़ॉल्ट, बार नहीं।

Vercel AI Playground, Lovable, Anthropic Computer Use, Raycast AI और GitHub Copilot Workspace हर एक अलग-अलग टुकड़े शिप करते हैं। Vercel स्ट्रीम के दौरान मॉडल पिकर को लाइव रखता है। Lovable स्ट्रीम-टू-ऐप पैटर्न चलाता है, यूज़र अपना ऐप रियल टाइम में बनते देखता है। Computer Use स्क्रीनशॉट और रीज़निंग ट्रेस को समानांतर स्ट्रीम करता है। Raycast कमांड-पैलेट माइक्रो-सतह में स्ट्रीम करता है। Copilot Workspace चेकपॉइंट के साथ प्लान-फिर-एक्ज़ीक्यूट स्ट्रीमिंग शिप करता है।

पाँच नियम

  1. 200 मिलीसेकंड से कम में फ़ीडबैक दिखाएँ। एक कर्सर, एक पल्स, एक टाइपिंग डॉट, एक स्ट्रीमिंग प्रीफ़िक्स। खालीपन को छोड़कर कुछ भी।
  2. कैडेंस स्मूद करें। नेटवर्क स्ट्रीम बफ़र करें, पढ़ने की गति पर रेंडर करें, कर्सर एंकर करें। जिटर डिज़ाइन की विफलता है, नेटवर्क की हालत नहीं।
  3. बिना re-flow के स्ट्रक्चर कमिट करें। लिस्ट, टेबल या कोड ब्लॉक पहचाने जाते ही लेआउट रिज़र्व करें। कभी रीफ़्लो नहीं।
  4. टोकन 100 से पहले स्टॉप बटन शिप करें। दिखता हुआ। पहुँच में। एक क्लिक। कोई अपवाद नहीं।
  5. स्ट्रीम के बाद के क्षण को उतनी ही बारीकी से डिज़ाइन करें जितना स्ट्रीम को। कम्प्लीशन एक हैंड-ऑफ़ है। हैंड-ऑफ़ ही प्रोडक्ट है।

प्रोडक्शन में स्ट्रीम को मार रहे एंटी-पैटर्न

मरा हुआ स्पिनर। मॉडल बंद रेंडर लेयर के पीछे स्ट्रीम कर रहा है और स्पिनर घूम रहा है। स्पिनर हटाइए। स्ट्रीम शिप कीजिए।

टोकन जिटर। कच्चा टोकन आउटपुट, कोई बफ़र नहीं, कैडेंस बर्स्ट और ठहराव के बीच झिलमिलाती है। इसे स्मूद कीजिए।

यूज़र से लड़ने वाला ऑटो-स्क्रॉल। यूज़र पहले का पैराग्राफ़ पढ़ रहा है और पेज स्ट्रीम के पीछे अपने आप स्क्रॉल हो जाता है। मैन्युअल स्क्रॉल पहचानिए, और यूज़र के दोबारा एंकर करने तक ऑटो-स्क्रॉल रोक दीजिए। Claude और Cursor इसे संभालते हैं।

बिना-स्टॉप-बटन की गलती। इंटरप्ट सेटिंग्स मेन्यू में दबा है, या 30 सेकंड बाद ही दिखता है, या है ही नहीं। पहले टोकन से दिखे।

वह स्ट्रीम जो खत्म होकर यूज़र को घूरता छोड़ दे। न कम्प्लीशन सिग्नल, न अगला कदम। पोस्ट-स्ट्रीम डिज़ाइन कीजिए।

विनाशकारी regenerate। नया रिस्पॉन्स पुराने को ओवरराइट कर देता है, यूज़र वह वर्शन खो देता है जो उसे पसंद था। Regenerate को ब्रांच बनाइए, कभी ओवरराइट नहीं।

स्ट्रीमिंग के रूप में कच्चा markdown। रेंडरर हर चंक पर रीफ़्लो करता है, पेज उछलता है। स्ट्रक्चर एक बार कमिट करें, रिज़र्व लेआउट में स्ट्रीम करें।

सुधार छोटे हैं। जो सतहें इन्हें शिप करती हैं वे 2026 जैसी लगती हैं। जो नहीं करतीं, वे 2026 के मॉडल से जुड़ी 2022 की चैट साइडबार लगती हैं।

स्ट्रीमिंग-सतह ऑडिट

किसी भी AI स्ट्रीमिंग सतह को शिप करने से पहले ये चलाइए।

स्ट्रीमिंग-सतह ऑडिट को दर्शाते कोरल चेकबॉक्स वाले वर्टिकल ऑडिट कार्ड स्टैक का वॉक्सेल रेंडरिंग
स्ट्रीमिंग-सतह ऑडिट को दर्शाते कोरल चेकबॉक्स वाले वर्टिकल ऑडिट कार्ड स्टैक का वॉक्सेल रेंडरिंग
  1. पहला फ़ीडबैक। क्या सतह submit के 200 मिलीसेकंड के भीतर कुछ दिखाती है?
  2. कैडेंस। क्या टोकन स्ट्रीम पढ़ने की गति तक स्मूद की गई है, या कच्चा नेटवर्क जिटर है?
  3. स्ट्रक्चरल कमिटमेंट। क्या सतह कंटेंट आने से पहले लिस्ट, टेबल और कोड ब्लॉक का लेआउट रिज़र्व करती है?
  4. स्टॉप एफ़ोर्डेंस। क्या स्टॉप बटन पहले टोकन से दिखता है, एक क्लिक में?
  5. एडिट एफ़ोर्डेंस। क्या यूज़र बीच स्ट्रीम में बदल, accept या reject कर सकता है?
  6. कम्प्लीशन डिज़ाइन। क्या स्ट्रीम खत्म होने का क्षण किसी असली अगले कदम को हैंड-ऑफ़ करता है?
  7. पोस्ट-स्ट्रीम आर्टिफ़ैक्ट। क्या आउटपुट स्ट्रीम के बाद इंटरैक्टिव है, या बस जमा हुआ ट्रांसक्रिप्ट?

जो सतह सातों पास करती है वह डिज़ाइन किए हुए कंपोनेंट जैसी लगती है। जो तीन या ज़्यादा में फ़ेल होती है वह मॉडल जुड़े कंसोल लॉग जैसी लगती है। यही फ़ासला AI-नेटिव प्रोडक्ट डिज़ाइन को ऊपर से चिपकाए गए AI से अलग करता है।

जो टीमें स्ट्रीमिंग सतहें इतनी बारीकी से शिप करती हैं, वही इनपुट की तरफ़ प्रॉम्प्ट सतहों को असली कंपोनेंट मानती हैं, और सिस्टम स्तर पर AI लेटेंसी के लिए डिज़ाइन करती हैं। इसे एम्प्टी स्टेट, एजेंट UI पैटर्न और ट्रस्ट सिग्नल के साथ जोड़ें ताकि स्ट्रीमिंग आउटपुट पढ़े जाने का हक कमाए।

FAQ

स्ट्रीमिंग UI डिज़ाइन क्या है?

स्ट्रीमिंग UI डिज़ाइन वह विधा है जो तय करती है कि मॉडल के जनरेट करते समय AI आउटपुट स्क्रीन पर कैसे दिखे। इसमें time-to-first-token, टोकन कैडेंस, स्ट्रक्चरल कमिटमेंट, इंटरप्ट एफ़ोर्डेंस और पोस्ट-स्ट्रीम आर्टिफ़ैक्ट शामिल हैं। स्ट्रीमिंग UI कोई textarea नहीं है जिसमें टेक्स्ट भरता जाए। यह मापने योग्य गुणों वाली डिज़ाइन की हुई सतह है, और अभी जीत रहे प्रोडक्ट इसे ऐसे ही देखते हैं।

अलग-अलग प्रोडक्ट में टोकन स्ट्रीमिंग अलग क्यों लगती है?

क्योंकि कैडेंस डिज़ाइन का फ़ैसला है, नेटवर्क का नतीजा नहीं। कच्ची टोकन स्ट्रीम झटके देती है। बफ़र की हुई, स्मूद स्ट्रीम पढ़ने की गति पर उतरती है। Claude एक रेंडर लूप से कैडेंस स्मूद करता है जो नेटवर्क को विज़ुअल अपडेट से अलग करता है। ChatGPT कच्ची डिलीवरी के ज़्यादा करीब चलता है। मॉडल की श्रेणी वही, सतह का एहसास अलग।

स्ट्रीमिंग UI की सबसे आम गलती क्या है?

दिखने वाले स्टॉप बटन के बिना स्ट्रीम शिप करना। यूज़र मॉडल को कुछ ऐसा लिखते देख रहा है जो उसे पता है कि गलत है और उसके पास बाहर निकलने का कोई रास्ता नहीं। दूसरी आम विफलताएँ: मरे हुए स्पिनर, यूज़र से लड़ने वाला ऑटो-स्क्रॉल, विनाशकारी regenerate, हर चंक पर रीफ़्लो होने वाला कच्चा markdown, और ऐसा कम्प्लीशन जो किसी को कुछ हैंड-ऑफ़ नहीं करता। हर एक को सतह में छोटे बदलाव से ठीक किया जा सकता है।

स्ट्रीम को कैनवास की तरह बनाइए

स्ट्रीमिंग आउटपुट का क्षेत्र नया कैनवास है। AI प्रोडक्ट इस पर जीते या मरते हैं कि यह सतह पहले 800 मिलीसेकंड में कैसी लगती है और 30 सेकंड के रिस्पॉन्स में कितनी पठनीय रहती है। ज़्यादातर टीमें इसे टाइपराइटर की तरह देखती हैं। बार शिप करने वाली टीमें इसे इन्फ्रास्ट्रक्चर की तरह देखती हैं।

पाँचों लेयर शिप कीजिए। ऑडिट चलाइए। एंटी-पैटर्न से बचिए। दूसरी तरफ़ जो प्रोडक्ट निकलेगा वह चैट साइडबार का ढोंग करने की जगह असली टूल जैसा लगेगा।

अगर आप ऐसी टीम चाहते हैं जो स्ट्रीमिंग सतहों को ऊपर से चिपकाए टोकन लूप की जगह पूरे कंपोनेंट की तरह शिप करे, तो Brainy को हायर करें। हम AI-नेटिव प्रोडक्ट UI को शुरू से अंत तक डिज़ाइन करते हैं, पहले टोकन से लेकर पोस्ट-स्ट्रीम आर्टिफ़ैक्ट तक, ट्रस्ट सिग्नल और इंटरप्ट एफ़ोर्डेंस के साथ, जो पहले यूज़र के send दबाने से पहले ही बने होते हैं।

Want a streaming surface that feels designed instead of bolted on? Brainy ships AI-native product UI end to end, from the first token to the post-stream artifact.

Get Started

More from Brainy Papers

Keep reading