Open Source Web Agents in 2026: The Definitive Guide to Building Production-Ready Browser Automation

from browser_use import Agent

agent = Agent(
    task="Find cheapest flights to Tokyo",
    llm=your_llm_instance
)

result = await agent.run()

// Natural language automation
await agent.execute("Extract all product prices and save to CSV");

// Multi-agent coordination
const result = await executor.execute({
  task: userInput,
  agents: [navigator, planner, validator]
});

import Stagehand from "@browserbasehq/stagehand";

const stagehand = new Stagehand();
await stagehand.init();
await stagehand.page.goto("https://example.com");

// Natural language actions
await stagehand.act("click the login button");
await stagehand.extract("get all product prices");

// Used via MCP client (e.g., Claude Desktop)
// LLM can call these tools:

<use_tool name="playwright_navigate">
  <url>https://example.com</url>
</use_tool>

<use_tool name="playwright_click">
  <selector>button.login</selector>
</use_tool>

from lavague import Agent

agent = Agent()
agent.run("Book a flight to Paris for next week")

from crawl4ai import AsyncWebCrawler

async with AsyncWebCrawler() as crawler:
    result = await crawler.arun(
        url="https://example.com",
        llm_extraction_strategy=LLMExtractionStrategy(
            provider="openai/gpt-4",
            instruction="Extract all product information"
        )
    )

import gym
from browsergym import env

env = gym.make('browsergym-v0')
observation = env.reset()

for _ in range(1000):
    action = agent.select_action(observation)
    observation, reward, done, info = env.step(action)

from skyvern import Skyvern

skyvern = Skyvern(api_key=API_KEY)

task = skyvern.create_task(
    url="https://example.com",
    navigation_goal="Complete checkout process"
)

result = task.execute()

class NPVArchitecture {
  private navigator: NavigatorAgent;
  private planner: PlannerAgent;
  private validator: ValidatorAgent;

  async execute(task: string): Promise<Result> {
    // 1. Planner creates strategy
    const plan = await this.planner.plan(task);

    // 2. Navigator executes
    for (const step of plan.steps) {
      const result = await this.navigator.execute(step);

      // 3. Validator checks
      const validation = await this.validator.validate(result, step.expected);

      if (!validation.success) {
        // Replan if needed
        const recovery = await this.planner.replan(result);
        await this.navigator.execute(recovery);
      }
    }

    return this.aggregateResults();
  }
}

class EventDrivenAgent {
  private eventBus: EventEmitter;

  constructor() {
    this.eventBus = new EventEmitter();
    this.setupListeners();
  }

  private setupListeners() {
    this.eventBus.on('page_loaded', this.onPageLoad.bind(this));
    this.eventBus.on('element_clicked', this.onElementClick.bind(this));
    this.eventBus.on('data_extracted', this.onDataExtracted.bind(this));
  }

  async onPageLoad(page: Page) {
    // Analyze page
    const analysis = await this.analyzePage(page);
    this.eventBus.emit('page_analyzed', analysis);
  }

  async onDataExtracted(data: any) {
    // Process and store
    await this.processData(data);
    this.eventBus.emit('data_processed', data);
  }
}

interface Plugin {
  name: string;
  version: string;
  hooks: {
    beforeNavigate?: (url: string) => Promise<void>;
    afterNavigate?: (page: Page) => Promise<void>;
    onError?: (error: Error) => Promise<void>;
  };
}

class PluginSystem {
  private plugins: Plugin[] = [];

  register(plugin: Plugin) {
    this.plugins.push(plugin);
  }

  async triggerHook(hookName: string, ...args: any[]) {
    for (const plugin of this.plugins) {
      const hook = plugin.hooks[hookName];
      if (hook) {
        await hook(...args);
      }
    }
  }
}

// Usage
const agent = new Agent();
agent.plugins.register({
  name: 'screenshot-logger',
  version: '1.0.0',
  hooks: {
    afterNavigate: async (page) => {
      await page.screenshot({ path: 'screenshot.png' });
    }
  }
});

# Option A: browser-use (Python)
pip install browser-use

# Option B: Stagehand (TypeScript)
npm install @browserbasehq/stagehand

# Option C: Build from scratch with Playwright
npm install playwright

import { chromium } from 'playwright';

class SimpleWebAgent {
  private browser: Browser;
  private page: Page;

  async initialize() {
    this.browser = await chromium.launch({ headless: false });
    const context = await this.browser.newContext();
    this.page = await context.newPage();
  }

  async execute(task: string): Promise<any> {
    // 1. Parse task (simplified - use LLM in production)
    const actions = this.parseTask(task);

    // 2. Execute actions
    const results = [];
    for (const action of actions) {
      const result = await this.performAction(action);
      results.push(result);
    }

    return results;
  }

  private async performAction(action: Action): Promise<any> {
    switch (action.type) {
      case 'navigate':
        await this.page.goto(action.url);
        break;

      case 'click':
        await this.page.click(action.selector);
        break;

      case 'type':
        await this.page.fill(action.selector, action.text);
        break;

      case 'extract':
        return await this.page.$$eval(action.selector, els =>
          els.map(el => el.textContent)
        );

      default:
        throw new Error(`Unknown action: ${action.type}`);
    }
  }

  async cleanup() {
    await this.browser.close();
  }
}

// Usage
const agent = new SimpleWebAgent();
await agent.initialize();

const result = await agent.execute("Go to example.com and extract all links");
console.log(result);

await agent.cleanup();

import OpenAI from 'openai';

class LLMWebAgent extends SimpleWebAgent {
  private openai: OpenAI;

