विजेट दिखाएँ

show_widget एक मुख्य टूल है जो उपयोगकर्ता के वर्तमान इंटरफ़ेस पर एक स्व-निहित HTML विजेट दिखाता है। OpenClaw इसे Control UI, iOS, Android और macOS चैट ट्रांसक्रिप्ट में इनलाइन रेंडर करता है; Linux ब्राउज़र Control UI का उपयोग करता है। Activities सक्षम वाले Discord सत्र में, Discord Plugin एक विजेट खोलें बटन पोस्ट करता है जो इसे Activity के रूप में लॉन्च करता है।

विजेट कैसे काम करते हैं

जब एजेंट show_widget को कॉल करता है, तो OpenClaw कोर widget_code को एक न्यूनतम HTML दस्तावेज़ में लपेटता है, उसे Canvas दस्तावेज़ के रूप में संग्रहीत करता है और एक पूर्वावलोकन हैंडल लौटाता है। Control UI उस हैंडल को टूल कॉल के ठीक नीचे सैंडबॉक्स किए गए iframe के रूप में रेंडर करता है, जबकि नेटिव ऐप एक पृथक वेब व्यू का उपयोग करते हैं। इतिहास दोबारा लोड होने के बाद दोनों विजेट को पुनर्स्थापित करते हैं।

ब्राउज़र में एम्बेड करने के लिए, रैपर दस्तावेज़ विजेट कोड के आसपास चार छोटे होस्ट ब्रिज इंजेक्ट करता है:

• एक आकार रिपोर्टर रेंडर की गई सामग्री की ऊँचाई एम्बेड करने वाली चैट को भेजता है, जो इसे सीमित करके iframe में फ़िट करती है (160 से 1200 पिक्सेल)।
• एक प्रॉम्प्ट ब्रिज वैश्विक sendPrompt(text) फ़ंक्शन परिभाषित करता है, जिसे विजेट स्क्रिप्ट चैट में फ़ॉलो-अप संदेश सबमिट करने के लिए कॉल कर सकती हैं। किसी भी विजेट कोड के चलने से पहले ब्रिज एक निजी संदेश चैनल बनाता है और चैट को एक एंडपॉइंट प्रदान करता है; चैट केवल उसी पहले प्रस्ताव को अपनाती है। इंटरैक्टिव विजेट देखें।
• एक थीम ब्रिज Control UI के वर्तमान डिज़ाइन टोकन सुनता है और उन्हें लोड होने पर तथा हर थीम परिवर्तन पर CSS वेरिएबल के रूप में लागू करता है।
• जब एम्बेड करने वाली चैट निर्यात का अनुरोध करती है, तो एक स्नैपशॉट ब्रिज वर्तमान विजेट दस्तावेज़ को PNG के रूप में रेंडर करता है।

बाकी सब कुछ फ़्रेम के भीतर रहता है: दस्तावेज़ एक अपारदर्शी ओरिजिन में सख्त Content Security Policy के साथ चलता है, इसलिए विजेट स्क्रिप्ट Control UI, Gateway या नेटवर्क तक नहीं पहुँच सकतीं।

मुख्य कार्यान्वयन केवल तभी उपलब्ध होता है जब आरंभ करने वाला Gateway क्लाइंट inline-widgets क्षमता घोषित करता है। Control UI और समर्थित नेटिव ऐप इस क्षमता को स्वचालित रूप से घोषित करते हैं। Discord कार्यान्वयन केवल उन Discord सत्रों में उपलब्ध होता है जिनमें Activities कॉन्फ़िगर की गई हों। अन्य चैनल रन को show_widget प्राप्त नहीं होता।

क्षमता ट्रांसपोर्ट एम्बेडेड, Codex ऐप-सर्वर और CLI-समर्थित मॉडल बैकएंड को कवर करता है। ग्रांट-प्रमाणित MCP कॉलर और प्रत्यक्ष HTTP टूल-इनवोक कॉलर फ़ेल-क्लोज़्ड रहते हैं क्योंकि वे क्लाइंट क्षमताएँ घोषित नहीं करते।

डिज़ाइन सिस्टम

प्रत्येक Canvas विजेट में एक क्लास-रहित आधार स्टाइलशीट और एक छोटा टोकन सेट शामिल होता है:

सादे शीर्षकों, अनुच्छेदों, लिंकों, बटनों, इनपुट, सिलेक्ट, टेक्स्टएरिया, तालिकाओं और कोड ब्लॉक को आधार शैलियाँ मिलती हैं। सहायक क्लास सामान्य पैटर्न प्रदान करती हैं:

