Web interfaces

Control UI

Control UI, Gateway द्वारा सर्व की जाने वाली एक छोटी Vite + Lit single-page app है:

  • डिफ़ॉल्ट: http://<host>:18789/
  • वैकल्पिक prefix: gateway.controlUi.basePath सेट करें (जैसे /openclaw)

यह उसी port पर सीधे Gateway WebSocket से बात करता है.

तुरंत खोलें (स्थानीय)

अगर Gateway उसी कंप्यूटर पर चल रहा है, तो खोलें:

अगर पेज लोड नहीं होता, तो पहले Gateway शुरू करें: openclaw gateway.

Auth WebSocket handshake के दौरान इनके माध्यम से दी जाती है:

  • connect.params.auth.token
  • connect.params.auth.password
  • Tailscale Serve identity headers, जब gateway.auth.allowTailscale: true हो
  • trusted-proxy identity headers, जब gateway.auth.mode: "trusted-proxy" हो

Dashboard settings panel मौजूदा browser tab session और चुने गए gateway URL के लिए token रखता है; passwords persist नहीं किए जाते. Onboarding आम तौर पर पहले connect पर shared-secret auth के लिए gateway token बनाता है, लेकिन जब gateway.auth.mode "password" हो तो password auth भी काम करता है.

डिवाइस pairing (पहला connection)

जब आप किसी नए browser या device से Control UI से connect करते हैं, तो Gateway आम तौर पर one-time pairing approval मांगता है. यह unauthorized access रोकने के लिए एक security measure है.

