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

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

जब एजेंट show_widget को कॉल करता है, तो OpenClaw कोर widget_code को एक न्यूनतम HTML दस्तावेज़ में लपेटता है, उसे Canvas दस्तावेज़ के रूप में संग्रहीत करता है और एक पूर्वावलोकन हैंडल लौटाता है। Control UI उस हैंडल को सैंडबॉक्स किए गए iframe में रेंडर करता है, जबकि iOS, Android, macOS और Linux Quick Chat पृथक वेब व्यू का उपयोग करते हैं। पूर्ण चैट क्लाइंट इतिहास दोबारा लोड होने के बाद विजेट को पुनर्स्थापित करते हैं; Quick Chat विजेट को उसके सक्रिय उत्तर के लिए बनाए रखता है। Control UI सत्रों में, Canvas विजेट को सत्र डैशबोर्ड पर पिन भी किया जा सकता है। टूल कॉल में pin: true सेट करें या मौजूदा ट्रांसक्रिप्ट विजेट पर डैशबोर्ड पर पिन करें का उपयोग करें। पिन किया गया HTML उसी समर्पित-ओरिजिन, दोहरे-iframe सैंडबॉक्स होस्ट के पीछे चलता है जिसका उपयोग MCP Apps करते हैं; ब्राउज़र अविश्वसनीय फ़्रेम के भीतर विजेट डेटा बाइंडिंग को कभी रिज़ॉल्व नहीं करता। ब्राउज़र में एम्बेड करने के लिए, रैपर दस्तावेज़ विजेट कोड के आसपास चार छोटे होस्ट ब्रिज इंजेक्ट करता है:
  • आकार रिपोर्टर रेंडर की गई सामग्री की ऊँचाई एम्बेडिंग चैट को पोस्ट करता है, जो उसे सीमित करके iframe में फ़िट करता है (160 से 1200 पिक्सेल)।
  • होस्ट ब्रिज पुराने sendPrompt(text) सहायक के साथ संरचित openclaw.prompt, openclaw.state, openclaw.data और openclaw.cron API परिभाषित करता है। इनलाइन चैट प्रॉम्प्ट अपना निजी संदेश चैनल बनाए रखते हैं; डैशबोर्ड API व्यू-टिकट-बाउंड अनुरोध चैनल का उपयोग करते हैं। इंटरैक्टिव विजेट और डैशबोर्ड क्षमताएँ देखें।
  • थीम ब्रिज Control UI के वर्तमान डिज़ाइन टोकन सुनता है और लोड होने पर तथा थीम के प्रत्येक परिवर्तन पर उन्हें CSS वेरिएबल के रूप में लागू करता है।
  • जब एम्बेडिंग चैट निर्यात का अनुरोध करती है, तो स्नैपशॉट ब्रिज वर्तमान विजेट दस्तावेज़ को PNG के रूप में रेंडर करता है।
बाकी सब कुछ फ़्रेम के भीतर रहता है: दस्तावेज़ सख्त Content Security Policy वाले अपारदर्शी ओरिजिन में चलता है, इसलिए विजेट स्क्रिप्ट Control UI, Gateway या नेटवर्क तक नहीं पहुँच सकतीं। मुख्य कार्यान्वयन केवल तभी उपलब्ध होता है जब आरंभ करने वाला Gateway क्लाइंट inline-widgets क्षमता घोषित करता है। Control UI और समर्थित नेटिव ऐप यह क्षमता स्वचालित रूप से घोषित करते हैं। कस्टम TLS लीफ़ पिन की आवश्यकता वाले Gateway कनेक्शन के लिए Linux Quick Chat केवल-पाठ बना रहता है, क्योंकि उसका प्लेटफ़ॉर्म WebView उस पिन को बाइंड नहीं कर सकता। Discord कार्यान्वयन केवल कॉन्फ़िगर की गई Activities वाले Discord सत्रों में उपलब्ध है। अन्य चैनल रन को 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 फ़ाइल डाउनलोड करते हैं।

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