  constructor() {
    super();
    this.openai = new OpenAI({ apiKey: process.env.OPENAI_API_KEY });
  }

  async execute(task: string): Promise<any> {
    // 1. Use LLM to plan
    const plan = await this.planWithLLM(task);

    // 2. Execute plan
    return await super.execute(plan);
  }

  private async planWithLLM(task: string): Promise<string> {
    const response = await this.openai.chat.completions.create({
      model: 'gpt-4',
      messages: [
        {
          role: 'system',
          content: `You are a browser automation agent. Convert user tasks into action sequences.
            Available actions: navigate, click, type, extract
            Return JSON array of actions.`
        },
        {
          role: 'user',
          content: task
        }
      ]
    });

    return response.choices[0].message.content;
  }
}

class RobustWebAgent extends LLMWebAgent {
  private maxRetries = 3;

  async execute(task: string): Promise<any> {
    for (let attempt = 1; attempt <= this.maxRetries; attempt++) {
      try {
        return await super.execute(task);
      } catch (error) {
        console.error(`Attempt ${attempt} failed:`, error);

        if (attempt === this.maxRetries) {
          throw error;
        }

        // Ask LLM for recovery strategy
        const recovery = await this.recoverWithLLM(task, error);
        await this.applyRecovery(recovery);
      }
    }
  }

  private async recoverWithLLM(task: string, error: Error): Promise<string> {
    const response = await this.openai.chat.completions.create({
      model: 'gpt-4',
      messages: [
        {
          role: 'system',
          content: 'Suggest alternative actions when automation fails.'
        },
        {
          role: 'user',
          content: `Task: ${task}\nError: ${error.message}\nSuggest alternative approach.`
        }
      ]
    });

    return response.choices[0].message.content;
  }
}

class MultiAgentOrchestrator {
  private workers: Worker[] = [];

  async executeParallel(tasks: Task[]): Promise<Result[]> {
    // Distribute tasks across workers
    const chunks = this.chunkTasks(tasks, this.workers.length);

    // Execute in parallel
    const results = await Promise.all(
      chunks.map((chunk, i) =>
        this.workers[i].executeBatch(chunk)
      )
    );

    return results.flat();
  }

  private chunkTasks(tasks: Task[], numChunks: number): Task[][] {
    const chunkSize = Math.ceil(tasks.length / numChunks);
    const chunks: Task[][] = [];

    for (let i = 0; i < tasks.length; i += chunkSize) {
      chunks.push(tasks.slice(i, i + chunkSize));
    }

    return chunks;
  }
}

// Usage: Scrape 100 pages in parallel with 10 workers
const orchestrator = new MultiAgentOrchestrator();
for (let i = 0; i < 10; i++) {
  orchestrator.addWorker(new Worker());
}

const results = await orchestrator.executeParallel(scraping Tasks);

interface LLMProvider {
  generate(prompt: string, options?: any): Promise<string>;
}

class OpenAIProvider implements LLMProvider {
  async generate(prompt: string, options = {}): Promise<string> {
    const response = await openai.chat.completions.create({
      model: options.model || 'gpt-4',
      messages: [{ role: 'user', content: prompt }]
    });
    return response.choices[0].message.content;
  }
}

class AnthropicProvider implements LLMProvider {
  async generate(prompt: string, options = {}): Promise<string> {
    const response = await anthropic.messages.create({
      model: options.model || 'claude-3-5-sonnet-20241022',
      messages: [{ role: 'user', content: prompt }]
    });
    return response.content[0].text;
  }
}

class LocalProvider implements LLMProvider {
  async generate(prompt: string): Promise<string> {
    // Use Chrome Built-in AI (Gemini Nano)
    const session = await ai.languageModel.create();
    return await session.prompt(prompt);
  }
}

// Agent with multi-provider support
class FlexibleAgent {
  constructor(private provider: LLMProvider) {}

  async execute(task: string) {
    const plan = await this.provider.generate(
      `Plan how to: ${task}`
    );
    // ... execute plan
  }
}

// Usage
const agent = new FlexibleAgent(new OpenAIProvider());
// or
const agent = new FlexibleAgent(new LocalProvider());

# Dockerfile for web agent
FROM node:20-slim

# Install Playwright dependencies
RUN apt-get update && apt-get install -y \
    libnss3 \
    libatk-bridge2.0-0 \
    libdrm2 \
    libxkbcommon0 \
    libgbm1 \
    libasound2

WORKDIR /app

COPY package*.json ./
RUN npm ci

COPY . .
RUN npx playwright install chromium

ENV NODE_ENV=production

CMD ["node", "agent.js"]

# docker-compose.yml
version: '3.8'

services:
  web-agent:
    build: .
    environment:
      - OPENAI_API_KEY=${OPENAI_API_KEY}
    volumes:
      - ./data:/app/data
    restart: unless-stopped

# k8s-deployment.yaml
apiVersion: apps/v1
kind: Deployment
metadata:
  name: web-agent
spec:
  replicas: 5
  selector:
    matchLabels:
      app: web-agent
  template:
    metadata:
      labels:
        app: web-agent
    spec:
      containers:
      - name: agent
        image: myorg/web-agent:latest
        env:
        - name: OPENAI_API_KEY
          valueFrom:
            secretKeyRef:
              name: llm-credentials
              key: openai-key
        resources:
          requests:
            memory: "512Mi"
            cpu: "500m"
          limits:
            memory: "2Gi"
            cpu: "2000m"

# 1. Fork repository
git clone https://github.com/yourusername/browser-use.git
cd browser-use

# 2. Create feature branch
git checkout -b feature/my-improvement

# 3. Make changes and test
npm test

# 4. Submit PR
git push origin feature/my-improvement