एआई एजेंट यूआई डिज़ाइन पैटर्न: स्वायत्त उपकरणों के लिए इंटरफ़ेस कैसे बनाएं
एआई एजेंट यूआई डिज़ाइन के लिए एक कार्यशील पैटर्न लाइब्रेरी। Claude Code, Cursor, Devin, Linear, ChatGPT Operator, Replit Agent, Bolt, और v0 से आठ वास्तविक उत्पाद विश्लेषण, साथ ही हर एजेंट इंटरफ़ेस के लिए आवश्यक सात पैटर्न।
एआई एजेंट यूआई डिज़ाइन, स्वायत्तता को जोड़कर बनाया गया चैट डिज़ाइन नहीं है। एजेंट एक स्वायत्त कार्यकर्ता होता है जो एक लक्ष्य निर्धारित करता है, एक मार्ग की योजना बनाता है और हर चरण के लिए अनुमति मांगे बिना टूल चलाता है। उस कार्यकर्ता का इंटरफ़ेस एक नियंत्रण सतह है, न कि बातचीत। सबसे साफ़-सुथरे एजेंट यूआई वाले उत्पाद इसे पहले वायरफ़्रेम से ही इसी तरह से डिज़ाइन करते हैं।
हर उपयोगी एजेंट यूआई में सात पैटर्न दिखाई देते हैं: कार्य निर्धारण, स्वायत्तता नियंत्रण, योजना सतह, प्रगति स्ट्रीम, पुष्टिकरण द्वार, त्रुटि निवारण और एजेंट हैंडऑफ़। आज अधिकांश उत्पाद इन सात में से चार पैटर्न शामिल करते हैं और बाकी तीन को महत्वहीन मानते हैं। इसका परिणाम एक ऐसा इंटरफ़ेस होता है जो डेमो में तो अच्छा दिखता है लेकिन वास्तविक उपयोग में विफल हो जाता है।
यह लेख इस समस्या का व्यावहारिक समाधान प्रस्तुत करता है। सात पैटर्न, Claude Code, कर्सर, डेविन, Linear AI, ChatGPT ऑपरेटर, रिप्लिट एजेंट, बोल्ट और v0 से आठ विश्लेषण, तीन सामान्य बग और उनका सटीक समाधान, और एक पंद्रह मिनट की प्री-शिप चेकलिस्ट जिसे कोई भी डिज़ाइनर UI को वास्तविक उपयोगकर्ता तक पहुँचाने से पहले चला सकता है।
एजेंट UI नियंत्रण सतहें हैं, चैट विंडो नहीं
एक AI एजेंट UI एक स्वायत्त कार्यकर्ता के लिए इंटरफ़ेस है। डिज़ाइन समस्या चैट थ्रेड की तुलना में फ़्लाइट डेक के अधिक करीब है। उपयोगकर्ता अब टाइप करके जवाब नहीं दे रहा है, बल्कि वह एक लक्ष्य निर्धारित कर रहा है और एक प्रक्रिया की निगरानी कर रहा है।
एक चैट UI बारी-बारी से बातचीत करने के लिए अनुकूलित है। एक एजेंट UI लक्ष्य की स्पष्टता, योजना की दृश्यता, प्रगति टेलीमेट्री और ओवरराइड सुविधाओं के लिए अनुकूलित है। अधिकांश शुरुआती एजेंट उत्पादों ने कुछ "सोचने" वाले संकेतकों और एक टूल-उपयोग लॉग के साथ चैट का विस्तार करके इस मामले में गलती की। उपयोगकर्ता चैट थ्रेड को घूरता रहता है, लेकिन उसके पास प्लान देखने, रन को पॉज़ करने और एजेंट के गलत दिशा में जाने पर रिकवर करने का कोई तरीका नहीं होता। एजेंट UI को एक कंट्रोल सरफेस की तरह मानें और नीचे दिए गए सात पैटर्न वैकल्पिक नहीं रह जाते, बल्कि अनिवार्य हो जाते हैं।
हर एजेंट UI के लिए ज़रूरी सात पैटर्न
टास्क फ्रेमिंग, ऑटोनॉमी स्लाइडर, प्लान सरफेस, प्रोग्रेस स्ट्रीम, कन्फर्मेशन गेट, एरर रिकवरी और एजेंट हैंडऑफ़। आज उपलब्ध हर एजेंट UI इन सातों का कुछ न कुछ संयोजन है।
टास्क फ्रेमिंग वह तरीका है जिससे उपयोगकर्ता लक्ष्य बताता है। ऑटोनॉमी कंट्रोल वह तरीका है जिससे उपयोगकर्ता यह तय करता है कि एजेंट को कितनी छूट मिलेगी। प्लान सरफेस वह जगह है जहां एजेंट कार्रवाई करने से पहले चरणों के क्रम के लिए प्रतिबद्ध होता है। प्रोग्रेस स्ट्रीम एजेंट की वर्तमान गतिविधि का लाइव फीड है। कन्फर्मेशन गेट किसी विनाशकारी कार्रवाई से पहले का धीमा क्षण है। एरर रिकवरी असफल चरण से वापस आने का रास्ता है। एजेंट हैंडऑफ़ वह स्टेट डंप है जो संदर्भ खोए बिना किसी कार्य को एजेंट से मानव या एजेंट से एजेंट में स्थानांतरित करता है।
ये सातों चीज़ें महत्व में बराबर नहीं हैं, लेकिन सभी आवश्यक हैं। एक ऐसा उत्पाद जो योजना के बिना कार्य रूपरेखा प्रस्तुत करता है, वह एक अनुमान लगाने का खेल है। एक ऐसा उत्पाद जो पुष्टिकरण गेट्स को छोड़कर सब कुछ प्रस्तुत करता है, वह एक विनाशकारी दुर्घटना को न्योता देने जैसा है। ये पैटर्न जटिल होते जाते हैं। एक को छोड़ देने से बाकी कमजोर हो जाते हैं।
कार्य रूपरेखा अनुबंध निर्धारित करती है
खराब कार्य रूपरेखा एक सामान्य चैट बॉक्स की तरह होती है जहाँ उपयोगकर्ता एक अस्पष्ट वाक्य टाइप करता है और एजेंट बाकी को अनुमानों से भर देता है। अच्छी कार्य रूपरेखा एक संरचित इनपुट है जो एजेंट को जानने के लिए आवश्यक विशिष्ट जानकारी मांगता है।
Linear की AI विशेषताएँ इसे बखूबी निभाती हैं। उपयोगकर्ता एक संक्षिप्त विवरण टाइप करता है और AI इसे शीर्षक, विवरण, लेबल और एक प्रोजेक्ट असाइनमेंट के साथ एक संरचित समस्या में पार्स करता है जिसे उपयोगकर्ता कमिट करने से पहले संपादित कर सकता है। रूपरेखा सीमित है, आउटपुट संरचित है, और कमिट करने से पहले संपादन की स्पष्ट सुविधा उपलब्ध है।
कार्य रूपरेखा उतनी ही संरचित होनी चाहिए जितनी कि स्वयं कार्य। कोडिंग कार्य के लिए एक लक्ष्य, एक लक्षित फ़ाइल और एक स्वीकृति मानदंड की आवश्यकता होती है। वेब स्वचालन कार्य के लिए एक आरंभिक URL, एक लक्षित क्रिया और एक समाप्ति शर्त की आवश्यकता होती है। सामान्य चैट इनपुट अन्वेषण के लिए ठीक है, लेकिन उत्पादन के लिए उपयुक्त नहीं है।
स्वायत्तता नियंत्रण उपयोगकर्ता को नियंत्रण चुनने की सुविधा देते हैं
विश्वास स्थिर नहीं होता और एक सेटिंग हर कार्य के लिए पर्याप्त नहीं होती।
Claude Code अपनी अनुमति प्रणाली के माध्यम से यही करता है। उपयोगकर्ता ऐसे मोड में कार्य कर सकता है जहां प्रत्येक टूल कॉल के लिए अनुमोदन आवश्यक हो, सामान्य टूल स्वतः अनुमोदित हो जाएं और जोखिम भरे टूल अभी भी नियंत्रित हों, या पूर्ण स्वायत्तता में कार्य कर सकता है। मोड दृश्यमान होता है, सत्र के मध्य में बदला जा सकता है, और उपयोगकर्ता को ठीक-ठीक पता होता है कि एजेंट किस नियंत्रण में है।
अधिकांश उत्पाद एक ही स्वायत्तता सेटिंग के साथ आते हैं, जिनमें प्रति-कार्य नियंत्रण या दृश्यमान स्थिति नहीं होती। उपयोगकर्ता को यह पता नहीं होता कि एजेंट परिनियोजन से पहले, हटाने से पहले या ईमेल भेजने से पहले पूछेगा या नहीं। यह अनिश्चितता उपयोगकर्ताओं को या तो अत्यधिक सतर्क रहने या अंधाधुंध विश्वास करने के लिए प्रेरित करती है। दोनों ही विफलता के तरीके हैं।
योजना सतह एजेंट का पहला वादा है
एजेंट के कार्य करने से पहले, उसे यह दिखाना होगा कि वह क्या करने का इरादा रखता है। योजना पठनीय, संपादन योग्य और अस्वीकार करने योग्य होनी चाहिए।
डेविन ने काम करने वाली पहली योजना सतहों में से एक को जारी किया। एजेंट एक योजना बनाता है, उपयोगकर्ता किसी भी चरण को उसी क्रम में संपादित कर सकता है, चरणों को हटा सकता है, चरण जोड़ सकता है या पूरी योजना को अस्वीकार कर सकता है। एक बार स्वीकृत हो जाने पर, योजना निष्पादन लॉग बन जाती है, जिसमें एजेंट द्वारा कार्य किए जाने पर प्रत्येक चरण प्रदर्शित होता है। योजना सतह और प्रगति स्ट्रीम दो अवस्थाओं में एक ही सतह होती हैं: रन से पहले और रन के दौरान, जो एक उपयुक्त आर्किटेक्चरल विकल्प है।
एक सामान्य त्रुटि। ऐसे उत्पाद जो योजना को संरचित सूची के बजाय गद्य के एक पैराग्राफ के रूप में दिखाते हैं। योजना वास्तव में संपादन योग्य नहीं होती है, जिसका अर्थ है कि उपयोगकर्ता या तो बिना सोचे-समझे स्वीकृति देता है या पुनः अनुरोध करता है। इसका समाधान मशीन-संरचित है: अलग-अलग चरणों की एक सूची, प्रत्येक चरण एक पंक्ति, प्रत्येक पंक्ति संपादन योग्य।
प्रोग्रेस स्ट्रीम ही भरोसे का आधार है
एजेंट काम कर रहा है और उपयोगकर्ता इंतज़ार कर रहा है, इसलिए प्रोग्रेस स्ट्रीम ही उपयोगकर्ता और रन को रोकने के निर्णय के बीच एकमात्र बाधा है।
कर्सर का एजेंट इंटरफ़ेस इसे बखूबी समझता है। जैसे ही एजेंट फ़ाइलों को संपादित करता है, अंतर संपादक में लाइव दिखाई देता है। जैसे ही यह कमांड चलाता है, टर्मिनल आउटपुट वास्तविक समय में स्ट्रीम होता है। उपयोगकर्ता किसी भी क्षण देखना बंद कर सकता है और पूर्ण लॉग देखने के लिए वापस आ सकता है। भरोसा कम समय में ही बन जाता है क्योंकि स्ट्रीम ईमानदार होती है।
इसकी तुलना उस एजेंट से करें जो "मैं अब अगले चरण पर विचार कर रहा हूँ" जैसी चैट-शैली की संक्षिप्त जानकारी स्ट्रीम करता है जबकि पृष्ठभूमि में चुपचाप दस टूल कॉल चला रहा होता है। यह संक्षिप्त जानकारी एक छलावा है। प्रत्येक टूल कॉल और फ़ाइल संपादन को एक संरचित लॉग में स्ट्रीम करें, और मॉडल के तर्क को प्रति चरण एक पंक्ति के सारांश में संपीड़ित करें। इन दोनों को भ्रमित करने से भरोसा टूट जाता है।
पुष्टिकरण द्वार विनाशकारी कार्यों से सुरक्षा प्रदान करते हैं
कुछ क्रियाएँ पूर्ववत नहीं की जा सकतीं, और UI को जानबूझकर उन क्षणों को धीमा करना पड़ता है।
ChatGPT ऑपरेटर इसे ओपन वेब पर हैंडल करता है। जब एजेंट कोई फ़ॉर्म सबमिट करने, भुगतान जानकारी भरने या खाते से संबंधित कोई कार्रवाई करने वाला होता है, तो वह रुक जाता है और उपयोगकर्ता से स्वीकृति, संशोधन या रद्द करने का अनुरोध करता है। यह विराम दिखाई देता है, कार्रवाई का विवरण सादे टेक्स्ट में दिया जाता है, और उपयोगकर्ता मैन्युअल रूप से ब्राउज़र सत्र को अपने नियंत्रण में ले सकता है।
अधिकांश उत्पाद यह गलती करते हैं कि वे हर कार्रवाई को एक ही पुष्टिकरण महत्व देते हैं। या तो हर चीज़ पर रोक लग जाती है, जिससे उपयोगकर्ता बिना पढ़े ही क्लिक करने लगते हैं, या फिर किसी भी चीज़ पर रोक नहीं लगती, जिससे एजेंट अपरिवर्तनीय नुकसान कर सकता है। कार्यों को तीन स्तरों में वर्गीकृत करें: प्रतिवर्ती लेखन के लिए सॉफ्ट गेट (तीस सेकंड का अनडू बैनर)। विनाशकारी कार्यों के लिए हार्ड गेट (पुष्टिकरण मॉडल)। विनाशकारी कार्यों के लिए दो-चरण गेट (एक मॉडल और एक टाइप किया हुआ पुष्टिकरण वाक्यांश)।
त्रुटि निवारण उत्पाद का आधा हिस्सा है
एजेंट लगातार विफल होते रहते हैं, और विश्वसनीय उत्पाद वे होते हैं जिनकी रिकवरी प्रक्रिया सबसे सरल होती है, न कि वे जिनकी सफलता दर सबसे अधिक होती है।
बोल्ट और v0 इसे बखूबी निभाते हैं। जब कोई बिल्ड विफल होता है, तो त्रुटि इनलाइन दिखाई देती है, एजेंट उसे ठीक करने का प्रयास करता है, और उपयोगकर्ता उसे दोहराने दे सकता है या सीधे कोड में बदलाव कर सकता है। प्रयासों के दौरान स्थिति संरक्षित रहती है।
अधिकांश उत्पाद यहीं विफल हो जाते हैं। त्रुटि होती है, एजेंट रुक जाता है, उपयोगकर्ता को "कुछ गड़बड़ हो गई, क्या आप चाहते हैं कि मैं पुनः प्रयास करूं" संदेश मिलता है, और उसे सिस्टम की स्थिति का कोई अंदाजा नहीं होता। प्रत्येक त्रुटि के लिए एक स्पष्ट स्थिति, सुधार विकल्पों का एक सेट (पुनः प्रयास, संपादन, नियंत्रण लेना, छोड़ना) और स्थिति संरक्षण की गारंटी आवश्यक है। त्रुटियां वास्तविक उपयोग में एजेंट के लिए एक सामान्य अनुभव हैं, न कि कोई दुर्लभ घटना।
एजेंट हैंडऑफ़ के लिए लिखित रिकॉर्ड आवश्यक है
जब कोई कार्य एजेंट से मानव को या एजेंट से एजेंट को स्थानांतरित होता है, तो प्राप्तकर्ता पक्ष को बिना पूछे पूरी स्थिति की आवश्यकता होती है।
Linear की AI सुविधाएँ संरचित अपडेट को समस्या में वापस लिखकर इसे संभालती हैं। अगले टीममेट को इनलाइन ही पूरा संदर्भ मिल जाता है। कोई अलग डैशबोर्ड नहीं, कोई अतिरिक्त टूल नहीं। प्रत्येक हैंडऑफ़ से एक स्टेट-डंप आर्टिफैक्ट (एक संरचित टिप्पणी, एक जेनरेटेड ब्रीफ़, एक सेव्ड चेकपॉइंट) प्राप्त होना चाहिए जिसे प्राप्तकर्ता तीस सेकंड से कम समय में पढ़ सके। यदि प्राप्तकर्ता को यह पूछना पड़े कि "आपने कहाँ छोड़ा था", तो हैंडऑफ़ विफल हो गया। यही अनुशासन किसी भी पुन: प्रयोज्य वर्कफ़्लो के लिए आवश्यक है (डिजाइनरों के लिए त्वरित इंजीनियरिंग)।
आठ वास्तविक एजेंट यूआई, एनोटेटेड
पैटर्न तभी मायने रखते हैं जब वे शिप किए गए उत्पादों के संपर्क में आने के बाद भी बने रहें। वर्तमान में आठ उत्पादन में हैं, प्रत्येक संक्षिप्त है, कोई भी परिपूर्ण नहीं है।
Claude Code, पारदर्शी टर्मिनल के रूप में एजेंट यूआई
Claude Code अब तक का सबसे स्वच्छ एजेंट यूआई है क्योंकि यह टर्मिनल को सतह के रूप में मानता है और एजेंट क्या कर रहा है उसे छिपाने से इनकार करता है। प्रत्येक टूल कॉल टर्मिनल पर स्ट्रीम होता है, प्रत्येक फ़ाइल संपादन एक अंतर दिखाता है, प्रत्येक कमांड अपना आउटपुट दिखाता है। इसकी जीत ईमानदारी है। इसमें कमी यह है: प्लान सतह मार्कडाउन है, संरचित सूची के रूप में संपादन योग्य नहीं है।
कर्सर, एजेंट यूआई एक परिवेशी जोड़ी प्रोग्रामर के रूप में
कर्सर का एजेंट तब तक अदृश्य रहता है जब तक आपको इसकी आवश्यकता न हो, जो एजेंट यूआई शिल्प कौशल का उच्चतम रूप है। छोटे-मोटे बदलाव होते ही हैं और अंतर दिखाई देता है। कई फ़ाइलों को रीफ़ैक्टर करने पर एक योजना सामने आ जाती है। इसका लाभ उपस्थिति कैलिब्रेशन में है: कर्सर एजेंट की दृश्यता को कार्य के अनुसार समायोजित करता है। इसमें कमी यह है: जटिल रीफ़ैक्टर के लिए योजना का स्वरूप संपादन योग्य कार्य सूची की तुलना में चैट के अधिक करीब है।
डेविन, एजेंट यूआई एक कार्यक्षेत्र थिएटर के रूप में
डेविन एजेंट का पूरा कार्यक्षेत्र दिखाता है जिसमें लाइव ब्राउज़र, टर्मिनल और संपादक शामिल हैं, और यह माना जाता है कि पारदर्शिता अमूर्तता की तुलना में अधिक तेज़ी से विश्वास पैदा करती है। एक संरचित संपादन योग्य योजना शुरू से ही दिखाई देती है। पूरा कार्यक्षेत्र प्रगति स्ट्रीम है। उपयोगकर्ता किसी भी स्तर पर नियंत्रण ले सकता है। इसका लाभ पूर्ण दृश्यता है। इसमें कमी यह है: सरल कार्यों के लिए कार्यक्षेत्र भारी है।
Linear एआई, एजेंट यूआई को इनलाइन असिस्टेंट के रूप में इस्तेमाल करना
Linear की एआई विशेषताएं मौजूदा Linear इंटरफ़ेस के भीतर ही मौजूद हैं, जो एम्बेडेड एजेंटों के लिए सही पैटर्न है, जिन्हें एक टीममेट की तरह महसूस होना चाहिए, न कि एक अलग ऐप की तरह। एआई एक संरचित आर्टिफैक्ट (एक समस्या, एक टिप्पणी, एक स्थिति अपडेट) लौटाता है जो मौजूदा प्रवाह के भीतर रहता है। इसका लाभ एम्बेडिंग में है। लेकिन इसमें कमी यह है: बहु-चरणीय स्वायत्त कार्यों के लिए एक प्लान इंटरफ़ेस और एक प्रोग्रेस स्ट्रीम की आवश्यकता होती है, जो Linear ने अभी तक जारी नहीं किया है।
ChatGPT ऑपरेटर, एजेंट यूआई को सुपरवाइज्ड ब्राउज़र के रूप में इस्तेमाल करना
ऑपरेटर एक सैंडबॉक्स ब्राउज़र में चलता है जिसे उपयोगकर्ता देख सकता है, रोक सकता है और नियंत्रण ले सकता है, जो ओपन वेब से जुड़े एजेंटों के लिए सही पैटर्न है। लाइव ब्राउज़र ही प्रोग्रेस स्ट्रीम है। भुगतान और खाता संबंधी क्रियाएं नियंत्रित होती हैं। इसका लाभ स्वयं सुपरवाइज्ड-ब्राउज़र पैटर्न में है, जो गति के बदले विश्वास प्रदान करता है। पैसा कहाँ खर्च होता है: योजना का स्वरूप चैट में रहता है, प्रगति स्ट्रीम से अलग, जिससे बीच में सुधार करना जितना आसान होना चाहिए उससे कहीं अधिक कठिन हो जाता है।
रिप्लिट एजेंट, बोल्ट और v0, एजेंट UI बिल्ड कैनवास के रूप में
रिप्लिट एजेंट, बोल्ट और v0 तीनों एक ही पैटर्न पर काम करते हैं: बाईं ओर प्रॉम्प्ट, दाईं ओर लाइव पूर्वावलोकन, और एजेंट का काम इन दोनों के बीच होता है। उपयोगकर्ता बताता है कि क्या बनाना है, एजेंट पूर्वावलोकन दिखाने तक चलता है। इसकी खासियत बिल्ड कैनवास है, जिसने "मेरे लिए एक ऐप बनाओ" जैसे अमूर्त कार्य को मूर्त रूप दिया है। इनमें से प्रत्येक में कहाँ कमी है: रिप्लिट एजेंट अपने एजेंट थ्रेड के अंदर बहुत अधिक स्टेट छिपाता है। जटिल ऐप्स के लिए बोल्ट का योजना स्वरूप पतला है। मल्टी-कंपोनेंट संपादन पर v0 का पुनरावृति लूप एक संरचित योजना की तुलना में चैट के अधिक करीब है। इसी श्रेणी में आने वाला लवेबल एक मजबूत योजना स्वरूप प्रदान करता है लेकिन एक कमजोर प्रगति स्ट्रीम।
क्या आप एक ऐसा एजेंट UI चाहते हैं जो पहली बार में ही विश्वास जीत ले, न कि दसवीं बार में? ⟦लिंक1⟧ AppBrainy स्वायत्त उपकरण बनाने वाली टीमों के लिए एजेंट उत्पाद UI प्रदान करता है, वहीं ClaudeBrainy Claude कौशल और प्रॉम्प्ट लाइब्रेरी प्रदान करता है जो UI को बाद में इसकी भरपाई करने से पहले ही एजेंट लेयर को सही कर देती हैं।
एजेंट UI की तीन आम त्रुटियाँ और उनका समाधान
अधिकांश एजेंट UI में तीन समान त्रुटियाँ होती हैं, और उनके समाधान आसान नहीं हैं।
पहली त्रुटि: एजेंट द्वारा योजना को छिपाना। उत्पाद एक लक्ष्य लेता है, पृष्ठभूमि में चलता है, और परिणाम रिपोर्ट करता है। उपयोगकर्ता के पास समीक्षा करने के लिए कोई योजना नहीं होती, देखने के लिए कोई प्रगति नहीं होती, और रन को रोकने का कोई तरीका नहीं होता। समाधान: निष्पादन से पहले एक संरचित संपादन योग्य योजना प्रदर्शित करें, भले ही वह दो पंक्तियों की ही क्यों न हो। इसकी कीमत UI के बीस पिक्सेल है। इसका लाभ यह है कि उपयोगकर्ता गलत परिणाम भेजने से पहले ही एजेंट को ठीक कर सकता है।
दूसरी त्रुटि: एजेंट द्वारा हर चीज़ की पुष्टि करना। उत्पाद प्रत्येक क्रिया को एक मॉडल के साथ नियंत्रित करता है, जिससे उपयोगकर्ता बिना पढ़े क्लिक करने का आदी हो जाता है। जब तक कोई विनाशकारी क्रिया आती है, तब तक उपयोगकर्ता उस पर भी क्लिक कर चुका होता है। समाधान: क्रियाओं को प्रतिवर्ती, विनाशकारी और अत्यंत विनाशकारी में वर्गीकृत करें। केवल अंतिम दो को ही नियंत्रित करें, और तीस सेकंड के अनडू बैनर के साथ प्रतिवर्ती क्रियाओं को चलने दें।
तीसरा: वह एजेंट जो विफलता को छुपाता है। उत्पाद चुपचाप पुनः प्रयास करता है, त्रुटियों को दबा देता है, या यह बताए बिना कि क्या गलत हुआ, "कुछ गड़बड़ हो गई" की रिपोर्ट करता है। समाधान: विफलता बिंदु, सिस्टम स्थिति और ठोस पुनर्प्राप्ति विकल्पों के साथ प्रत्येक त्रुटि को स्पष्ट रूप से प्रदर्शित करें। विश्वास स्पष्ट विफलता से आता है, न कि छिपी हुई विफलता से।
प्रत्येक समाधान एक नया डिज़ाइन नहीं है। यह पैटर्न के अपना काम करने तक एक सतह को जोड़ना या हटाना है। अधिकांश एजेंट UI बग डिज़ाइन समस्याओं के रूप में छिपी हुई पैटर्न समस्याएं हैं।
पंद्रह मिनट की प्री-शिप चेकलिस्ट
किसी भी एजेंट UI पर इसे वास्तविक उपयोगकर्ता तक पहुंचने से पहले चलाएँ और आप उन पैटर्न को पकड़ लेंगे जो उत्पादन में विफल होते हैं।
-
कार्य निर्धारण। एक विशिष्ट लक्ष्य लिखें। क्या इनपुट एजेंट को उस पर कार्य करने के लिए पर्याप्त संरचना प्रदान करता है?
-
स्वायत्तता दृश्यता। क्या आप बिना पूछे एक सेकंड में बता सकते हैं कि एजेंट क्या करेगा?
-
योजना सतह। एक जटिल कार्य चलाएँ। क्या एजेंट कार्रवाई करने से पहले एक संरचित, संपादन योग्य योजना दिखाता है?
-
प्रगति की स्पष्टता। क्या टूल कॉल और फ़ाइल संपादन दिखाई देते हैं, या स्ट्रीम चैट-शैली का सारांश है?
-
पॉज़ करने की सुविधा। चल रहे एजेंट को पॉज़ करने का प्रयास करें। क्या पॉज़ बटन दिखाई देता है और तुरंत काम करता है?
-
पुष्टिकरण प्राथमिकता। क्या प्रतिवर्ती क्रियाएँ स्वतंत्र रूप से चल रही हैं, विनाशकारी क्रियाएँ एक मोडल के साथ रोकी जा रही हैं, और विनाशकारी क्रियाओं के लिए टाइप की गई पुष्टि की आवश्यकता है?
-
त्रुटि दृश्यता। विफलता को बाध्य करें। क्या यूआई त्रुटि को उसकी स्थिति और पुनर्प्राप्ति विकल्पों के साथ दिखाता है?
-
पूर्ववत करने की सुविधा। क्या प्रतिवर्ती क्रिया के तीस सेकंड के भीतर एक स्पष्ट पूर्ववत करने का मार्ग है?
-
स्थिति संरक्षण। एक चरण विफल होने पर, उसे पुनः प्रयास करें। क्या पिछला कार्य संरक्षित है?
-
हैंडऑफ़ आर्टिफैक्ट। किसी कार्य को बीच में रोकें। क्या कोई स्थिति डंप है जहाँ से अगला व्यक्ति कार्य ग्रहण कर सकता है?
-
टूल-उपयोग लॉग। क्या लॉग संरचित और मशीन-पठनीय है, या इसमें तर्क और क्रियाएँ मिश्रित हैं?
-
किल स्विच। क्या यह हमेशा दिखाई देता है, या यह सेटिंग्स मेनू के अंदर छिपा रहता है?
जो उत्पाद इन बारह मानदंडों को पूरा करता है, उसका एजेंट यूआई कार्यात्मक होता है। उपयोगकर्ता को पता होगा कि एजेंट क्या कर रहा है और उसे कैसे रोका जाए।
अक्सर पूछे जाने वाले प्रश्न
एआई एजेंट यूआई डिज़ाइन क्या है?
एआई एजेंट यूआई डिज़ाइन स्वायत्त एआई कार्यकर्ताओं के लिए इंटरफ़ेस बनाने का अनुशासन है जो एक लक्ष्य निर्धारित करते हैं, चरणों की योजना बनाते हैं और प्रत्येक चरण की स्वीकृति के बिना टूल चलाते हैं। चैट यूआई के विपरीत, एजेंट यूआई सात मुख्य पैटर्न वाले नियंत्रण सतह होते हैं: कार्य निर्धारण, स्वायत्तता नियंत्रण, योजना सतह, प्रगति स्ट्रीम, पुष्टिकरण द्वार, त्रुटि निवारण और एजेंट हैंडऑफ़।
एआई एजेंट यूआई चैटबॉट यूआई से कैसे भिन्न है?
चैटबॉट यूआई बारी-बारी से बातचीत को मानता है। एजेंट यूआई मानता है कि एजेंट पृष्ठभूमि में चलता है, कई टूल कॉल निष्पादित करता है, स्थिति को संशोधित करता है और जब किसी चीज़ के लिए मानवीय इनपुट की आवश्यकता होती है तो रिपोर्ट करता है। एजेंट यूआई को योजना सतहों, लाइव प्रगति स्ट्रीम, पुष्टिकरण द्वार और किल स्विच की आवश्यकता होती है जो चैट यूआई में नहीं होती हैं।
एआई एजेंट इंटरफेस डिजाइन करने के प्रमुख पैटर्न क्या हैं?
सात पैटर्न: कार्य निर्धारण, स्वायत्तता नियंत्रण, योजना सतह, प्रगति स्ट्रीम, पुष्टिकरण द्वार, त्रुटि निवारण और एजेंट हैंडऑफ़। कार्य के अनुरूप आकार, विश्वास के लिए कैलिब्रेटेड और मॉडल परत पर मजबूत संदर्भ दक्षता द्वारा समर्थित।
किस एआई एजेंट उत्पाद का यूआई डिज़ाइन सबसे अच्छा है?
Claude Code पारदर्शिता में सर्वश्रेष्ठ है। कर्सर उपस्थिति कैलिब्रेशन में सर्वश्रेष्ठ है। डेविन कार्यक्षेत्र दृश्यता में सर्वश्रेष्ठ है। Linear एआई एम्बेडिंग में सर्वश्रेष्ठ है। ChatGPT ऑपरेटर पर्यवेक्षित निष्पादन में सर्वश्रेष्ठ है। रिप्लिट एजेंट, बोल्ट और v0 बिल्ड-कैनवास पैटर्न में सर्वश्रेष्ठ हैं। इनमें से कोई भी सभी सात पैटर्न को पूरी क्षमता से लागू नहीं करता है, यही कारण है कि यह श्रेणी अभी भी व्यापक रूप से खुली है।
एजेंट यूआई में स्वायत्तता और नियंत्रण को कैसे संतुलित किया जाए?
स्वायत्तता को प्रत्येक सत्र, प्रत्येक कार्य, प्रत्येक उपकरण के लिए एक दृश्यमान, समायोज्य सेटिंग बनाएं। कार्यों को तीन श्रेणियों में बाँटें: प्रतिवर्ती (अनडू विकल्प के साथ स्वतंत्र रूप से चलने योग्य), विनाशकारी (मॉडल के साथ नियंत्रित करने योग्य), और विनाशकारी (टाइप की गई पुष्टि के साथ नियंत्रित करने योग्य)। निष्पादन से पहले योजना को प्रदर्शित करें और निष्पादन के दौरान प्रगति को दिखाएँ। उपयोगकर्ता को किसी भी समय रन को रोकने, नियंत्रण अपने हाथ में लेने या समाप्त करने की अनुमति दें। विश्वास छिपी हुई जटिलता से नहीं, बल्कि ओवरराइड शक्ति से बढ़ता है।
एजेंट यूआई में वास्तव में बदलाव लाने वाले कारक
एजेंट यूआई स्वायत्तता से जुड़ा एक चैट उत्पाद नहीं है, यह एक नया इंटरैक्शन मॉडल है और जो उत्पाद इसे इस तरह से मानते हैं, वे ही सफल होते हैं।
अधिकांश टीमें एजेंट यूआई को चैट के ऊपर एक अतिरिक्त सुविधा के रूप में देखती हैं। वे एक चैट थ्रेड लेते हैं, उसमें एक "सोचने" का संकेतक जोड़ते हैं, कुछ टूल-उपयोग बबल डालते हैं, और इसे एजेंट कहते हैं। इसका परिणाम एक अतिरिक्त विलंबता वाला चैटबॉट होता है। चैट की हर विफलता और भी गंभीर हो जाती है क्योंकि एजेंट अब अधिक समय तक चलता है और विफल होने पर अधिक नुकसान करता है।
बदलाव यह है कि एजेंट को एक स्वायत्त कार्यकर्ता के रूप में और यूआई को कार्यकर्ता के नियंत्रण सतह के रूप में माना जाए। चैट थ्रेड एक बड़े इंटरफ़ेस का एक हिस्सा बन जाता है जिसमें प्लान बोर्ड, प्रोग्रेस स्ट्रीम, ऑटोनॉमी स्विच, कन्फर्मेशन मॉडल, एरर कंसोल और हैंडऑफ़ आर्टिफैक्ट शामिल होते हैं। उपयोगकर्ता अब एजेंट का वार्ताकार नहीं, बल्कि एजेंट का पर्यवेक्षक बन जाता है।
यदि आपकी टीम ऐसा एजेंट बना रही है जहाँ उपयोगकर्ता या तो अत्यधिक निगरानी करते हैं या आँख बंद करके भरोसा करते हैं, तो समस्या लगभग हमेशा एक पैटर्न की होती है। इसका समाधान ऊपर दिए गए सात पैटर्न हैं, जिन्हें कार्य के अनुसार ढाला गया है, विश्वास के लिए कैलिब्रेट किया गया है और एक वास्तविक एआई डिज़ाइन वर्कफ़्लो में एकीकृत किया गया है, न कि अलग से जोड़ा गया है।
यदि आप एक ऐसा एजेंट UI चाहते हैं जो दसवीं बार के बजाय पहली बार में ही विश्वास अर्जित कर ले, तो किराया Brainy का उपयोग करें। AppBrainy स्वायत्त उपकरण बनाने वाली टीमों के लिए पूर्ण एजेंट उत्पाद UI प्रदान करता है। ClaudeBrainy Claude Code वर्कफ़्लो, स्किल पैक और प्रॉम्प्ट लाइब्रेरी प्रदान करता है जो एजेंट लेयर को सही ढंग से तैयार करते हैं ताकि UI को क्षतिपूर्ति न करनी पड़े।
Want an agent UI that earns trust on the first run, not the tenth? Brainy ships ClaudeBrainy as a Skill pack and prompt library, and AppBrainy ships full agent product UI for teams building autonomous tools they want their users to actually use.
Get Started