आपको यह दिखेगा: "disconnected (1008): pairing required"

  • List pending requests

    bash
    openclaw devices list
  • Approve by request ID

    bash
    openclaw devices approve <requestId>
  • अगर browser बदली हुई auth details (role/scopes/public key) के साथ pairing retry करता है, तो पिछली pending request supersede हो जाती है और नया requestId बनाया जाता है. approval से पहले openclaw devices list फिर से चलाएं.

    अगर browser पहले से paired है और आप उसे read access से write/admin access में बदलते हैं, तो इसे silent reconnect नहीं, बल्कि approval upgrade माना जाता है. OpenClaw पुरानी approval को active रखता है, broader reconnect को block करता है, और आपसे नए scope set को स्पष्ट रूप से approve करने को कहता है.

    Approve होने के बाद, device याद रखा जाता है और जब तक आप उसे openclaw devices revoke --device <id> --role <role> से revoke नहीं करते, तब तक re-approval की जरूरत नहीं होगी. token rotation और revocation के लिए Devices CLI देखें.

    openclaw_gateway adapter के माध्यम से connect करने वाले Paperclip agents भी वही first-run approval flow इस्तेमाल करते हैं. initial connection attempt के बाद, pending request preview करने के लिए openclaw devices approve --latest चलाएं, फिर approve करने के लिए printed openclaw devices approve <requestId> command फिर से चलाएं. remote gateway के लिए explicit --url और --token values pass करें. restarts के बीच approvals stable रखने के लिए, हर run में नई ephemeral device identity generate करने देने के बजाय Paperclip में persistent adapterConfig.devicePrivateKeyPem configure करें.

    व्यक्तिगत identity (browser-local)

    Control UI per-browser personal identity (display name और avatar) का समर्थन करता है, जो shared sessions में attribution के लिए outgoing messages से जुड़ी होती है. यह browser storage में रहती है, मौजूदा browser profile तक scoped होती है, और आपके वास्तव में भेजे गए messages पर सामान्य transcript authorship metadata से आगे दूसरे devices पर sync या server-side persist नहीं की जाती. site data clear करने या browsers बदलने पर यह खाली हो जाती है.

    यही browser-local pattern assistant avatar override पर लागू होता है. Uploaded assistant avatars केवल local browser पर gateway-resolved identity को overlay करते हैं और कभी भी config.patch के माध्यम से round-trip नहीं करते. shared ui.assistant.avatar config field अभी भी उन non-UI clients के लिए उपलब्ध है जो field को सीधे लिखते हैं (जैसे scripted gateways या custom dashboards).

    Runtime config endpoint

    Control UI अपनी runtime settings /control-ui-config.json से fetch करता है, जो gateway के Control UI base path के relative resolve होता है (उदाहरण के लिए जब UI /__openclaw__/ के अंतर्गत served हो, तो /__openclaw__/control-ui-config.json). यह endpoint बाकी HTTP surface की तरह उसी gateway auth से gated है: unauthenticated browsers इसे fetch नहीं कर सकते, और successful fetch के लिए या तो पहले से valid gateway token/password, Tailscale Serve identity, या trusted-proxy identity चाहिए.

    भाषा support

    Control UI first load पर आपके browser locale के आधार पर खुद को localize कर सकता है. बाद में override करने के लिए, Overview -> Gateway Access -> Language खोलें. locale picker Gateway Access card में होता है, Appearance के अंतर्गत नहीं.

    • Supported locales: en, zh-CN, zh-TW, pt-BR, de, es, ja-JP, ko, fr, ar, it, tr, uk, id, pl, th, vi, nl, fa
    • Non-English translations browser में lazy-loaded होती हैं.
    • चुना गया locale browser storage में save होता है और future visits पर reuse होता है.
    • Missing translation keys वापस English पर fall back करती हैं.

    Docs translations उसी non-English locale set के लिए generate किए जाते हैं, लेकिन docs site का built-in Mintlify language picker उन locale codes तक सीमित है जिन्हें Mintlify accept करता है. Thai (th) और Persian (fa) docs अभी भी publish repo में generate होते हैं; वे उस picker में तब तक नहीं दिख सकते जब तक Mintlify उन codes को support नहीं करता.

    Appearance themes

    Appearance panel built-in Claw, Knot, और Dash themes के साथ एक browser-local tweakcn import slot रखता है. theme import करने के लिए, tweakcn editor खोलें, theme चुनें या बनाएं, Share पर click करें, और copied theme link को Appearance में paste करें. importer https://tweakcn.com/r/themes/<id> registry URLs, https://tweakcn.com/editor/theme?theme=amethyst-haze जैसे editor URLs, relative /themes/<id> paths, raw theme IDs, और amethyst-haze जैसे default theme names भी accept करता है.

    Appearance में browser-local Text size setting भी शामिल है. setting बाकी Control UI preferences के साथ stored होती है, chat text, composer text, tool cards, और chat sidebars पर apply होती है, और text inputs को कम से कम 16px रखती है ताकि mobile Safari focus पर auto-zoom न करे.

    Imported themes केवल मौजूदा browser profile में stored होते हैं. वे gateway config में नहीं लिखे जाते और devices के बीच sync नहीं होते. imported theme को replace करने से वही एक local slot update होता है; उसे clear करने पर, अगर imported theme selected था तो active theme वापस Claw पर switch हो जाता है.

    यह क्या कर सकता है (आज)

    Chat and Talk
    • Gateway WS (chat.history, chat.send, chat.abort, chat.inject) के माध्यम से model से chat करें.
    • Chat history refreshes, per-message text caps के साथ bounded recent window request करते हैं ताकि बड़ी sessions browser को chat usable होने से पहले full transcript payload render करने के लिए मजबूर न करें.
    • browser realtime sessions के माध्यम से बात करें. OpenAI direct WebRTC इस्तेमाल करता है, Google Live WebSocket पर constrained one-use browser token इस्तेमाल करता है, और backend-only realtime voice plugins Gateway relay transport इस्तेमाल करते हैं. Client-owned provider sessions talk.client.create से शुरू होते हैं; Gateway relay sessions talk.session.create से शुरू होते हैं. relay provider credentials को Gateway पर रखता है, जबकि browser microphone PCM को talk.session.appendAudio के माध्यम से stream करता है, Gateway policy और बड़े configured OpenClaw model के लिए openclaw_agent_consult provider tool calls को talk.client.toolCall के माध्यम से forward करता है, और active-run voice steering को talk.client.steer या talk.session.steer के माध्यम से route करता है.
    • Chat में tool calls + live tool output cards stream करें (agent events).
    • मौजूदा session.tool / tool event delivery से live tool activity के browser-local, redaction-first summaries वाला Activity tab.
    Channels, instances, sessions, dreams
    • Channels: built-in plus bundled/external plugin channels status, QR login, और per-channel config (channels.status, web.login.*, config.patch).
    • Channel probe refreshes, slow provider checks finish होने तक previous snapshot visible रखते हैं, और जब probe या audit अपने UI budget से आगे जाता है तो partial snapshots labeled होते हैं.
    • Instances: presence list + refresh (system-presence).
    • Sessions: default रूप से configured-agent sessions list करें, stale unconfigured agent session keys से fall back करें, और per-session model/thinking/fast/verbose/trace/reasoning overrides apply करें (sessions.list, sessions.patch).
    • Dreams: dreaming status, enable/disable toggle, और Dream Diary reader (doctor.memory.status, doctor.memory.dreamDiary, config.patch).
    Cron, skills, nodes, exec approvals
    • Cron jobs: list/add/edit/run/enable/disable + run history (cron.*).
    • Skills: status, enable/disable, install, API key updates (skills.*).
    • Nodes: list + caps (node.list).
    • Exec approvals: exec host=gateway/node के लिए gateway या node allowlists + ask policy edit करें (exec.approvals.*).
    Config
    • ~/.openclaw/openclaw.json देखें/edit करें (config.get, config.set).
    • MCP के पास configured servers, enablement, OAuth/filter/parallel summaries, common operator commands, और scoped mcp config editor के लिए dedicated settings page है.
    • validation के साथ apply + restart करें (config.apply) और last active session को wake करें.
    • Writes में concurrent edits clobber होने से रोकने के लिए base-hash guard शामिल है.
    • Writes (config.set/config.apply/config.patch) submitted config payload में refs के लिए active SecretRef resolution preflight करते हैं; unresolved active submitted refs write से पहले reject कर दिए जाते हैं.
    • Form saves, saved config से restore न हो सकने वाले stale redacted placeholders discard करते हैं, जबकि saved secrets से अभी भी map होने वाली redacted values preserve करते हैं.
    • Schema + form rendering (config.schema / config.schema.lookup, जिसमें field title / description, matched UI hints, immediate child summaries, nested object/wildcard/array/composition nodes पर docs metadata, और उपलब्ध होने पर plugin + channel schemas शामिल हैं); Raw JSON editor केवल तब उपलब्ध होता है जब snapshot में safe raw round-trip हो.
    • अगर snapshot raw text को safely round-trip नहीं कर सकता, तो Control UI उस snapshot के लिए Form mode force करता है और Raw mode disable करता है.
    • Raw JSON editor "Reset to saved", flattened snapshot re-render करने के बजाय raw-authored shape (formatting, comments, $include layout) preserve करता है, ताकि snapshot safely round-trip कर सके तो external edits reset के बाद भी बचें.
    • Structured SecretRef object values को form text inputs में read-only render किया जाता है ताकि accidental object-to-string corruption रोका जा सके.
    Debug, logs, update
    • Debug: status/health/models snapshots + event log + manual RPC calls (status, health, models.list).
    • event log में Control UI refresh/RPC timings, slow chat/config render timings, और long animation frames या long tasks के लिए browser responsiveness entries शामिल होती हैं, जब browser वे PerformanceObserver entry types expose करता है.
    • Logs: filter/export के साथ gateway file logs की live tail (logs.tail).
    • Update: restart report के साथ package/git update + restart चलाएं (update.run), फिर reconnect के बाद running gateway version verify करने के लिए update.status poll करें.
    Cron jobs पैनल नोट्स
    • अलग-थलग jobs के लिए, delivery डिफ़ॉल्ट रूप से announce summary होती है। यदि आप केवल-आंतरिक runs चाहते हैं, तो आप none पर स्विच कर सकते हैं।
    • announce चुने जाने पर Channel/target फ़ील्ड दिखाई देते हैं।
    • Webhook मोड delivery.mode = "webhook" का उपयोग करता है, जिसमें delivery.to को मान्य HTTP(S) webhook URL पर सेट किया जाता है।
    • main-session jobs के लिए, webhook और none delivery मोड उपलब्ध हैं।
    • उन्नत edit controls में delete-after-run, clear agent override, cron exact/stagger विकल्प, agent model/thinking overrides, और best-effort delivery toggles शामिल हैं।
    • Form validation field-level errors के साथ inline है; अमान्य मान save बटन को ठीक होने तक निष्क्रिय रखते हैं।
    • समर्पित bearer token भेजने के लिए cron.webhookToken सेट करें; यदि छोड़ा गया हो, तो webhook auth header के बिना भेजा जाता है।
    • अप्रचलित fallback: cron.webhook से स्पष्ट per-job webhook या completion delivery में notify: true वाले संग्रहित legacy jobs को माइग्रेट करने के लिए openclaw doctor --fix चलाएँ।

    MCP पेज

    समर्पित MCP पेज mcp.servers के अंतर्गत OpenClaw-प्रबंधित MCP servers के लिए operator view है। यह अपने आप MCP transports शुरू नहीं करता; सहेजे गए config का निरीक्षण और edit करने के लिए इसका उपयोग करें, फिर जब आपको live server proof की आवश्यकता हो तो openclaw mcp doctor --probe का उपयोग करें।

    सामान्य workflow:

    1. sidebar से MCP खोलें।
    2. total, enabled, OAuth, और filtered server counts के लिए summary cards जाँचें।
    3. transport, enablement, auth, filters, timeouts, और command hints के लिए प्रत्येक server row की समीक्षा करें।
    4. जब किसी server को configured रहना चाहिए लेकिन runtime discovery से बाहर रखना हो, तो enablement toggle करें।
    5. server definitions, headers, TLS/mTLS paths, OAuth metadata, tool filters, और Codex projection metadata के लिए scoped mcp config section edit करें।
    6. config write के लिए Save का उपयोग करें, या जब running Gateway को बदला हुआ config लागू करना हो तो Save & Publish का उपयोग करें।
    7. जब edited process को static diagnostics, live proof, या cached-runtime disposal की आवश्यकता हो, तो terminal से openclaw mcp status --verbose, openclaw mcp doctor --probe, या openclaw mcp reload चलाएँ।

    पेज render करने से पहले credential-bearing URL-like values को redact करता है और command snippets में server names को quote करता है, ताकि copied commands spaces या shell metacharacters के साथ भी काम करें। पूरा CLI और config reference MCP में है।

    Activity टैब

    Activity टैब live tool activity के लिए ephemeral browser-local observer है। यह उसी Gateway session.tool / tool event stream से व्युत्पन्न है जो Chat tool cards को power करता है; यह कोई दूसरी Gateway event family, endpoint, durable activity store, metrics feed, या external observer stream नहीं जोड़ता।

    Activity entries केवल sanitized summaries और redacted, truncated output previews रखती हैं। Tool argument values Activity state में store नहीं किए जाते; UI दिखाता है कि arguments hidden हैं और केवल argument field count record करता है। in-memory list वर्तमान browser tab का अनुसरण करती है, Control UI के भीतर navigation के दौरान बनी रहती है, और page reload, session switch, या Clear पर reset हो जाती है।

    Chat व्यवहार

    भेजने और इतिहास के सिमैंटिक्स
    • chat.send नॉन-ब्लॉकिंग है: यह तुरंत { runId, status: "started" } के साथ ACK देता है और प्रतिक्रिया chat इवेंट्स के माध्यम से स्ट्रीम होती है। विश्वसनीय Control UI क्लाइंट्स को स्थानीय डायग्नॉस्टिक्स के लिए वैकल्पिक ACK टाइमिंग मेटाडेटा भी मिल सकता है।
    • चैट अपलोड इमेज और गैर-वीडियो फ़ाइलें स्वीकार करते हैं। इमेज मूल इमेज पथ रखती हैं; अन्य फ़ाइलें प्रबंधित मीडिया के रूप में संग्रहीत होती हैं और इतिहास में अटैचमेंट लिंक के रूप में दिखाई जाती हैं।
    • उसी idempotencyKey के साथ दोबारा भेजने पर, रनिंग के दौरान { status: "in_flight" } और पूरा होने के बाद { status: "ok" } लौटता है।
    • UI सुरक्षा के लिए chat.history प्रतिक्रियाएं आकार-सीमित होती हैं। जब ट्रांसक्रिप्ट प्रविष्टियां बहुत बड़ी होती हैं, Gateway लंबे टेक्स्ट फ़ील्ड को छोटा कर सकता है, भारी मेटाडेटा ब्लॉक छोड़ सकता है, और बहुत बड़े संदेशों को प्लेसहोल्डर ([chat.history omitted: message too large]) से बदल सकता है।
    • जब कोई दृश्यमान असिस्टेंट संदेश chat.history में छोटा किया गया हो, तो साइड रीडर मांग पर sessionKey, जरूरत होने पर सक्रिय agentId, और ट्रांसक्रिप्ट messageId के जरिए chat.message.get से पूर्ण प्रदर्शन-सामान्यीकृत ट्रांसक्रिप्ट प्रविष्टि ला सकता है। यदि Gateway फिर भी अधिक नहीं लौटा सकता, तो रीडर छोटे किए गए प्रीव्यू को चुपचाप दोहराने के बजाय स्पष्ट अनुपलब्ध अवस्था दिखाता है।
    • असिस्टेंट/जनरेट की गई इमेज प्रबंधित मीडिया रेफ़रेंस के रूप में स्थायी की जाती हैं और प्रमाणित Gateway मीडिया URLs के माध्यम से वापस सर्व की जाती हैं, इसलिए रीलोड कच्चे base64 इमेज पेलोड के चैट इतिहास प्रतिक्रिया में बने रहने पर निर्भर नहीं करते।
    • chat.history रेंडर करते समय, Control UI दृश्यमान असिस्टेंट टेक्स्ट से केवल-प्रदर्शन इनलाइन डायरेक्टिव टैग (उदाहरण के लिए [[reply_to_*]] और [[audio_as_voice]]), प्लेन-टेक्स्ट टूल-कॉल XML पेलोड (जिसमें <tool_call>...</tool_call>, <function_call>...</function_call>, <tool_calls>...</tool_calls>, <function_calls>...</function_calls>, और छोटे किए गए टूल-कॉल ब्लॉक शामिल हैं), और लीक हुए ASCII/फुल-विथ मॉडल कंट्रोल टोकन हटाता है, और उन असिस्टेंट प्रविष्टियों को छोड़ देता है जिनका पूरा दृश्यमान टेक्स्ट केवल ठीक-ठीक मौन टोकन NO_REPLY / no_reply या Heartbeat स्वीकृति टोकन HEARTBEAT_OK है।
    • सक्रिय भेजने और अंतिम इतिहास रिफ्रेश के दौरान, यदि chat.history थोड़ी देर के लिए पुराना स्नैपशॉट लौटाता है, तो चैट व्यू स्थानीय आशावादी यूज़र/असिस्टेंट संदेशों को दृश्यमान रखता है; Gateway इतिहास के बराबर आते ही canonical ट्रांसक्रिप्ट उन स्थानीय संदेशों को बदल देता है।
    • लाइव chat इवेंट्स डिलीवरी स्थिति हैं, जबकि chat.history टिकाऊ सेशन ट्रांसक्रिप्ट से फिर से बनाया जाता है। टूल-फाइनल इवेंट्स के बाद Control UI इतिहास रीलोड करता है और केवल एक छोटी आशावादी टेल मर्ज करता है; ट्रांसक्रिप्ट सीमा WebChat में दस्तावेजीकृत है।
    • chat.inject सेशन ट्रांसक्रिप्ट में एक असिस्टेंट नोट जोड़ता है और केवल-UI अपडेट के लिए chat इवेंट ब्रॉडकास्ट करता है (कोई एजेंट रन नहीं, कोई चैनल डिलीवरी नहीं)।
    • चैट हेडर सेशन पिकर से पहले एजेंट फ़िल्टर दिखाता है, और सेशन पिकर चुने गए एजेंट के दायरे में रहता है। एजेंट बदलने पर केवल उस एजेंट से जुड़े सेशन दिखते हैं और यदि उसके पास अभी तक कोई सहेजा गया डैशबोर्ड सेशन नहीं है, तो उस एजेंट के मुख्य सेशन पर fallback होता है।
    • डेस्कटॉप चौड़ाइयों पर, चैट कंट्रोल एक कॉम्पैक्ट पंक्ति में रहते हैं और ट्रांसक्रिप्ट में नीचे स्क्रोल करते समय collapse हो जाते हैं; ऊपर स्क्रोल करने, शीर्ष पर लौटने, या नीचे पहुंचने पर कंट्रोल फिर से दिखते हैं।
    • लगातार डुप्लिकेट केवल-टेक्स्ट संदेश एक गिनती बैज वाले एक बबल के रूप में रेंडर होते हैं। इमेज, अटैचमेंट, टूल आउटपुट, या कैनवास प्रीव्यू वाले संदेश collapse नहीं किए जाते।
    • चैट हेडर मॉडल और thinking पिकर sessions.patch के जरिए सक्रिय सेशन को तुरंत patch करते हैं; वे स्थायी सेशन overrides हैं, केवल एक-turn भेजने के विकल्प नहीं।
    • यदि आप उसी सेशन के लिए मॉडल पिकर परिवर्तन के अभी भी सेव होते समय संदेश भेजते हैं, तो composer chat.send कॉल करने से पहले उस सेशन patch की प्रतीक्षा करता है ताकि भेजना चुने गए मॉडल का उपयोग करे।
    • Control UI में /new टाइप करने से New Chat जैसा ही नया डैशबोर्ड सेशन बनता और उस पर स्विच होता है, सिवाय इसके कि जब session.dmScope: "main" कॉन्फ़िगर हो और वर्तमान parent एजेंट का मुख्य सेशन हो; उस स्थिति में यह मुख्य सेशन को वहीं reset करता है। /reset टाइप करने से वर्तमान सेशन के लिए Gateway का स्पष्ट in-place reset बना रहता है।
    • चैट मॉडल पिकर Gateway के कॉन्फ़िगर किए गए मॉडल व्यू का अनुरोध करता है। यदि agents.defaults.models मौजूद है, तो वही allowlist पिकर को चलाती है, जिसमें provider/* प्रविष्टियां भी शामिल हैं जो provider-scoped catalogs को dynamic रखती हैं। अन्यथा पिकर स्पष्ट models.providers.*.models प्रविष्टियां और usable auth वाले providers दिखाता है। पूरा catalog debug models.list RPC के माध्यम से view: "all" के साथ उपलब्ध रहता है।
    • जब ताज़ा Gateway सेशन usage रिपोर्ट में वर्तमान context tokens शामिल होते हैं, तो चैट composer क्षेत्र एक कॉम्पैक्ट context usage indicator दिखाता है। यह उच्च context pressure पर warning styling में बदलता है और, recommended compaction levels पर, एक कॉम्पैक्ट बटन दिखाता है जो सामान्य session compaction path चलाता है। पुराने token snapshots तब तक छिपाए जाते हैं जब तक Gateway फिर से fresh usage रिपोर्ट नहीं करता।
    Talk मोड (ब्राउज़र रीयलटाइम)

    Talk मोड एक registered realtime voice provider का उपयोग करता है। OpenAI को talk.realtime.provider: "openai" के साथ एक openai API-key auth profile, talk.realtime.providers.openai.apiKey, या OPENAI_API_KEY से कॉन्फ़िगर करें; OpenAI OAuth profiles Realtime voice कॉन्फ़िगर नहीं करते। Google को talk.realtime.provider: "google" के साथ talk.realtime.providers.google.apiKey से कॉन्फ़िगर करें। ब्राउज़र को कभी standard provider API key नहीं मिलती। OpenAI को WebRTC के लिए ephemeral Realtime client secret मिलता है। Google Live को browser WebSocket session के लिए one-use constrained Live API auth token मिलता है, जिसमें निर्देश और tool declarations Gateway द्वारा token में locked होते हैं। जो providers केवल backend realtime bridge expose करते हैं, वे Gateway relay transport के जरिए चलते हैं, इसलिए credentials और vendor sockets server-side रहते हैं जबकि browser audio authenticated Gateway RPCs से गुजरता है। Realtime session prompt Gateway द्वारा assembled होता है; talk.client.create caller-provided instruction overrides स्वीकार नहीं करता।

    Chat composer में Talk start/stop button के बगल में Talk options button होता है। विकल्प अगले Talk session पर लागू होते हैं और provider, transport, model, voice, reasoning effort, VAD threshold, silence duration, और prefix padding override कर सकते हैं। जब कोई विकल्प blank हो, तो Gateway उपलब्ध होने पर configured defaults या provider default का उपयोग करता है। Gateway relay चुनने से backend relay path force होता है; WebRTC चुनने से session client-owned रहता है और यदि provider browser session नहीं बना सकता, तो relay पर चुपचाप fallback करने के बजाय fail होता है।

    Chat composer में, Talk control microphone dictation button के बगल का waves button है। जब Talk शुरू होता है, composer status row पहले Connecting Talk..., फिर audio connected होने पर Talk live, या realtime tool call द्वारा configured larger model से talk.client.toolCall के जरिए परामर्श करते समय Asking OpenClaw... दिखाती है।

    Maintainer live smoke: OPENAI_API_KEY=... GEMINI_API_KEY=... node --import tsx scripts/dev/realtime-talk-live-smoke.ts OpenAI backend WebSocket bridge, OpenAI browser WebRTC SDP exchange, Google Live constrained-token browser WebSocket setup, और fake microphone media के साथ Gateway relay browser adapter verify करता है। कमांड केवल provider status print करता है और secrets log नहीं करता।

    रोकना और abort करना
    • Stop पर क्लिक करें (chat.abort कॉल करता है)।
    • जब कोई run सक्रिय हो, सामान्य follow-ups queue होते हैं। queued संदेश पर Steer क्लिक करके उस follow-up को running turn में inject करें।
    • out-of-band abort करने के लिए /stop टाइप करें (या standalone abort phrases जैसे stop, stop action, stop run, stop openclaw, please stop)।
    • chat.abort उस session के सभी active runs abort करने के लिए { sessionKey } (कोई runId नहीं) support करता है।
    Abort partial retention
    • जब कोई run abort होता है, partial assistant text फिर भी UI में दिखाया जा सकता है।
    • buffered output मौजूद होने पर Gateway aborted partial assistant text को transcript history में persist करता है।
    • Persisted entries में abort metadata शामिल होता है ताकि transcript consumers abort partials को normal completion output से अलग पहचान सकें।

    PWA install और web push

    Control UI एक manifest.webmanifest और service worker के साथ आता है, इसलिए modern browsers इसे standalone PWA के रूप में install कर सकते हैं। Web Push Gateway को notifications के साथ installed PWA को wake करने देता है, तब भी जब tab या browser window खुली न हो।

    यदि OpenClaw update के तुरंत बाद page Protocol mismatch दिखाता है, तो पहले openclaw dashboard के साथ dashboard फिर से खोलें और page को hard-refresh करें। यदि फिर भी fail हो, तो dashboard origin के लिए site data clear करें या private browser window में test करें; पुराना tab या browser service-worker cache नए Gateway के सामने pre-update Control UI bundle चलाता रह सकता है।

    सतह यह क्या करता है
    ui/public/manifest.webmanifest PWA manifest. पहुँच योग्य होने पर ब्राउज़र "ऐप इंस्टॉल करें" का विकल्प देते हैं।
    ui/public/sw.js Service worker जो push ईवेंट और notification क्लिक संभालता है।
    push/vapid-keys.json (OpenClaw state dir के अंतर्गत) Web Push payloads पर हस्ताक्षर करने के लिए उपयोग की जाने वाली स्वतः-जनरेट की गई VAPID keypair।
    push/web-push-subscriptions.json स्थायी रूप से सहेजे गए browser subscription endpoints।

    जब आप keys को स्थिर रखना चाहते हैं (multi-host deployments, secrets rotation, या tests के लिए), Gateway process पर env vars के माध्यम से VAPID keypair override करें:

    • OPENCLAW_VAPID_PUBLIC_KEY
    • OPENCLAW_VAPID_PRIVATE_KEY
    • OPENCLAW_VAPID_SUBJECT (डिफ़ॉल्ट https://openclaw.ai है)

    Control UI browser subscriptions को register और test करने के लिए इन scope-gated Gateway methods का उपयोग करता है:

    • push.web.vapidPublicKey — सक्रिय VAPID public key fetch करता है।
    • push.web.subscribeendpoint और keys.p256dh/keys.auth register करता है।
    • push.web.unsubscribe — registered endpoint हटाता है।
    • push.web.test — caller के subscription को test notification भेजता है।

    Hosted embeds

    Assistant messages [embed ...] shortcode के साथ hosted web content को inline render कर सकते हैं। iframe sandbox policy gateway.controlUi.embedSandbox द्वारा नियंत्रित होती है:

    strict

    hosted embeds के अंदर script execution disabled करता है।

    scripts (default)

    origin isolation बनाए रखते हुए interactive embeds की अनुमति देता है; यह default है और आमतौर पर self-contained browser games/widgets के लिए पर्याप्त होता है।

    trusted

    same-site documents के लिए allow-scripts के ऊपर allow-same-origin जोड़ता है, जिन्हें जानबूझकर अधिक मजबूत privileges चाहिए।

    उदाहरण:

    json5
    {  gateway: {    controlUi: {      embedSandbox: "scripts",    },  },}

    Absolute external http(s) embed URLs default रूप से blocked रहते हैं। यदि आप जानबूझकर [embed url="https://..."] को third-party pages load करने देना चाहते हैं, तो gateway.controlUi.allowExternalEmbedUrls: true set करें।

    Chat message width

    Grouped chat messages पढ़ने योग्य default max-width का उपयोग करते हैं। Wide-monitor deployments bundled CSS को patch किए बिना gateway.controlUi.chatMessageMaxWidth set करके इसे override कर सकते हैं:

    json5
    {  gateway: {    controlUi: {      chatMessageMaxWidth: "min(1280px, 82%)",    },  },}

    यह value browser तक पहुँचने से पहले validate की जाती है। Supported values में plain lengths और percentages जैसे 960px या 82%, साथ ही constrained min(...), max(...), clamp(...), calc(...), और fit-content(...) width expressions शामिल हैं।

    Tailnet access (recommended)

    Integrated Tailscale Serve (preferred)

    Gateway को loopback पर रखें और Tailscale Serve को HTTPS के साथ उसका proxy करने दें:

    bash
    openclaw gateway --tailscale serve

    खोलें:

    • https://<magicdns>/ (या आपका configured gateway.controlUi.basePath)

    Default रूप से, जब gateway.auth.allowTailscale true होता है, Control UI/WebSocket Serve requests Tailscale identity headers (tailscale-user-login) के माध्यम से authenticate कर सकते हैं। OpenClaw x-forwarded-for address को tailscale whois से resolve करके और उसे header से match करके identity verify करता है, और इन्हें केवल तब accept करता है जब request loopback पर Tailscale के x-forwarded-* headers के साथ आती है। Browser device identity वाले Control UI operator sessions के लिए, यह verified Serve path device-pairing round trip को भी skip करता है; device-less browsers और node-role connections अभी भी सामान्य device checks का पालन करते हैं। यदि आप Serve traffic के लिए भी explicit shared-secret credentials आवश्यक करना चाहते हैं, तो gateway.auth.allowTailscale: false set करें। फिर gateway.auth.mode: "token" या "password" का उपयोग करें।

    उस async Serve identity path के लिए, समान client IP और auth scope की failed auth attempts rate-limit writes से पहले serialized की जाती हैं। इसलिए समान browser से concurrent bad retries दूसरे request पर parallel में race करती हुई दो plain mismatches के बजाय retry later दिखा सकती हैं।

    Bind to tailnet + token

    bash
    openclaw gateway --bind tailnet --token "$(openssl rand -hex 32)"

    फिर खोलें:

    • http://<tailscale-ip>:18789/ (या आपका configured gateway.controlUi.basePath)

    Matching shared secret को UI settings में paste करें (connect.params.auth.token या connect.params.auth.password के रूप में भेजा जाता है)।

    Insecure HTTP

    यदि आप dashboard को plain HTTP (http://<lan-ip> या http://<tailscale-ip>) पर खोलते हैं, तो browser non-secure context में चलता है और WebCrypto को block करता है। Default रूप से, OpenClaw device identity के बिना Control UI connections को block करता है।

    Documented exceptions:

    • gateway.controlUi.allowInsecureAuth=true के साथ localhost-only insecure HTTP compatibility
    • gateway.auth.mode: "trusted-proxy" के माध्यम से सफल operator Control UI auth
    • break-glass gateway.controlUi.dangerouslyDisableDeviceAuth=true

    Recommended fix: HTTPS (Tailscale Serve) का उपयोग करें या UI को locally खोलें:

    • https://<magicdns>/ (Serve)
    • http://127.0.0.1:18789/ (gateway host पर)
    Insecure-auth toggle behavior
    json5
    {  gateway: {    controlUi: { allowInsecureAuth: true },    bind: "tailnet",    auth: { mode: "token", token: "replace-me" },  },}

    allowInsecureAuth केवल local compatibility toggle है:

    • यह non-secure HTTP contexts में localhost Control UI sessions को device identity के बिना आगे बढ़ने देता है।
    • यह pairing checks को bypass नहीं करता।
    • यह remote (non-localhost) device identity requirements को relax नहीं करता।
    Break-glass only
    json5
    {  gateway: {    controlUi: { dangerouslyDisableDeviceAuth: true },    bind: "tailnet",    auth: { mode: "token", token: "replace-me" },  },}
    Trusted-proxy note
    • सफल trusted-proxy auth operator Control UI sessions को device identity के बिना admit कर सकता है।
    • यह node-role Control UI sessions तक extend नहीं होता।
    • Same-host loopback reverse proxies अभी भी trusted-proxy auth satisfy नहीं करते; Trusted proxy auth देखें।

    HTTPS setup guidance के लिए Tailscale देखें।

    Content security policy

    Control UI एक tight img-src policy के साथ ship होता है: केवल same-origin assets, data: URLs, और locally generated blob: URLs allowed हैं। Remote http(s) और protocol-relative image URLs browser द्वारा rejected होते हैं और network fetches issue नहीं करते।

    व्यवहार में इसका अर्थ:

    • Relative paths के अंतर्गत served avatars और images (उदाहरण के लिए /avatars/<id>) अभी भी render होते हैं, authenticated avatar routes सहित जिन्हें UI fetch करता है और local blob: URLs में convert करता है।
    • Inline data:image/... URLs अभी भी render होते हैं (in-protocol payloads के लिए उपयोगी)।
    • Control UI द्वारा बनाए गए local blob: URLs अभी भी render होते हैं।
    • Channel metadata द्वारा emitted remote avatar URLs Control UI के avatar helpers पर stripped होते हैं और built-in logo/badge से replaced होते हैं, इसलिए compromised या malicious channel operator browser से arbitrary remote image fetches force नहीं कर सकता।

    इस behavior को पाने के लिए आपको कुछ भी change करने की आवश्यकता नहीं है — यह हमेशा on रहता है और configurable नहीं है।

    Avatar route auth

    जब gateway auth configured होता है, Control UI avatar endpoint को API के बाकी हिस्से जैसा ही gateway token चाहिए:

    • GET /avatar/<agentId> केवल authenticated callers को avatar image return करता है। GET /avatar/<agentId>?meta=1 उसी rule के अंतर्गत avatar metadata return करता है।
    • किसी भी route पर unauthenticated requests rejected होते हैं (sibling assistant-media route से match करते हुए)। यह avatar route को उन hosts पर agent identity leak करने से रोकता है जो अन्यथा protected हैं।
    • Control UI स्वयं avatars fetch करते समय gateway token को bearer header के रूप में forward करता है, और authenticated blob URLs का उपयोग करता है ताकि image dashboards में अभी भी render हो।

    यदि आप gateway auth disable करते हैं (shared hosts पर recommended नहीं), तो gateway के बाकी हिस्से की तरह avatar route भी unauthenticated हो जाता है।

    Assistant media route auth

    जब gateway auth configured होता है, assistant local-media previews two-step route का उपयोग करते हैं:

    • GET /__openclaw__/assistant-media?meta=1&source=<path> को normal Control UI operator auth चाहिए। Availability check करते समय browser gateway token को bearer header के रूप में भेजता है।
    • Successful metadata responses में उस exact source path तक scoped short-lived mediaTicket शामिल होता है।
    • Browser-rendered image, audio, video, और document URLs active gateway token या password के बजाय mediaTicket=<ticket> का उपयोग करते हैं। Ticket जल्दी expire हो जाता है और किसी different source को authorize नहीं कर सकता।

    यह browser-native media elements के साथ normal media rendering को compatible रखता है, बिना reusable gateway credentials को visible media URLs में डालने के।

    Building the UI

    Gateway dist/control-ui से static files serve करता है। इन्हें इससे build करें:

    bash
    pnpm ui:build

    Optional absolute base (जब आप fixed asset URLs चाहते हैं):

    bash
    OPENCLAW_CONTROL_UI_BASE_PATH=/openclaw/ pnpm ui:build

    Local development के लिए (separate dev server):

    bash
    pnpm ui:dev

    फिर UI को अपने Gateway WS URL (जैसे ws://127.0.0.1:18789) पर point करें।

    Blank Control UI page

    यदि browser blank dashboard load करता है और DevTools कोई उपयोगी error नहीं दिखाता, तो किसी extension या early content script ने JavaScript module app को evaluate होने से रोका हो सकता है। Static page में plain HTML recovery panel शामिल है जो startup के बाद <openclaw-app> registered न होने पर दिखाई देता है।

    Browser environment बदलने के बाद panel की Try again action का उपयोग करें, या इन checks के बाद manually reload करें:

    • उन extensions को disable करें जो सभी pages में inject करते हैं, विशेषकर <all_urls> content scripts वाली extensions।
    • Private window, clean browser profile, या कोई दूसरा browser आज़माएँ।
    • Gateway running रखें और browser change के बाद वही dashboard URL verify करें।

    Debugging/testing: dev server + remote Gateway

    Control UI static files है; WebSocket target configurable है और HTTP origin से अलग हो सकता है। यह तब उपयोगी है जब आप Vite dev server locally चाहते हैं लेकिन Gateway कहीं और run होता है।

  • Start the UI dev server

    bash
    pnpm ui:dev
  • Open with gatewayUrl

    text
    http://localhost:5173/?gatewayUrl=ws%3A%2F%2F<gateway-host>%3A18789

    Optional one-time auth (यदि आवश्यक हो):

    text
    http://localhost:5173/?gatewayUrl=wss%3A%2F%2F<gateway-host>%3A18789#token=<gateway-token>
  • Notes
    • gatewayUrl लोड होने के बाद localStorage में संग्रहीत किया जाता है और URL से हटा दिया जाता है।
    • यदि आप gatewayUrl के माध्यम से पूरा ws:// या wss:// endpoint पास करते हैं, तो gatewayUrl मान को URL-encode करें ताकि ब्राउज़र query string को सही ढंग से पार्स करे।
    • जब भी संभव हो, token को URL fragment (#token=...) के माध्यम से पास किया जाना चाहिए। Fragments सर्वर को नहीं भेजे जाते, जिससे request-log और Referer leakage से बचा जाता है। Legacy ?token= query params अभी भी compatibility के लिए एक बार imported होते हैं, लेकिन केवल fallback के रूप में, और bootstrap के तुरंत बाद हटा दिए जाते हैं।
    • password केवल memory में रखा जाता है।
    • जब gatewayUrl सेट होता है, तो UI config या environment credentials पर fallback नहीं करता। token (या password) स्पष्ट रूप से प्रदान करें। स्पष्ट credentials का न होना एक error है।
    • जब Gateway TLS (Tailscale Serve, HTTPS proxy, आदि) के पीछे हो, तो wss:// का उपयोग करें।
    • clickjacking रोकने के लिए gatewayUrl केवल top-level window (embedded नहीं) में स्वीकार किया जाता है।
    • सार्वजनिक non-loopback Control UI deployments को gateway.controlUi.allowedOrigins स्पष्ट रूप से सेट करना होगा (पूर्ण origins)। loopback, RFC1918/link-local, .local, .ts.net, या Tailscale CGNAT hosts से private same-origin LAN/Tailnet loads Host-header fallback सक्षम किए बिना स्वीकार किए जाते हैं।
    • Gateway startup effective runtime bind और port से http://localhost:<port> और http://127.0.0.1:<port> जैसे local origins seed कर सकता है, लेकिन remote browser origins को अभी भी स्पष्ट entries चाहिए।
    • कड़े नियंत्रण वाले local testing को छोड़कर gateway.controlUi.allowedOrigins: ["*"] का उपयोग न करें। इसका अर्थ है किसी भी browser origin को allow करना, न कि "मैं जो भी host उपयोग कर रहा हूं उससे match करें।"
    • gateway.controlUi.dangerouslyAllowHostHeaderOriginFallback=true Host-header origin fallback mode सक्षम करता है, लेकिन यह एक खतरनाक security mode है।

    उदाहरण:

    json5
    {  gateway: {    controlUi: {      allowedOrigins: ["http://localhost:5173"],    },  },}

    Remote access setup विवरण: Remote access.

    संबंधित

    Was this useful?
    On this page

    On this page