Oliver/derez.ai
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

blog: Give Your Hermes Agent a Browser It Can Control — with a Raspberry Pi

Browse Source
This commit is contained in:
Oliver
2026-07-21 14:07:08 -03:00
parent 482cde62b1
commit 42fef2f8c6
2 changed files with 331 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
blog/posts/shared-browser-raspberry-pi-hermes-agent.html
+322
View File
@@ -0,0 +1,322 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="robots" content="index, follow" />
<link rel="canonical" href="https://derez.ai/blog/posts/shared-browser-raspberry-pi-hermes-agent.html" />
<title>Shared Browser for Your Hermes Agent — Raspberry Pi + SSH Tunnel | derez.ai Blog</title>
<meta name="description" content="Give your Hermes Agent a browser it can control remotely. A $35 Raspberry Pi running Chromium, tunneled through SSH reverse proxy to your cloud server. Both you and your agent drive the same browser." />
<meta property="og:type" content="article" />
<meta property="og:url" content="https://derez.ai/blog/posts/shared-browser-raspberry-pi-hermes-agent.html" />
<meta property="og:title" content="Shared Browser for Your Hermes Agent — Raspberry Pi + SSH Tunnel" />
<meta property="og:description" content="Give your Hermes Agent a browser it can control remotely. A $35 Raspberry Pi running Chromium, tunneled through SSH reverse proxy to your cloud server. Both you and your agent drive the same browser." />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Shared Browser for Your Hermes Agent — Raspberry Pi + SSH Tunnel" />
<script defer data-domain="derez.ai" src="https://plausible.odoo4projects.com/js/script.file-downloads.outbound-links.tagged-events.js"></script>
<script>window.plausible = window.plausible || function() { (window.plausible.q = window.plausible.q || []).push(arguments) }</script>
<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:opsz,wght@14..32,400;14..32,500;14..32,600;14..32,700&display=swap" rel="stylesheet" />
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body { background: #08080c; color: #e8e8f0; font-family: 'Inter', sans-serif; line-height: 1.7; padding: 40px 20px; }
.container { max-width: 720px; margin: 0 auto; }
a { color: #00f5ff; text-decoration: none; }
a:hover { text-decoration: underline; }
.back { margin-bottom: 32px; display: inline-block; font-size: 0.9rem; color: #888; }
.back:hover { color: #00f5ff; }
h1 { font-size: 1.9rem; font-weight: 700; line-height: 1.3; margin-bottom: 12px; }
.meta { font-size: 0.85rem; color: #888; margin-bottom: 40px; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.area-tag { display: inline-block; background: #00f5ff; color: #000; font-size: 0.75rem; font-weight: 700; padding: 2px 10px; border-radius: 20px; text-transform: uppercase; letter-spacing: 0.5px; }
.chip-tag { display: inline-block; background: rgba(0,245,255,0.1); color: #00f5ff; border: 1px solid rgba(0,245,255,0.3); font-size: 0.75rem; font-weight: 600; padding: 2px 10px; border-radius: 20px; text-transform: uppercase; letter-spacing: 0.5px; }
h2 { font-size: 1.3rem; font-weight: 600; margin: 36px 0 12px; color: #f0f0ff; }
h3 { font-size: 1.05rem; font-weight: 600; margin: 24px 0 8px; color: #f0f0ff; }
p { margin-bottom: 16px; color: #c8c8d8; }
ul, ol { margin: 0 0 16px 24px; color: #c8c8d8; }
li { margin-bottom: 6px; }
code { background: #0e0e14; padding: 2px 6px; border-radius: 4px; font-size: 0.9em; color: #00f5ff; }
pre { background: #0e0e14; border: 1px solid #1a1a2e; border-radius: 8px; padding: 16px; overflow-x: auto; font-size: 0.85rem; line-height: 1.5; margin: 16px 0; }
pre code { background: none; padding: 0; border-radius: 0; }
strong { color: #f0f0ff; }
.pro-tip { background: rgba(0,245,255,0.06); border-left: 3px solid #00f5ff; border-radius: 8px; padding: 16px 20px; margin: 20px 0; font-size: 0.92rem; color: #d0d0e0; }
.pro-tip strong { color: #00f5ff; }
.arch-diagram { background: #0e0e14; border: 1px solid #1a1a2e; border-radius: 8px; padding: 24px; margin: 20px 0; font-family: 'Courier New', monospace; font-size: 0.85rem; line-height: 1.6; color: #c8c8d8; white-space: pre; overflow-x: auto; }
.arch-diagram .highlight { color: #00f5ff; font-weight: 600; }
.arch-diagram .arrow { color: #666; }
.arch-diagram .pipe { color: #555; }
.cta-box { background: #12121c; border: 1px solid rgba(0,245,255,0.2); border-radius: 12px; padding: 24px; margin: 40px 0; text-align: center; }
.cta-box h3 { margin-top: 0; color: #f0f0ff; }
.cta-box p { margin-bottom: 20px; color: #c8c8d8; }
.cta-box .btn { display: inline-block; background: #00f5ff; color: #000; font-weight: 700; padding: 12px 28px; border-radius: 8px; text-decoration: none; font-size: 0.95rem; }
.cta-box .btn:hover { background: #33f7ff; }
@media (max-width: 600px) {
body { padding: 24px 16px; }
h1 { font-size: 1.5rem; }
pre { font-size: 0.75rem; padding: 12px; }
}
</style>
</head>
<body>
<div class="container">
<a class="back" href="https://derez.ai/#blog">&larr; Back to Blog</a>
<h1>Give Your Hermes Agent a Browser It Can Control — with a Raspberry Pi</h1>
<div class="meta">
<span>July 21, 2026</span>
<span class="area-tag">How-to</span>
<span class="chip-tag">hermes</span>
</div>
<p>Your Hermes Agent runs on a cloud server. It can SSH into things, call APIs, run code, and read files. But it can't <em>see</em> the web. It can't log into a dashboard, fill out a form, or click through a checkout flow — the things that make up half of real-world business automation.</p>
<p>This is the story of how I gave my agent eyes. A $35 Raspberry Pi, a Chromium browser, and a single SSH reverse tunnel. My Hermes Agent and I now share a browser we both control.</p>
<h2>Why a Shared Browser?</h2>
<p>An AI agent that can drive a browser opens up a completely different class of automation:</p>
<ul>
<li><strong>Login to web dashboards</strong> — your agent logs into Stripe, Shopify, LinkedIn, or any SaaS platform and performs actions on your behalf</li>
<li><strong>Fill and submit forms</strong> — data entry, sign-ups, registrations, support tickets</li>
<li><strong>Scrape dynamic content</strong> — pages that require JavaScript rendering, authentication, or multi-step navigation</li>
<li><strong>Cross-post to social media</strong> — publish to LinkedIn, Twitter, Facebook groups, forums</li>
<li><strong>Monitor dashboards</strong> — your agent checks admin panels, downloads reports, and alerts you on changes</li>
</ul>
<p>Without a browser, your agent calls APIs. APIs are great — they're fast, structured, and reliable. But most business tools don't have a public API for every action you want to take. The browser is the universal API. Every web app has one.</p>
<h2>The Problem: Your Agent Is in the Cloud</h2>
<p>When your Hermes Agent runs on a cloud server (like a derez.ai instance), it has no local display, no browser, and no way to open one. Running a headless browser on the server works for simple page loads, but many sites detect headless Chrome and block it, and you can't interact with the browser yourself — it's a script, not a shared tool.</p>
<p>The solution: run the browser on a physical device <em>at your location</em>, and tunnel it to your cloud server via SSH.</p>
<h2>Architecture</h2>
<p>Here's how the pieces fit together:</p>
<div class="arch-diagram">
<span class="highlight">Your Raspberry Pi</span> <span class="arrow">ssh -R</span> <span class="highlight">Your Cloud Server</span>
<span class="pipe">┌──────────────────────┐</span> <span class="arrow">─────────►</span> <span class="pipe">┌──────────────────────┐</span>
<span class="pipe">│ Chromium --remote- │</span> <span class="arrow">port 9222</span> <span class="pipe">│ Hermes Agent │</span>
<span class="pipe">│ debugging-port=9222 │</span> <span class="arrow">reverse </span> <span class="pipe">│ connects via │</span>
<span class="pipe">│ │</span> <span class="arrow">tunnel </span> <span class="pipe">│ ws://127.0.0.1:9222 │</span>
<span class="pipe">└──────────────────────┘</span> <span class="arrow"> </span> <span class="pipe">└──────────────────────┘</span>
<span class="pipe">│</span> <span class="pipe">│</span>
<span class="pipe">│</span> <span class="pipe">│</span>
<span style="color:#888">You open chrome://inspect</span> <span style="color:#888">Hermes sends CDP commands</span>
<span style="color:#888">to see the same browser</span> <span style="color:#888">(navigate, click, type, eval)</span>
</div>
<p>The Chromium DevTools Protocol (CDP) exposes a WebSocket endpoint on port 9222. The SSH reverse tunnel makes that port available on your cloud server as if it were local. Your Hermes Agent connects to <code>ws://127.0.0.1:9222</code> and sends commands. You can also open <code>chrome://inspect</code> on any machine on your local network to see exactly what the Pi's browser is showing — in real time.</p>
<p>Both you and your agent see the same browser. You can watch your agent work, step in if it gets stuck, or take over manually. It's a shared workspace.</p>
<h2>What You Need</h2>
<ul>
<li><strong>Raspberry Pi</strong> — any model will do. A Pi 4 or Pi 5 is ideal. A Pi Zero 2 W works but is slower for JavaScript-heavy sites. You can also use an old laptop or a thin client</li>
<li><strong>Chromium browser</strong> — or Brave, Chrome, Edge. Any Chromium-based browser supports the remote debugging protocol</li>
<li><strong>SSH access to your cloud server</strong> — the server where your Hermes Agent runs. <code>GatewayPorts</code> should be set to <code>yes</code> in <code>sshd_config</code> (or you bind to localhost only, which is the default)</li>
<li><strong>Hermes Agent</strong> — with the <code>computer-use</code> or <code>browser_*</code> tools enabled, or the CDP skill loaded</li>
</ul>
<h2>Step 1: Set Up the Pi</h2>
<p>Install Raspberry Pi OS Lite (no desktop needed — the browser runs headless-on-headless). SSH into the Pi and install Chromium:</p>
<pre><code>sudo apt update
sudo apt install chromium-browser -y</code></pre>
<p>That's it. No desktop environment, no X server, no VNC. Chromium runs in headless mode with the debugging port exposed.</p>
<h2>Step 2: The Tunnel Script</h2>
<p>Create a script that launches Chromium and establishes the SSH reverse tunnel. Save this as <code>~/browser-tunnel.sh</code> on the Pi:</p>
<pre><code>#!/usr/bin/env bash
set -euo pipefail
REMOTE_HOST="creek.derez.ai"
REMOTE_PORT=2202
REMOTE_USER="root"
DEBUG_PORT=9222
PROFILE="$HOME/.config/brave-remote"
pkill -f "remote-debugging-port=${DEBUG_PORT}" || true
chromium-browser \
--remote-debugging-port=$DEBUG_PORT \
>/dev/null 2>&1 &
sleep 3
exec ssh \
-N \
-o ServerAliveInterval=30 \
-o ServerAliveCountMax=3 \
-o ExitOnForwardFailure=yes \
-R ${DEBUG_PORT}:127.0.0.1:${DEBUG_PORT} \
${REMOTE_USER}@${REMOTE_HOST} \
-p ${REMOTE_PORT}</code></pre>
<p>Make it executable and run it:</p>
<pre><code>chmod +x ~/browser-tunnel.sh
~/browser-tunnel.sh</code></pre>
<p>The script:</p>
<ol>
<li>Kills any existing Chromium with the same debugging port</li>
<li>Launches Chromium with remote debugging enabled on port 9222</li>
<li>Waits for the browser to start</li>
<li>Opens an SSH reverse tunnel — port 9222 on the Pi becomes port 9222 on the cloud server</li>
<li>Stays connected indefinitely with keep-alive pings every 30 seconds</li>
</ol>
<div class="pro-tip">
<strong>Pro tip:</strong> Set this up as a systemd service on the Pi so it starts automatically on boot and restarts if the tunnel drops. The SSH <code>ServerAliveInterval=30</code> and <code>ExitOnForwardFailure=yes</code> options ensure the connection is self-healing — if the tunnel drops, systemd restarts the whole service.
</div>
<h2>Step 3: Verify the Tunnel</h2>
<p>From your cloud server, check that the port is available:</p>
<pre><code>curl http://127.0.0.1:9222/json/version</code></pre>
<p>You should get a JSON response with the browser version, WebSocket URL, and available pages. If you see the JSON, the tunnel is working.</p>
<p>To see the browser visually from your local machine, open Chrome or Brave and navigate to <code>chrome://inspect</code>. Click "Configure" and add <code>localhost:9222</code> (or the Pi's local IP if you're on the same network). You'll see all open tabs and can inspect them live.</p>
<h2>Step 4: Connect Hermes to the Shared Browser</h2>
<p>From your Hermes Agent, you can now connect to the browser via the Chrome DevTools Protocol. The WebSocket endpoint is at <code>ws://127.0.0.1:9222/devtools/browser</code>.</p>
<p>Hermes can use this in two ways:</p>
<h3>Option A: Use the built-in browser tools</h3>
<p>Hermes has <code>browser_navigate</code>, <code>browser_click</code>, <code>browser_type</code>, and other <code>browser_*</code> tools. These normally use a headless browser on the same machine. To use your shared Pi browser instead, configure the browser tool to connect to the remote CDP endpoint:</p>
<pre><code># In ~/.hermes/config.yaml
browser:
cdp_url: "ws://127.0.0.1:9222"</code></pre>
<p>Now every <code>browser_navigate</code> call from your agent drives the Pi's browser. You can watch each tab open and each click happen in real time.</p>
<h3>Option B: Direct CDP commands through a skill</h3>
<p>For more fine-grained control, load a CDP skill that sends raw DevTools Protocol commands. This lets you inspect DOM elements, evaluate JavaScript, capture screenshots, and intercept network requests:</p>
<pre><code>hermes skills install browser-use</code></pre>
<p>Your agent can then run commands like:</p>
<pre><code>"Navigate to the LinkedIn company page, find the 'Create post' button, write a new update, and publish it."</code></pre>
<p>And it will do exactly that — in the browser you can see on your screen.</p>
<h2>What This Enables</h2>
<p>Once you have a shared browser, the automation possibilities expand dramatically:</p>
<ul>
<li><strong>Social media management</strong> — your agent posts to LinkedIn, Twitter, Facebook groups, and forums. It handles the login, the editor, the formatting, and the publishing. You review the draft before it goes live.</li>
<li><strong>SaaS dashboard monitoring</strong> — your agent logs into your Stripe dashboard, downloads the monthly report, checks for failed payments, and summarizes the results in Slack.</li>
<li><strong>Form filling at scale</strong> — need to submit 50 support tickets? Your agent opens each one, fills in the details, and clicks submit. No API needed.</li>
<li><strong>Web research with visual feedback</strong> — your agent navigates competitor sites, takes screenshots, and reports back on pricing changes, feature updates, or new content.</li>
<li><strong>E-commerce automation</strong> — check inventory, place orders, track shipments, all through the browser interface.</li>
</ul>
<h2>Security Considerations</h2>
<p>The Chrome DevTools Protocol is powerful — it gives full control over the browser. Anyone who can reach port 9222 can navigate to any site, read any open tab, and execute arbitrary JavaScript.</p>
<ul>
<li><strong>Bind to localhost</strong> — the SSH tunnel binds to <code>127.0.0.1</code> on the server side. Only processes on the server itself can reach the CDP endpoint. Do not bind to <code>0.0.0.0</code>.</li>
<li><strong>SSH key authentication</strong> — use an SSH key (not a password) for the tunnel. The <code>REMOTE_USER</code> should have key-based auth only.</li>
<li><strong>Dedicated Pi user</strong> — run the browser under a separate user account on the Pi. Don't use <code>root</code>.</li>
<li><strong>No persistent sessions</strong> — the script launches a fresh browser each time. No saved cookies, no lingering sessions. If you need persistent logins, use a dedicated profile directory.</li>
<li><strong>Limited network access</strong> — the Pi only needs outbound SSH to your server. Block all inbound ports on the Pi's firewall.</li>
</ul>
<div class="pro-tip">
<strong>Pro tip:</strong> For persistent logins, create a dedicated Chromium profile directory and pass <code>--user-data-dir=/home/pi/brave-profile</code> to the browser launch command. Your agent can then log into sites once and the sessions persist across restarts. Use a separate profile for each major service (LinkedIn, Stripe, Google) to keep credentials isolated.
</div>
<h2>How It Works Under the Hood</h2>
<p>When you add <code>--remote-debugging-port=9222</code> to Chromium, it starts a WebSocket server on that port. The DevTools Protocol speaks JSON over WebSocket — every command is a method call with parameters, and every response is a result or an event.</p>
<p>CDP commands your agent can send:</p>
<pre><code>{
"id": 1,
"method": "Page.navigate",
"params": { "url": "https://example.com" }
}</code></pre>
<p>Response:</p>
<pre><code>{
"id": 1,
"result": { "frameId": "..." }
}</code></pre>
<p>The SSH reverse tunnel makes this WebSocket endpoint appear as if it's running on the server itself. The <code>-R</code> flag in SSH maps a remote port to a local port:</p>
<pre><code>-R 9222:127.0.0.1:9222</code></pre>
<p>This means: "when anyone connects to port 9222 on the remote server, forward that connection to port 9222 on localhost (the Pi)." The SSH connection stays open indefinitely, and the <code>ServerAliveInterval</code> option ensures it stays alive even through NAT or firewalls.</p>
<h2>Why a Raspberry Pi Specifically</h2>
<p>You could run the browser on your main workstation. That works — I did it for months. But a dedicated Pi has advantages:</p>
<ul>
<li><strong>Always on</strong> — the Pi sits in a corner, plugged into power and Ethernet. 24/7 uptime without your workstation being on.</li>
<li><strong>Low power</strong> — ~5 watts. It costs less than a dollar a month to run.</li>
<li><strong>No interference</strong> — your agent can work while you sleep. No browser tabs mixed with your personal browsing. No accidental close.</li>
<li><strong>Dedicated to the task</strong> — the Pi has one job: run the browser and maintain the tunnel. Nothing else. No Chrome extensions you forgot about, no autofill on your personal accounts.</li>
<li><strong>Cheap enough to be disposable</strong> — a Pi 5 is $35. If you want two (one for staging, one for production), that's $70. Your workstation is probably worth 50x that.</li>
</ul>
<p>That said, an old laptop, a thin client, or even a $10 Android TV box running Linux works just as well. The key is a dedicated, always-on device that runs Chromium and has stable internet access.</p>
<h2>Bringing It All Together</h2>
<p>Here's the complete workflow for a real task:</p>
<ol>
<li><strong>You ask</strong> — "Check if we have any new Stripe subscriptions from yesterday and post a summary to Slack."</li>
<li><strong>Hermes opens the browser</strong> — it connects to <code>ws://127.0.0.1:9222</code>, opens a new tab, navigates to Stripe's dashboard</li>
<li><strong>Hermes logs in</strong> — it finds the email field, types your credentials, clicks the login button</li>
<li><strong>Hermes navigates the dashboard</strong> — it clicks through to "Subscriptions," filters by "Created (Yesterday)," reads the table</li>
<li><strong>Hermes extracts the data</strong> — it evaluates JavaScript in the page context to get the subscription count, total revenue, and list of new customers</li>
<li><strong>Hermes posts to Slack</strong> — it calls the Slack API directly (no browser needed for this) with a formatted summary</li>
<li><strong>You see the result</strong> — in Slack, a message: "3 new subscriptions yesterday, $247 in new MRR. Details: ..."</li>
</ol>
<p>You can watch every step happen in real time by opening <code>chrome://inspect</code> on your machine. Or you can walk away and check the result later. The Pi doesn't sleep.</p>
<h2>What's Next</h2>
<p>This is the foundation. Once you have a shared browser, the next step is to build persistent sessions — your agent logs into sites once, saves the cookies, and reuses them across tasks. Then multi-tab workflows where your agent keeps a reference tab open while working in another. Then scheduled browser tasks — cron jobs that drive the browser at 3 AM to generate daily reports.</p>
<p>The shared browser turns your agent from a read-only API caller into an interactive web operator. And it costs less than a pizza to set up.</p>
<div class="cta-box">
<h3>Try It Yourself — First Month Free</h3>
<p>Deploy a Hermes Agent on derez.ai in under 5 minutes. SSH access, full-disk backups, managed dashboard — everything you need to run an agent that can work with you, not just for you. Use coupon code <strong>BLOG950</strong> for your first month free.</p>
<a class="btn" href="https://derez.ai/#pricing">Get Your Agent →</a>
</div>
<p style="margin-top:48px;padding-top:24px;border-top:1px solid #1a1a2e;font-size:0.85rem;color:#666;">
<a href="https://derez.ai" style="color:#00f5ff">derez.ai</a> — Deploy your AI agent in 5 minutes. &middot;
<a href="https://derez.ai/blog/posts/automating-linkedin-content-with-ai-agent.html">How I Automated LinkedIn Publishing with an AI Agent</a> &middot;
<a href="https://derez.ai/blog/posts/hermes-n8n-business-automation-hub.html">n8n + Hermes Agent: The 350-Tool Automation Hub</a>
</p>
</div>
</body>
</html>