दोनों कार्यान्वयन समान आवश्यक फ़ील्ड का उपयोग करते हैं:
​
string
आवश्यक
इनलाइन पूर्वावलोकन और होस्ट किए गए दस्तावेज़ के शीर्षक में दिखाया जाने वाला संक्षिप्त शीर्षक।
​
string
आवश्यक
स्व-निहित HTML या SVG। इनलाइन-विजेट क्लाइंट के लिए, ट्रिम करने के बाद <svg से शुरू होने वाला इनपुट SVG मोड में रेंडर होता है; अधिकतम लंबाई 262,144 वर्ण है। Discord 48 KiB तक का पूर्ण HTML दस्तावेज़ या मुख्य भाग का अंश स्वीकार करता है।
Discord Activity लॉन्च बटन के लिए वैकल्पिक button_label टेक्स्ट भी स्वीकार करता है। Canvas स्कीमा जानबूझकर केवल-Discord वाले इस फ़ील्ड को शामिल नहीं करता। मुख्य Canvas टूल इन वैकल्पिक डैशबोर्ड प्लेसमेंट फ़ील्ड को स्वीकार करता है:
  • pin: विजेट को सत्र डैशबोर्ड पर भी रखें।
  • name: स्थिर विजेट नाम; डिफ़ॉल्ट रूप से title का स्लग।
  • tab: गंतव्य टैब स्लग।
  • size: sm, md, lg, xl या full में से एक।
  • after: उस सहोदर विजेट का नाम जिसके बाद विजेट रखा जाना है।
  • capabilities: पिन किए गए विजेट द्वारा अनुरोधित पहुँच। netOrigins में सटीक HTTPS ओरिजिन होते हैं; tools में prompt, अनुमति-सूचीबद्ध रीड बाइंडिंग या सटीक cron.trigger:<jobId> कार्रवाई होती है।
मुख्य परिणाम में Canvas पूर्वावलोकन हैंडल शामिल होता है, इसलिए Control UI और समर्थित नेटिव ऐप टूल कॉल से सीधे विजेट रेंडर करते हैं और इतिहास दोबारा लोड होने के बाद उसे पुनर्स्थापित करते हैं। पिन किए गए परिणाम बोर्ड विजेट का नाम भी बनाए रखते हैं, ताकि ट्रांसक्रिप्ट दोबारा लोड होने के बाद Control UI डुप्लिकेट पिन का विकल्प न दे। Discord संग्रहीत विजेट और पोस्ट किए गए संदेश के पहचानकर्ता लौटाता है। discord_widget एक रिलीज़ के लिए अप्रचलित उपनाम के रूप में पंजीकृत रहता है। नए एजेंट कॉल को show_widget का उपयोग करना चाहिए।

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

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

​
डैशबोर्ड क्षमताएँ

ऑपरेटर द्वारा लंबित कार्ड पर दिखाई गई घोषणा की समीक्षा करने के बाद, पिन किए गए विजेट एक टिकट-बाउंड होस्ट API का उपयोग कर सकते हैं:
  • openclaw.prompt.send(text) के लिए क्षणिक उपयोगकर्ता सक्रियण आवश्यक है और यह कंपोज़र में एक दृश्यमान संदेश पोस्ट करता है। prompt टूल अनुदान को घोषित और प्राप्त करने से प्रत्येक क्लिक पर होने वाली अतिरिक्त पुष्टि छोड़ दी जाती है; सत्यापन, फ़ोकस जाँच और दर सीमाएँ फिर भी लागू रहती हैं।
  • openclaw.state.emit(payload) एक सत्र सूचना जोड़ता है। पेलोड अधिकतम 8 KiB तक सीमित हैं और पाँच सेकंड के भीतर क्लाइंट से होने वाले समान उत्सर्जनों को एक में समेकित किया जाता है।
  • openclaw.data.read(bindingId, params?) केवल Gateway पर रिज़ॉल्व होता है। अनुदान योग्य बाइंडिंग sessions.list, usage.status, usage.cost, cron.list, cron.status, agents.list, और health हैं।
  • openclaw.cron.trigger(jobId) किसी मौजूदा जॉब को अभी केवल तभी चलाता है, जब सटीक cron.trigger:<jobId> क्षमता प्रदान की गई हो।
नेटवर्क एक्सेस होस्ट टूल से अलग है। सटीक HTTPS ओरिजिन को capabilities.netOrigins में रखें; स्वीकृति के बाद केवल वे ओरिजिन विजेट के connect-src में प्रवेश करते हैं। वाइल्डकार्ड, क्रेडेंशियल, पाथ, क्वेरी स्ट्रिंग और अघोषित ओरिजिन अवरुद्ध रहते हैं। कोई शाब्दिक पोर्ट केवल तभी अनुमत है, जब वह घोषित ओरिजिन का हिस्सा हो।

​
सुरक्षा और स्टोरेज

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

​
संबंधित