Files
Memoh/assets/getting-started_browser.md.CjVL6wjg.js
2026-04-23 13:02:42 +00:00

2 lines
7.1 KiB
JavaScript
Raw Permalink Blame History

This file contains invisible Unicode characters
This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
import{_ as e,o,c as r,ag as a}from"./chunks/framework.CAXxHpAX.js";const p=JSON.parse('{"title":"Browser Contexts","description":"","frontmatter":{},"headers":[],"relativePath":"getting-started/browser.md","filePath":"getting-started/browser.md","lastUpdated":1774787421000}'),s={name:"getting-started/browser.md"};function i(n,t,l,d,c,h){return o(),r("div",null,[...t[0]||(t[0]=[a('<h1 id="browser-contexts" tabindex="-1">Browser Contexts <a class="header-anchor" href="#browser-contexts" aria-label="Permalink to &quot;Browser Contexts&quot;"></a></h1><p>Memoh can give a bot access to a headless browser through the <strong>Browser Gateway</strong>. A <strong>Browser Context</strong> stores the browser environment a bot should use, such as viewport size, locale, timezone, and mobile behavior.</p><p>Once a browser context is assigned to a bot, the bot can use browser tools to open pages, click elements, fill forms, capture screenshots, and inspect page content.</p><hr><h2 id="concept-browser-gateway" tabindex="-1">Concept: Browser Gateway <a class="header-anchor" href="#concept-browser-gateway" aria-label="Permalink to &quot;Concept: Browser Gateway&quot;"></a></h2><p>The Browser Gateway is powered by <strong>Playwright</strong> and provides browser automation for bots. In practice, a browser context acts like a reusable browser profile configuration for one or more bots.</p><p>Typical use cases include:</p><ul><li>Navigating websites</li><li>Clicking buttons and links</li><li>Filling and submitting forms</li><li>Reading rendered page content</li><li>Capturing screenshots or PDFs</li></ul><hr><h2 id="creating-a-browser-context" tabindex="-1">Creating a Browser Context <a class="header-anchor" href="#creating-a-browser-context" aria-label="Permalink to &quot;Creating a Browser Context&quot;"></a></h2><p>Manage contexts from the <strong>Browser Contexts</strong> page in the sidebar.</p><ol><li>Navigate to the <strong>Browser Contexts</strong> page.</li><li>Click <strong>Add Browser Context</strong>.</li><li>Fill in the following field: <ul><li><strong>Name</strong>: A display name for this browser context.</li></ul></li><li>Click <strong>Create</strong>.</li></ol><hr><h2 id="configuring-a-browser-context" tabindex="-1">Configuring a Browser Context <a class="header-anchor" href="#configuring-a-browser-context" aria-label="Permalink to &quot;Configuring a Browser Context&quot;"></a></h2><p>After creating a context, select it from the sidebar and update its settings.</p><table tabindex="0"><thead><tr><th>Field</th><th>Description</th></tr></thead><tbody><tr><td><strong>Name</strong></td><td>The display name shown in the UI.</td></tr><tr><td><strong>Core</strong></td><td>Browser engine: <code>chromium</code> (default) or <code>firefox</code>.</td></tr><tr><td><strong>Viewport Width</strong></td><td>Browser viewport width in pixels.</td></tr><tr><td><strong>Viewport Height</strong></td><td>Browser viewport height in pixels.</td></tr><tr><td><strong>User Agent</strong></td><td>Optional custom browser user agent string.</td></tr><tr><td><strong>Device Scale Factor</strong></td><td>Optional device pixel ratio.</td></tr><tr><td><strong>Locale</strong></td><td>Optional locale such as <code>en-US</code> or <code>zh-CN</code>.</td></tr><tr><td><strong>Timezone ID</strong></td><td>Optional timezone such as <code>UTC</code> or <code>Asia/Shanghai</code>.</td></tr><tr><td><strong>Is Mobile</strong></td><td>Enables mobile-style browser behavior.</td></tr><tr><td><strong>Ignore HTTPS Errors</strong></td><td>Allows navigation to sites with invalid HTTPS certificates.</td></tr></tbody></table><h3 id="managing-contexts" tabindex="-1">Managing Contexts <a class="header-anchor" href="#managing-contexts" aria-label="Permalink to &quot;Managing Contexts&quot;"></a></h3><ul><li><strong>Edit</strong>: Select a context and update its configuration.</li><li><strong>Delete</strong>: Remove a context you no longer use.</li></ul><hr><h2 id="assigning-a-browser-context-to-a-bot" tabindex="-1">Assigning a Browser Context to a Bot <a class="header-anchor" href="#assigning-a-browser-context-to-a-bot" aria-label="Permalink to &quot;Assigning a Browser Context to a Bot&quot;"></a></h2><ol><li>Navigate to the <strong>Bots</strong> page and open your bot.</li><li>Go to the <strong>General</strong> tab.</li><li>Find the <strong>Browser Context</strong> dropdown.</li><li>Select the context you created.</li><li>Click <strong>Save</strong>.</li></ol><p>After saving, the bot can use that browser context when browser tools are invoked.</p><hr><h2 id="bot-interaction" tabindex="-1">Bot Interaction <a class="header-anchor" href="#bot-interaction" aria-label="Permalink to &quot;Bot Interaction&quot;"></a></h2><p>When a browser context is configured, the bot can use built-in browser tools such as:</p><ul><li><code>browser_action</code>: perform actions like navigation, click, fill, select, scroll, tab management, screenshot, or PDF export</li><li><code>browser_observe</code>: inspect the current page and gather information for the model</li></ul><p>This lets the bot interact with real websites instead of relying only on static HTML or search results.</p><hr><h2 id="browser-core-selection" tabindex="-1">Browser Core Selection <a class="header-anchor" href="#browser-core-selection" aria-label="Permalink to &quot;Browser Core Selection&quot;"></a></h2><p>Memoh&#39;s browser image can include Chromium, Firefox, or both. The available cores are determined at build time by the <code>BROWSER_CORES</code> build argument.</p><p>The install script prompts for browser core selection during setup. To rebuild manually with specific cores:</p><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">BROWSER_CORES</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">chromium</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> docker</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> compose</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> --profile</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> browser</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> build</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> browser</span></span></code></pre></div><p>Valid values for <code>BROWSER_CORES</code>: <code>chromium</code>, <code>firefox</code>, <code>chromium,firefox</code> (default).</p><hr><h2 id="next-steps" tabindex="-1">Next Steps <a class="header-anchor" href="#next-steps" aria-label="Permalink to &quot;Next Steps&quot;"></a></h2><ul><li>If you have not configured memory yet, continue with <a href="/memory-providers/builtin.html">Built-in Memory Provider</a>.</li><li>To manage a bot&#39;s long-term knowledge after setup, see <a href="/getting-started/memory.html">Bot Memory Management</a>.</li></ul>',36)])])}const b=e(s,[["render",i]]);export{p as __pageData,b as default};