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

2026-07-21 14:07:08 -03:00
parent 482cde62b1
commit 42fef2f8c6
2 changed files with 331 additions and 0 deletions
@@ -1,5 +1,14 @@
 {
  "posts": [
    {
      "id": "shared-browser-raspberry-pi-hermes-agent",
      "date": "2026-07-21",
      "area": "howto",
      "agent": "hermes",
      "headline": "Give Your Hermes Agent a Browser It Can Control \u2014 with a Raspberry Pi",
      "teaser": "Turn a $35 Raspberry Pi into a shared browser your AI agent can drive remotely. Reverse SSH tunneling sends Chrome DevTools Protocol through your cloud server \u2014 both you and your agent control the same browser. Real script included.",
      "link": "blog/posts/shared-browser-raspberry-pi-hermes-agent.html"
    },
    {
      "id": "hermes-n8n-business-automation-hub",
      "date": "2026-07-17",
@@ -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>