• बॉर्डर वाली सामग्री सतह के लिए .card
• संक्षिप्त स्थिति लेबल के लिए .badge, साथ में .ok, .warn, .danger या .info
• प्रमुख संख्यात्मक मान के लिए .metric
• द्वितीयक टेक्स्ट के लिए .muted
• रैप होने वाले क्षैतिज लेआउट के लिए .row
• प्राथमिक क्रिया के लिए button.primary

जब कोई विजेट लोड होता है और जब भी थीम बदलती है, Control UI सक्रिय थीम मानों के साथ एक openclaw:widget-theme संदेश पोस्ट करता है। इसलिए विजेट पुनः लोड किए बिना Claw, Knot, Dash और कस्टम थीम सहित हर थीम परिवार के अनुरूप बने रहते हैं। नेटिव ऐप और प्रत्यक्ष रूप से खोले गए विजेट सहित Control UI के बाहर, विजेट prefers-color-scheme द्वारा चुने गए अंतर्निहित हल्के या गहरे पैलेट का उपयोग करते हैं।

तीन नियमों के अनुसार विजेट बनाएँ:

1. हर रंग और पृष्ठभूमि के लिए डिज़ाइन वेरिएबल का उपयोग करें। रंग मान हार्डकोड न करें।
2. पृष्ठ की पृष्ठभूमि पारदर्शी रखें ताकि विजेट अपने होस्ट इंटरफ़ेस का हिस्सा लगे।
3. अधिकतम एक प्राथमिक क्रिया के लिए --accent-fill आरक्षित रखें।

निर्यात: वेब चैट में, रेंडर किए गए विजेट को क्लिपबोर्ड पर कॉपी करने या PNG के रूप में डाउनलोड करने के लिए विजेट कार्ड मेन्यू खोलें। स्नैपशॉट ब्रिज के बिना पुराने विजेट दस्तावेज़ इसके बजाय HTML फ़ाइल डाउनलोड का उपयोग करते हैं।

टूल का उपयोग करें

दोनों कार्यान्वयन समान आवश्यक फ़ील्ड का उपयोग करते हैं:

Discord Activity लॉन्च बटन के लिए वैकल्पिक button_label टेक्स्ट भी स्वीकार करता है। Canvas स्कीमा जानबूझकर केवल Discord वाले इस फ़ील्ड को शामिल नहीं करता।

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

discord_widget एक रिलीज़ के लिए अप्रचलित उपनाम के रूप में पंजीकृत रहता है। नए एजेंट कॉल को show_widget का उपयोग करना चाहिए।

इंटरैक्टिव विजेट

Control UI में, विजेट स्क्रिप्ट वार्तालाप को आगे बढ़ा सकती हैं। रैपर दस्तावेज़ एक वैश्विक sendPrompt(text) फ़ंक्शन परिभाषित करता है; इसे कॉल करने पर text चैट में ऐसे सबमिट होता है मानो उपयोगकर्ता ने संदेश टाइप करके भेजा हो। पिकर, क्विज़ या ड्रिल-डाउन डैशबोर्ड जैसे इंटरैक्टिव प्रवाह बनाने के लिए इसे बटनों या अन्य नियंत्रणों से जोड़ें। नेटिव ऐप इंटरैक्टिव विजेट कोड रेंडर करते हैं, लेकिन इस चैट प्रॉम्प्ट ब्रिज को उपलब्ध नहीं कराते।

<button onclick="sendPrompt('विफल परीक्षणों को विस्तार से दिखाएँ')">विफल परीक्षण</button>

प्रत्येक प्रॉम्प्ट को फ़्रेम सीमा के दोनों ओर सत्यापित किया जाता है:

