Spaces:
Running
Running
File size: 22,269 Bytes
f87a697 2417033 f87a697 9d7ffb2 f87a697 4da7f83 f87a697 16f0c86 f87a697 2b31b30 f87a697 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 | <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="SLM Web Agent: Autonomous browser navigation agent powered by Playwright and local small language models for headless form filling and data extraction.">
<link rel="canonical" href="https://www.slmagents.ai/web_agent.html">
<title>SLM Web Agent | Documentation</title>
<link rel="stylesheet" href="style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet">
</head>
<body>
<!-- Navigation Header -->
<header>
<div class="nav-container">
<a href="index.html" class="logo">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg>
SLMAgents
</a>
<nav>
<ul class="nav-links">
<li><a href="index.html">Home</a></li>
<li class="dropdown">
<a class="dropdown-trigger">
Docs
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"/></svg>
</a>
<div class="dropdown-content">
<div>
<div class="mega-col-title">Productivity</div>
<div class="mega-col-list">
<a href="rag.html">📚 SLM RAG</a>
<a href="summarizer.html">📝 Summarizer</a>
<a href="cli.html">💻 CLI Agent</a>
<a href="email_assistant.html">📧 Email Assistant</a>
<a href="meeting_summarizer.html">🎙️ Meeting Summarizer</a>
<a href="memory_manager.html">🧠 Memory Manager</a>
<a href="task_planner.html">📋 Task Planner</a>
<a href="pdf_chat.html">📑 PDF Chat</a>
<a href="pkb_agent.html">🔗 PKB Agent</a>
<a href="voice_agent.html">🗣️ Voice Agent</a>
</div>
</div>
<div>
<div class="mega-col-title">Developer Tools</div>
<div class="mega-col-list">
<a href="orchestrator.html">🎯 Orchestrator</a>
<a href="sql.html">📊 Text-to-SQL</a>
<a href="code_interpreter.html">⚡ Code Interpreter</a>
<a href="git_repo_manager.html">🐙 Git Repo Manager</a>
<a href="database_migrator.html">🗄️ Database Migrator</a>
</div>
</div>
<div>
<div class="mega-col-title">Web & Scraping</div>
<div class="mega-col-list">
<a href="web_agent.html">🌐 Web Agent</a>
<a href="web_scraper.html">🕷️ Web Scraper</a>
<a href="search_orchestrator.html">🔎 Search Orchestrator</a>
</div>
</div>
<div>
<div class="mega-col-title">Data & Utilities</div>
<div class="mega-col-list">
<a href="json_cleaner.html">🧹 JSON Cleaner</a>
<a href="document_parser.html">📄 Document Parser</a>
<a href="vision_parser.html">👁️ Vision Parser</a>
<a href="data_analyst.html">📈 Data Analyst</a>
<a href="translation_hub.html">🌐 Translation Hub</a>
<a href="math_agent.html">🧮 Math Agent</a>
<a href="security_audit.html">🛡️ Security Audit</a>
<a href="embeddings_server.html">🔢 Embeddings Server</a>
</div>
</div>
</div>
</li>
<li><a href="playground.html">Playground</a></li>
<li><a href="index.html#upcoming">Roadmap</a></li>
<li><a href="https://huggingface.co/spaces/spcv/slm-agents" class="btn-hf-nav" target="_blank" style="display: flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 8px; background: #fef3c7; border: 1px solid #f59e0b; color: #b45309; font-weight: 700; text-decoration: none; font-size: 0.85rem; transition: all 0.2s;">🤗 Hugging Face Space</a></li>
</ul>
</nav>
</div>
</header>
<div class="layout-container">
<aside class="sidebar" id="sidebar">
<div class="sidebar-group">
<div class="sidebar-group-title">Active Libraries</div>
<ul class="sidebar-list" id="sidebar-active-list"></ul>
</div>
</aside>
<main class="main-content">
<div class="doc-content-wrapper">
<section class="doc-section" style="margin-top: 0;">
<div class="breadcrumb" style="font-size: 0.85rem; color: #475569; margin-bottom: 1rem; font-weight: 600;"><a href="index.html" style="color: #4f46e5; text-decoration: none;">Home</a> <span style="margin: 0 6px;">›</span> <span style="color: #0f172a;">SLM Web Agent</span></div>
<div class="badge-pill">🌐 Playwright Browser Automation</div>
<h1 style="font-size: 2.25rem; color: #0f172a; font-weight: 800; margin-bottom: 0.75rem;">SLM Web Agent</h1>
<p style="font-size: 1.05rem; color: #334155; line-height: 1.65; font-weight: 500; margin: 0;">Autonomous browser navigation agent powered by Playwright and local small language models for headless form filling and data extraction.</p>
</section>
<nav class="doc-nav">
<a href="#overview">Overview</a>
<a href="#install">Installation</a>
<a href="#git">Git Checkout</a>
<a href="#config">Configuration API</a>
<a href="#performance">Performance</a>
</nav>
<!-- OVERVIEW -->
<section class="doc-section" id="overview">
<h2>🚀 Overview & Capabilities</h2>
<p>Autonomous browser navigation agent powered by Playwright and local small language models for headless form filling and data extraction.</p>
<h3 style="margin-top: 1.5rem; font-size: 1.15rem; color: #0f172a; font-weight: 700;">Key Features</h3>
<ul style="padding-left: 1.5rem; color: #334155; font-weight: 500; line-height: 1.7;">
<li><strong>Headless browser interaction via Playwright</strong></li>
<li><strong>Automated form navigation and locator selection</strong></li>
<li><strong>DOM snapshot reduction for small model context windows</strong></li>
<li><strong>Zero external API calls</strong></li>
</ul>
</section>
<!-- INSTALLATION -->
<section class="doc-section" id="install">
<h2>💻 Installation</h2>
<p>Install the local package using pip:</p>
<div class="code-panel" style="max-width:100%; background: #0f172a; border: 1px solid #1e293b; border-radius: 14px; overflow: hidden; margin: 1rem 0; box-shadow: 0 16px 40px rgba(15, 23, 42, 0.12);">
<div class="code-header" style="background: #1e293b; padding: 10px 16px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #334155;">
<div class="code-dots"><div class="code-dot"></div><div class="code-dot"></div><div class="code-dot"></div></div>
<div class="code-title" style="color: #94a3b8; font-weight: 700; font-size: 0.8rem; font-family: 'JetBrains Mono', monospace;">Terminal</div>
</div>
<div class="code-content" style="display:block; padding: 1.25rem 1.5rem; background: #0f172a;">
<pre style="margin:0; background:#0f172a; color:#f8fafc; font-family:'JetBrains Mono',monospace; font-size:0.95rem; border:none; box-shadow:none; padding:0;"><span style="color: #34d399; margin-right: 8px;">$</span><span style="color: #c084fc; font-weight: 700;">pip install</span> <span style="color: #38bdf8;">slm-web-agent</span></pre>
</div>
</div>
</section>
<!-- GIT CHECKOUT -->
<section class="doc-section" id="git">
<h2>🐙 Checkout from GitHub</h2>
<p>Clone only this agent's folder from the monorepo using Git sparse-checkout — no need to download the full repository:</p>
<h3 style="font-size: 1.05rem; color: #0f172a; font-weight: 700; margin-top: 1.5rem; margin-bottom: 0.75rem;">Option 1 — Sparse Checkout (Recommended)</h3>
<div class="code-panel" style="max-width:100%; background: #0f172a; border: 1px solid #1e293b; border-radius: 14px; overflow: hidden; margin: 1rem 0; box-shadow: 0 16px 40px rgba(15, 23, 42, 0.12);">
<div class="code-header" style="background: #1e293b; padding: 10px 16px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #334155;">
<div class="code-dots"><div class="code-dot"></div><div class="code-dot"></div><div class="code-dot"></div></div>
<div class="code-title" style="color: #94a3b8; font-weight: 700; font-size: 0.8rem; font-family: 'JetBrains Mono', monospace;">Terminal — Git Sparse Checkout</div>
</div>
<div class="code-content" style="display:block; padding: 1.25rem 1.5rem; background: #0f172a;">
<pre style="margin:0; background:#0f172a; color:#f8fafc; font-family:'JetBrains Mono',monospace; font-size:0.88rem; border:none; box-shadow:none; padding:0; line-height: 1.75;"><span style="color:#64748b;"># 1. Create and enter a new directory</span>
<span style="color:#34d399;">$</span> <span style="color:#c084fc; font-weight:700;">mkdir</span> <span style="color:#38bdf8;">slm_web_agent</span> <span style="color:#94a3b8;">&&</span> <span style="color:#c084fc; font-weight:700;">cd</span> <span style="color:#38bdf8;">slm_web_agent</span>
<span style="color:#64748b;"># 2. Initialise empty git repo and add remote</span>
<span style="color:#34d399;">$</span> <span style="color:#c084fc; font-weight:700;">git init</span>
<span style="color:#34d399;">$</span> <span style="color:#c084fc; font-weight:700;">git remote add origin</span> <span style="color:#38bdf8;">https://github.com/t00114218-stack/SLMAgents.git</span>
<span style="color:#64748b;"># 3. Enable sparse-checkout and set target folder</span>
<span style="color:#34d399;">$</span> <span style="color:#c084fc; font-weight:700;">git sparse-checkout init</span> <span style="color:#94a3b8;">--cone</span>
<span style="color:#34d399;">$</span> <span style="color:#c084fc; font-weight:700;">git sparse-checkout set</span> <span style="color:#38bdf8;">slm_web_agent</span>
<span style="color:#64748b;"># 4. Pull only that agent's source</span>
<span style="color:#34d399;">$</span> <span style="color:#c084fc; font-weight:700;">git pull origin</span> <span style="color:#38bdf8;">main</span></pre>
</div>
</div>
<h3 style="font-size: 1.05rem; color: #0f172a; font-weight: 700; margin-top: 2rem; margin-bottom: 0.75rem;">Option 2 — Full Repository Clone</h3>
<div class="code-panel" style="max-width:100%; background: #0f172a; border: 1px solid #1e293b; border-radius: 14px; overflow: hidden; margin: 1rem 0;">
<div class="code-header" style="background: #1e293b; padding: 10px 16px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #334155;">
<div class="code-dots"><div class="code-dot"></div><div class="code-dot"></div><div class="code-dot"></div></div>
<div class="code-title" style="color: #94a3b8; font-weight: 700; font-size: 0.8rem; font-family: 'JetBrains Mono', monospace;">Terminal — Full Clone</div>
</div>
<div class="code-content" style="display:block; padding: 1.25rem 1.5rem; background: #0f172a;">
<pre style="margin:0; background:#0f172a; color:#f8fafc; font-family:'JetBrains Mono',monospace; font-size:0.88rem; border:none; box-shadow:none; padding:0; line-height: 1.75;"><span style="color:#34d399;">$</span> <span style="color:#c084fc; font-weight:700;">git clone</span> <span style="color:#38bdf8;">https://github.com/t00114218-stack/SLMAgents.git</span>
<span style="color:#34d399;">$</span> <span style="color:#c084fc; font-weight:700;">cd</span> <span style="color:#38bdf8;">SLMAgents/slm_web_agent</span></pre>
</div>
</div>
<p style="margin-top: 1.25rem; font-size: 0.9rem; color: #475569; background: #f8fafc; border: 1px solid #cbd5e1; border-radius: 10px; padding: 1rem 1.25rem;">
💡 <strong>Tip:</strong> After checkout, install the package locally with <code style="background: #eef2ff; color: #4f46e5; border: 1px solid #c7d2fe; padding: 2px 8px; border-radius: 5px; font-weight: 700;">pip install -e ./slm_web_agent</code> to run in editable mode without publishing to PyPI.
</p>
</section>
<!-- CONFIGURATION -->
<section class="doc-section" id="config">
<h2>⚙️ Configuration API</h2>
<h3 style="font-size: 1.15rem; color: #0f172a; font-weight: 700; margin-top: 1.5rem;">Constructor Parameters</h3>
<p>Instantiate <code style="background: #eef2ff; color: #4f46e5; font-weight: 700; border: 1px solid #c7d2fe; padding: 3px 8px; border-radius: 6px;">SLMWebAgent</code> with performance and runtime options:</p>
<table class="param-table">
<thead>
<tr><th>Parameter</th><th>Type / Default</th><th>Description</th></tr>
</thead>
<tbody>
<tr><td><code style='background: #eef2ff; color: #4f46e5; font-weight: 700; border: 1px solid #c7d2fe; padding: 3px 8px; border-radius: 6px;'>headless</code></td><td><span class='param-type'>bool | True</span></td><td style='color: #334155; font-weight: 500;'>Run browser in headless background mode. Default: True.</td></tr>
<tr><td><code style='background: #eef2ff; color: #4f46e5; font-weight: 700; border: 1px solid #c7d2fe; padding: 3px 8px; border-radius: 6px;'>temperature</code></td><td><span class='param-type'>float | 0.0</span></td><td style='color: #334155; font-weight: 500;'>Action planning temperature. Default: 0.0.</td></tr>
<tr><td><code style='background: #eef2ff; color: #4f46e5; font-weight: 700; border: 1px solid #c7d2fe; padding: 3px 8px; border-radius: 6px;'>top_p</code></td><td><span class='param-type'>float | 0.9</span></td><td style='color: #334155; font-weight: 500;'>Nucleus sampling cutoff. Default: 0.9.</td></tr>
<tr><td><code style='background: #eef2ff; color: #4f46e5; font-weight: 700; border: 1px solid #c7d2fe; padding: 3px 8px; border-radius: 6px;'>max_tokens</code></td><td><span class='param-type'>int | 256</span></td><td style='color: #334155; font-weight: 500;'>Max token output limit. Default: 256.</td></tr>
<tr><td><code style='background: #eef2ff; color: #4f46e5; font-weight: 700; border: 1px solid #c7d2fe; padding: 3px 8px; border-radius: 6px;'>n_threads</code></td><td><span class='param-type'>int | 4</span></td><td style='color: #334155; font-weight: 500;'>CPU threads for model execution. Default: 4.</td></tr>
</tbody>
</table>
<h3 style="font-size: 1.15rem; color: #0f172a; font-weight: 700; margin-top: 2rem;">Methods</h3>
<table class="param-table">
<thead>
<tr><th>Method Signature</th><th>Return Type</th><th>Description</th></tr>
</thead>
<tbody>
<tr><td><code style='background: #eef2ff; color: #4f46e5; font-weight: 700; border: 1px solid #c7d2fe; padding: 3px 8px; border-radius: 6px;'>browse(goal, start_url, ...)</code></td><td><span class='param-type'>dict</span></td><td style='color: #334155; font-weight: 500;'>Executes multi-step Playwright web browsing tasks autonomously.</td></tr>
</tbody>
</table>
<h3 style="font-size: 1.15rem; color: #0f172a; font-weight: 700; margin-top: 2rem;">Execution Parameters</h3>
<p>Complete list of execution parameters accepted by the primary agent method:</p>
<table class="param-table">
<thead>
<tr><th>Parameter</th><th>Type / Default</th><th>Description</th></tr>
</thead>
<tbody>
<tr><td><code style='background: #eef2ff; color: #4f46e5; font-weight: 700; border: 1px solid #c7d2fe; padding: 3px 8px; border-radius: 6px;'>goal</code></td><td><span class='param-type'>str</span></td><td style='color: #334155; font-weight: 500;'>Target browser automation goal description.</td></tr>
<tr><td><code style='background: #eef2ff; color: #4f46e5; font-weight: 700; border: 1px solid #c7d2fe; padding: 3px 8px; border-radius: 6px;'>start_url</code></td><td><span class='param-type'>str</span></td><td style='color: #334155; font-weight: 500;'>Initial Web URL to navigate to.</td></tr>
<tr><td><code style='background: #eef2ff; color: #4f46e5; font-weight: 700; border: 1px solid #c7d2fe; padding: 3px 8px; border-radius: 6px;'>system_prompt</code></td><td><span class='param-type'>str | None</span></td><td style='color: #334155; font-weight: 500;'>Custom system instruction prompt override. Default: None.</td></tr>
<tr><td><code style='background: #eef2ff; color: #4f46e5; font-weight: 700; border: 1px solid #c7d2fe; padding: 3px 8px; border-radius: 6px;'>user_input</code></td><td><span class='param-type'>str | None</span></td><td style='color: #334155; font-weight: 500;'>Optional additional user form fill values. Default: None.</td></tr>
<tr><td><code style='background: #eef2ff; color: #4f46e5; font-weight: 700; border: 1px solid #c7d2fe; padding: 3px 8px; border-radius: 6px;'>temperature</code></td><td><span class='param-type'>float | 0.0</span></td><td style='color: #334155; font-weight: 500;'>Sampling temperature. Default: 0.0.</td></tr>
<tr><td><code style='background: #eef2ff; color: #4f46e5; font-weight: 700; border: 1px solid #c7d2fe; padding: 3px 8px; border-radius: 6px;'>top_p</code></td><td><span class='param-type'>float | 0.9</span></td><td style='color: #334155; font-weight: 500;'>Nucleus sampling probability. Default: 0.9.</td></tr>
<tr><td><code style='background: #eef2ff; color: #4f46e5; font-weight: 700; border: 1px solid #c7d2fe; padding: 3px 8px; border-radius: 6px;'>max_tokens</code></td><td><span class='param-type'>int | 256</span></td><td style='color: #334155; font-weight: 500;'>Maximum token limit. Default: 256.</td></tr>
</tbody>
</table>
<h3 style="font-size: 1.15rem; color: #0f172a; font-weight: 700; margin-top: 2rem;">Quick Start</h3>
<div class="code-panel" style="max-width:100%; background: #0f172a; border: 1px solid #1e293b; border-radius: 14px; overflow: hidden; margin: 1rem 0; box-shadow: 0 16px 40px rgba(15, 23, 42, 0.12);">
<div class="code-header" style="background: #1e293b; padding: 10px 16px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #334155;">
<div class="code-dots"><div class="code-dot"></div><div class="code-dot"></div><div class="code-dot"></div></div>
<div class="code-title" style="color: #94a3b8; font-weight: 700; font-size: 0.8rem; font-family: 'JetBrains Mono', monospace;">Python Example</div>
</div>
<div class="code-content" style="display:block; padding: 1.25rem 1.5rem; background: #0f172a;">
<pre style="margin:0; background:#0f172a; color:#f8fafc; font-family:'JetBrains Mono',monospace; font-size:0.9rem; border:none; box-shadow:none; padding:0;"><code class="language-python">from slm_web_agent import SLMWebAgent
web = SLMWebAgent(headless=True, n_threads=4)
res = web.browse(
goal="Navigate to portal signup and enter test email",
start_url="https://portal.slmagents.ai/signup",
system_prompt="Wait 2 seconds after submit",
user_input="Email: dev@slmagents.ai",
temperature=0.0,
top_p=0.9,
max_tokens=256
)
print(res)</code></pre>
</div>
</div>
</section>
<!-- VERIFIED LOGS -->
<section class="doc-section">
<h2>🔍 Verified Output Logs</h2>
<p>Diagnostic execution console output running locally on CPU:</p>
<div class="code-panel" style="max-width:100%; background: #0f172a; border: 1px solid #1e293b; border-radius: 14px; overflow: hidden; margin: 1rem 0;">
<div class="code-header" style="background: #1e293b; padding: 10px 16px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #334155;">
<div class="code-dots"><div class="code-dot"></div><div class="code-dot"></div><div class="code-dot"></div></div>
<div class="code-title" style="color: #38bdf8; font-weight: 700; font-size: 0.8rem; font-family: 'JetBrains Mono', monospace;">Output Console</div>
</div>
<div class="code-content" style="display:block; padding: 1.25rem 1.5rem; background: #0f172a;">
<pre style="margin:0; background:#0f172a; color:#38bdf8; font-family:'JetBrains Mono',monospace; font-size:0.85rem; border:none; box-shadow:none; padding:0; white-space: pre-wrap; word-break: break-word;">→ INPUT:
Goal: Navigate to portal signup and enter test email
URL: https://portal.slmagents.ai/signup
← OUTPUT:
{
'status': '200 OK',
'goal': 'Navigate to portal signup and enter test email',
'success': True,
'steps_taken': 3
}</pre>
</div>
</div>
</section>
<!-- FOOTER -->
<footer style="margin-top: 3rem; text-align: center; border-top: 1px solid #cbd5e1; padding-top: 2rem; color: #475569; font-size: 0.9rem; font-weight: 500;">
<p>© 2026 SLM Agents. Built with Apache 2.0 Permissive Open Source License.</p>
</footer>
</div>
</main>
</div>
<script src="app.js"></script>
</body>
</html>
|