- 26
- Flow step types
- 7
- Reusable browser agents
- 1
- n8n endpoint, 3 execution modes
Tech stack
- Node.js
- Express
- Playwright
- Alpine.js
- n8n
- Server-Sent Events
- ngrok
Problem
Multi-step browser automations — log in, search, act, confirm, and so on — are hard to compose, reuse, and trigger from other tools. Hand-coding each campaign as a one-off script means no reuse, no visibility into what happened, and no clean way for a non-developer or an orchestrator like n8n to run it.
Approach
I built a Node.js / Express + Playwright platform with a visual Flow Builder offering 26 step types (variables, conditions, loops, error handling, sub-flows) that chains seven reusable browser agents. Any agent can be embedded as a step, and its results feed the steps that follow. The platform exposes a single /n8n/execute endpoint with three modes — saved flow, inline steps, or legacy agent pipeline — plus in-memory session management with a TTL, built-in tunnel management for cloud triggers, and real-time Server-Sent-Events logs.
Results
Reusable, composable automations that non-developers can assemble visually and trigger with a single HTTP call. Sessions persist across steps so multi-stage flows behave like one coherent run, and the live SSE log makes every execution observable in real time.
Notable engineering
- Visual Flow Builder with 26 step types — variables, conditions, loops, error handling, sub-flows and embedded agent steps.
- Seven reusable browser agents composed into workflows; each agent's results feed subsequent steps.
- Single /n8n/execute endpoint with three modes (saved flow, inline steps, legacy pipeline) for external triggering.
- In-memory browser session management with a 2-hour TTL shared across flow steps.
- Built-in tunnel management (ngrok) for cloud triggers and real-time Server-Sent-Events log streaming.
Screenshots & diagrams
Real UI captures and figures — source is private and client brands are not shown.
Deep dive
The core idea is a flow engine that treats browser agents as composable building blocks. A flow is an ordered graph of typed steps — control flow (conditions, loops, error handling), data (variables), composition (sub-flows), and run_agent steps that invoke a real browser agent. Because a running browser session is shared across steps with a TTL, a flow can log in once and reuse that session through the rest of the run, which is what makes realistic multi-stage automations possible.
Integration was a first-class goal: a single /n8n/execute endpoint with three modes lets an orchestrator run a saved flow, send inline steps, or fall back to a legacy agent pipeline — and built-in tunnel management exposes it to n8n Cloud without extra infrastructure. Real-time SSE logs stream every step to the dashboard so operators can watch a run as it happens.