• sendPrompt के लिए विजेट के भीतर क्षणिक उपयोगकर्ता सक्रियण आवश्यक है: यह उपयोगकर्ता द्वारा विजेट में क्लिक करने या कोई कुंजी दबाने के बाद केवल कुछ सेकंड तक काम करता है, इसलिए इसे बटनों और अन्य क्लिक लक्ष्यों से जोड़ें — लोड होने पर इसे स्वचालित रूप से कॉल करने से कुछ नहीं होता। ब्रिज भेजने वाले एंडपॉइंट को अपने तक निजी रखता है और उन ब्राउज़र में फ़ेल-क्लोज़्ड रहता है जो उपयोगकर्ता सक्रियण उपलब्ध नहीं कराते, इसलिए विजेट कोड इस जाँच को बायपास नहीं कर सकता।
• प्रॉम्प्ट का अधिकार केवल मूल विजेट दस्तावेज़ के पास होता है। विजेट कोड के चलने या फ़्रेम को नेविगेट करने से पहले विश्वसनीय ब्रिज चैट को अपना चैनल एंडपॉइंट प्रदान करता है, चैट केवल उसी पहले प्रस्ताव को अपनाती है और नेविगेशन पर चैनल दस्तावेज़ के साथ समाप्त हो जाता है। बाहरी रूप से अनुमत एम्बेड URL कभी नहीं अपनाए जाते।
• विजेट फ़्रेम चैट ट्रांसक्रिप्ट में दिखाई देना चाहिए और उस पर फ़ोकस होना चाहिए — यह होस्ट द्वारा देखा गया एक अतिरिक्त संकेत है कि उपयोगकर्ता वास्तव में इसी विजेट से इंटरैक्ट कर रहा है।
• ट्रिम करने के बाद टेक्स्ट खाली नहीं होना चाहिए और अधिकतम 4,000 वर्ण का होना चाहिए।
• / से शुरू होने वाले प्रॉम्प्ट अस्वीकार किए जाते हैं, इसलिए विजेट कोड /approve या /stop जैसे चैट कमांड ट्रिगर नहीं कर सकता।
• प्रत्येक विजेट दस्तावेज़ प्रति गतिशील मिनट अधिकतम 10 प्रॉम्प्ट भेज सकता है; अतिरिक्त प्रॉम्प्ट बिना सूचना के छोड़ दिए जाते हैं।

स्वीकृत प्रॉम्प्ट ट्रांसक्रिप्ट में सामान्य उपयोगकर्ता संदेशों के रूप में दिखाई देते हैं और विजेट के स्वामी सत्र में सामान्य एजेंट टर्न शुरू करते हैं। विजेट में कोई फ़ीडबैक चैनल नहीं होता: छोड़ा गया प्रॉम्प्ट बिना सूचना के विफल होता है और विजेट एजेंट का उत्तर नहीं पढ़ सकता।

सुरक्षा और संग्रहण

विजेट दस्तावेज़ प्रतिबंधात्मक Content Security Policies का उपयोग करते हैं। इनलाइन शैली और स्क्रिप्ट की अनुमति होती है, जबकि बाहरी फ़ेच और संसाधन लोड अवरुद्ध होते हैं। सभी मार्कअप, शैलियाँ, स्क्रिप्ट और छवि डेटा widget_code के भीतर रखें।

Control UI iframe हमेशा allow-same-origin को छोड़ देता है, भले ही वैश्विक एम्बेड मोड trusted हो, इसलिए विजेट स्क्रिप्ट मूल एप्लिकेशन ओरिजिन को नहीं पढ़ सकतीं। नेटिव क्लाइंट पृथक, गैर-स्थायी वेब व्यू का उपयोग करते हैं और होस्ट किए गए विजेट से बाहर नेविगेशन को अवरुद्ध करते हैं। मुख्य दस्तावेज़ होस्ट विजेट को Content-Security-Policy: sandbox allow-scripts प्रतिक्रिया हेडर के साथ भी सर्व करता है, इसलिए प्रत्यक्ष रेंडरिंग में भी विजेट एप्लिकेशन ओरिजिन के बजाय अपारदर्शी ओरिजिन में चलता है। केवल वही विजेट कोड रेंडर करें जिसे आप उस पृथक फ़्रेम में निष्पादित करने के लिए तैयार हों।

iframe gateway.controlUi.embedSandbox का भी पालन करता है। डिफ़ॉल्ट scripts स्तर ओरिजिन पृथक्करण बनाए रखते हुए इंटरैक्टिव विजेट का समर्थन करता है।

Canvas प्रति सत्र अधिकतम 32 विजेट बनाए रखता है (या सत्र उपलब्ध न होने पर प्रति एजेंट)। एक और विजेट बनाने पर उस दायरे का सबसे पुराना दस्तावेज़ हटा दिया जाता है।

संबंधित

• Control UI होस्टेड एम्बेड
• Discord Activities
• Canvas Node नियंत्रण
• Gateway प्रोटोकॉल क्लाइंट क्षमताएँ