Multi-Agent Browser Automation: How Coordinated AI Agents Are Revolutionizing Web Tasks in 2026

// Traditional automation - breaks on every site update
await page.click('#login-button');
await page.type('#username', 'user');
await page.type('#password', 'pass');
await page.click('.submit-btn');

// Site updates CSS classes → script fails
// Site adds CAPTCHA → script fails
// Site changes layout → script fails

Navigator Agent → Executes browser actions (click, type, scroll)
Planner Agent → Strategic planning and task decomposition
Validator Agent → Verifies task completion and data quality
Extractor Agent → Data extraction and transformation
Monitor Agent → Performance tracking and error detection

interface AgentContext {
  currentPage: PageState;
  taskHistory: Action[];
  executionResults: Result[];
  sharedMemory: Map<string, any>;
  errorLog: Error[];
}

class Executor {
  async execute(task: string) {
    // 1. Planner creates strategy
    const plan = await this.planner.createPlan(task);

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

      // 3. Validator checks progress
      if (step.requiresValidation) {
        await this.validator.verify(result);
      }

      // 4. Adapt based on results
      if (!result.success) {
        const recovery = await this.planner.createRecoveryPlan(result);
        await this.navigator.execute(recovery);
      }
    }

    return this.results;
  }
}

interface AgentMessage {
  from: AgentType;
  to: AgentType;
  type: MessageType;
  payload: any;
  priority: number;
  timestamp: number;
}

class MessageBus {
  private subscribers = new Map<AgentType, Agent[]>();

  publish(message: AgentMessage) {
    const recipients = this.subscribers.get(message.to);
    for (const agent of recipients) {
      agent.receive(message);
    }
  }

  subscribe(agentType: AgentType, agent: Agent) {
    if (!this.subscribers.has(agentType)) {
      this.subscribers.set(agentType, []);
    }
    this.subscribers.get(agentType).push(agent);
  }
}

Task: "Login and download report"

Step 1: Navigator → Navigate to login page
Step 2: Navigator → Enter credentials
Step 3: Validator → Verify login success
Step 4: Navigator → Navigate to reports
Step 5: Extractor → Download report
Step 6: Validator → Verify file downloaded

Task: "Gather competitor pricing data"

Parallel Branch 1:
  Navigator A → Visit competitor1.com
  Extractor A → Extract pricing

Parallel Branch 2:
  Navigator B → Visit competitor2.com
  Extractor B → Extract pricing

Parallel Branch 3:
  Navigator C → Visit competitor3.com
  Extractor C → Extract pricing

Aggregator → Combine all results

Master Planner
  ├─ Sub-Task 1: Research Phase
  │   ├─ Navigator: Visit sources
  │   └─ Extractor: Gather data
  ├─ Sub-Task 2: Analysis Phase
  │   └─ Analyzer: Process data
  └─ Sub-Task 3: Reporting Phase
      └─ Reporter: Generate output

class SharedContext {
  private state: Map<string, any> = new Map();
  private history: Action[] = [];
  private metrics: Metrics = new Metrics();

  // Thread-safe state updates
  async updateState(key: string, value: any) {
    await this.lock.acquire();
    this.state.set(key, value);
    this.notifySubscribers(key, value);
    this.lock.release();
  }

  // Historical tracking
  recordAction(agent: AgentType, action: Action) {
    this.history.push({
      agent,
      action,
      timestamp: Date.now(),
      context: this.getSnapshot()
    });
  }

  // Performance monitoring
  trackMetrics(agent: AgentType, duration: number) {
    this.metrics.record(agent, duration);
  }
}

const ACTIONS = {
  go_to_url: async (url: string) => {
    await page.goto(url, { waitUntil: 'networkidle' });
  },

  click_element: async (selector: string) => {
    const element = await page.waitForSelector(selector);
    await element.click();
  },

  input_text: async (selector: string, text: string) => {
    await page.type(selector, text, { delay: 100 });
  },

  scroll_to_element: async (selector: string) => {
    await page.evaluate((sel) => {
      document.querySelector(sel)?.scrollIntoView();
    }, selector);
  },

  extract_data: async (selector: string) => {
    return await page.$$eval(selector, els =>
      els.map(el => el.textContent)
    );
  }
};

class Navigator extends BaseAgent {
  private maxRetries = 3;
  private retryDelay = 2000;

  async execute(action: Action): Promise<Result> {
    for (let attempt = 1; attempt <= this.maxRetries; attempt++) {
      try {
        const result = await this.performAction(action);
        return { success: true, data: result };
      } catch (error) {
        if (attempt === this.maxRetries) {
          return {
            success: false,
            error,
            recovery: await this.suggestRecovery(error)
          };
        }
        await this.wait(this.retryDelay * attempt);
      }
    }
  }
}

class Planner extends BaseAgent {
  async createPlan(task: string, context: Context): Promise<Plan> {
    // 1. Analyze task complexity
    const complexity = this.analyzeComplexity(task);

    // 2. Break down into steps
    const steps = await this.llm.generate({
      prompt: `Break down this task into specific steps: ${task}`,
      context: context.getSnapshot(),
      format: 'json'
    });

    // 3. Prioritize steps
    const prioritized = this.prioritizeSteps(steps);

    // 4. Identify parallelization opportunities
    const optimized = this.optimizeExecution(prioritized);

    return {
      steps: optimized,
      estimatedDuration: this.estimateTime(optimized),
      dependencies: this.mapDependencies(optimized),
      checkpoints: this.defineCheckpoints(optimized)
    };
  }

  async evaluateProgress(plan: Plan, results: Result[]): Promise<Evaluation> {
    return await this.llm.generate({
      prompt: `Evaluate progress on this plan:
        Original Plan: ${JSON.stringify(plan)}
        Results So Far: ${JSON.stringify(results)}

        Is the task complete? Should we adjust the plan?`,
      format: 'json'
    });
  }
}

async handleFailure(failedStep: Step, error: Error): Promise<Plan> {
  const recovery = await this.llm.generate({
    prompt: `Step failed: ${failedStep.description}
      Error: ${error.message}

      Suggest 3 alternative approaches to achieve the same goal.`,
    format: 'json'
  });

  // Try alternatives in order of confidence
  return this.createRecoveryPlan(recovery.alternatives);
}

class Validator extends BaseAgent {
  async validate(result: Result, expected: Expectation): Promise<ValidationResult> {
    const checks = [
      this.checkCompleteness(result, expected),
      this.checkAccuracy(result, expected),
      this.checkConsistency(result),
      this.checkFormat(result, expected)
    ];

    const results = await Promise.all(checks);

    return {
      valid: results.every(r => r.passed),
      issues: results.filter(r => !r.passed),
      confidence: this.calculateConfidence(results),
      suggestions: this.generateSuggestions(results)
    };
  }

  private async checkCompleteness(result: Result, expected: Expectation) {
    // Did we get all required fields?
    const requiredFields = expected.requiredFields;
    const actualFields = Object.keys(result.data);
    const missing = requiredFields.filter(f => !actualFields.includes(f));

    return {
      passed: missing.length === 0,
      message: missing.length > 0
        ? `Missing fields: ${missing.join(', ')}`
        : 'All required fields present',
      severity: missing.length > 0 ? 'error' : 'ok'
    };
  }

  private async checkAccuracy(result: Result, expected: Expectation) {
    // Use LLM to verify semantic correctness
    return await this.llm.generate({
      prompt: `Verify this data matches the expected format:
        Expected: ${JSON.stringify(expected)}
        Actual: ${JSON.stringify(result)}

        Is this data accurate and correctly formatted?`,
      format: 'json'
    });
  }
}

Step 1: Login (must complete first)
Step 2: Navigate to dashboard (requires login)
Step 3: Click report button (requires dashboard)
Step 4: Download file (requires report)

Step 1: Extract product list
Step 2: For each product → navigate to detail page
Step 3: Extract details
Step 4: Aggregate all data

Task: Gather data from 10 different websites

Parallel:
  Tab 1 → site1.com
  Tab 2 → site2.com
  Tab 3 → site3.com
  ...
  Tab 10 → site10.com

All execute simultaneously → 10x faster

Sequential: 10 sites × 30 seconds each = 300 seconds (5 minutes)
Parallel: max(30 seconds) = 30 seconds

Speed increase: 10x

async function monitorPrices(products: string[]) {
  // Phase 1: Parallel data collection
  const results = await Promise.all(
    products.map(async (product) => {
      const navigator = new Navigator();

      // Each product scraped in parallel
      return await navigator.execute({
        type: 'scrape_product',
        product,
        sites: ['amazon', 'ebay', 'walmart']
      });
    })
  );

  // Phase 2: Sequential analysis
  const analyzer = new Analyzer();
  const analysis = await analyzer.processSequentially(results);

  // Phase 3: Parallel notifications
  await Promise.all([
    emailService.send(analysis),
    slackService.notify(analysis),
    databaseService.save(analysis)
  ]);
}

class CompetitiveIntelligence {
  async execute() {
    // Planner: Create strategy
    const plan = await this.planner.createPlan({
      task: 'competitor_monitoring',
      competitors: ['comp1.com', 'comp2.com', 'comp3.com', 'comp4.com', 'comp5.com'],
      metrics: ['pricing', 'new_products', 'promotions']
    });

    // Navigator: Parallel scraping
    const data = await Promise.all(
      plan.competitors.map(async (competitor) => {
        const nav = new Navigator();
        return await nav.executeParallel([
          { action: 'scrape_pricing', target: competitor },
          { action: 'scrape_products', target: competitor },
          { action: 'scrape_promotions', target: competitor }
        ]);
      })
    );

    // Validator: Quality check
    const validated = await this.validator.validateBatch(data);

    // Analyzer: Generate insights
    const insights = await this.analyzer.compare(validated, this.historicalData);

    // Reporter: Create report
    return await this.reporter.generate(insights);
  }
}

class CrossBrowserTesting {
  async runTests(testSuite: Test[]) {
    // Planner: Distribute tests across browsers
    const distribution = await this.planner.distributeTests({
      tests: testSuite,
      browsers: ['chrome', 'firefox', 'safari', 'edge'],
      strategy: 'balanced'
    });

    // Navigator: Parallel execution
    const results = await Promise.all(
      distribution.map(async (batch) => {
        const nav = new Navigator(batch.browser);
        return await nav.executeTests(batch.tests);
      })
    );

    // Validator: Check for cross-browser issues
    const validation = await this.validator.findInconsistencies(results);

    // Reporter: Generate test report
    return await this.reporter.createReport({
      results,
      inconsistencies: validation.issues,
      coverage: this.calculateCoverage(results)
    });
  }
}

class DataMigration {
  async migrate(records: Record[]) {
    // Planner: Create batches with checkpointing
    const batches = await this.planner.createBatches({
      records,
      batchSize: 100,
      checkpointInterval: 1000
    });

    // Navigator: Parallel migration with rate limiting
    const queue = new PQueue({ concurrency: 10 });

    for (const batch of batches) {
      queue.add(async () => {
        const nav = new Navigator();

        // Extract from legacy system
        const data = await nav.extract(batch);

        // Transform data format
        const transformed = await this.transformer.convert(data);

        // Validator: Verify transformation
        const validated = await this.validator.checkTransformation(
          data,
          transformed
        );

        if (!validated.success) {
          await this.errorHandler.log(validated.errors);
          return { success: false, batch };
        }

        // Load into new system
        await nav.load(transformed);

        // Checkpoint progress
        await this.checkpoint.save(batch.id);

        return { success: true, batch };
      });
    }

    return await queue.onIdle();
  }
}

interface Agent {
  name: string;
  type: AgentType;
  capabilities: string[];

  execute(task: Task, context: Context): Promise<Result>;
  canHandle(task: Task): boolean;
  getStatus(): AgentStatus;
}

interface BaseAgent implements Agent {
  protected llm: LLMProvider;
  protected context: SharedContext;
  protected eventBus: MessageBus;

  constructor(config: AgentConfig) {
    this.llm = new LLMProvider(config.model);
    this.context = SharedContext.getInstance();
    this.eventBus = MessageBus.getInstance();
  }
}

class NavigatorAgent extends BaseAgent {
  capabilities = ['click', 'type', 'scroll', 'extract', 'navigate'];

  async execute(task: Task, context: Context): Promise<Result> {
    const actions = await this.llm.generateActions(task, context);
    const results = [];

    for (const action of actions) {
      const result = await this.performAction(action);
      results.push(result);

      if (!result.success && action.critical) {
        return { success: false, error: result.error };
      }
    }

    return { success: true, data: results };
  }

  canHandle(task: Task): boolean {
    return task.requiresCapabilities.every(cap =>
      this.capabilities.includes(cap)
    );
  }
}

class PlannerAgent extends BaseAgent {
  capabilities = ['planning', 'strategy', 'decomposition'];

  async execute(task: Task, context: Context): Promise<Result> {
    const plan = await this.createPlan(task, context);
    context.updateState('currentPlan', plan);

    return {
      success: true,
      data: plan,
      nextSteps: plan.steps
    };
  }
}

class ValidatorAgent extends BaseAgent {
  capabilities = ['validation', 'verification', 'quality-check'];

  async execute(task: Task, context: Context): Promise<Result> {
    const validation = await this.validate(
      context.getState('latestResult'),
      task.expectations
    );

    return {
      success: validation.valid,
      data: validation,
      issues: validation.issues
    };
  }
}

class MultiAgentExecutor {
  private agents: Map<AgentType, Agent> = new Map();
  private context: SharedContext;
  private eventBus: MessageBus;

  constructor() {
    this.context = new SharedContext();
    this.eventBus = new MessageBus();

    // Register agents
    this.registerAgent(new PlannerAgent());
    this.registerAgent(new NavigatorAgent());
    this.registerAgent(new ValidatorAgent());
  }

  async execute(task: string): Promise<Result> {
    // 1. Planning phase
    const plan = await this.agents.get('planner').execute({
      type: 'create_plan',
      description: task
    }, this.context);

    // 2. Execution phase
    const results = [];
    for (const step of plan.data.steps) {
      // Find capable agent
      const agent = this.findAgent(step.requiredCapabilities);

      // Execute step
      const result = await agent.execute(step, this.context);
      results.push(result);

      // Validate if required
      if (step.requiresValidation) {
        const validation = await this.agents.get('validator').execute({
          type: 'validate',
          target: result,
          expectations: step.expectations
        }, this.context);

        if (!validation.success) {
          // Replan if validation fails
          const recovery = await this.agents.get('planner').execute({
            type: 'create_recovery_plan',
            failure: validation
          }, this.context);

          // Execute recovery plan
          await this.execute(recovery.data);
        }
      }
    }

    // 3. Final validation
    return await this.agents.get('validator').execute({
      type: 'final_validation',
      results
    }, this.context);
  }

  private findAgent(capabilities: string[]): Agent {
    for (const [type, agent] of this.agents) {
      if (capabilities.every(cap => agent.capabilities.includes(cap))) {
        return agent;
      }
    }
    throw new Error(`No agent found with capabilities: ${capabilities}`);
  }
}

class RobustExecutor extends MultiAgentExecutor {
  private maxRetries = 3;
  private checkpointInterval = 5;

  async execute(task: string): Promise<Result> {
    let attempt = 0;
    let checkpoint = this.loadCheckpoint(task);

    while (attempt < this.maxRetries) {
      try {
        // Resume from checkpoint if exists
        const result = checkpoint
          ? await this.resumeFrom(checkpoint)
          : await super.execute(task);

        return result;

      } catch (error) {
        attempt++;

        // Log error
        await this.logError(error, task, attempt);

        // Analyze failure
        const analysis = await this.analyzeFailure(error);

        // Create recovery strategy
        if (attempt < this.maxRetries) {
          const recovery = await this.createRecoveryStrategy(analysis);

          // Wait before retry (exponential backoff)
          await this.wait(Math.pow(2, attempt) * 1000);

          // Apply recovery strategy
          await this.applyRecovery(recovery);
        } else {
          throw new Error(
            `Task failed after ${this.maxRetries} attempts: ${error.message}`
          );
        }
      }
    }
  }

  private async createCheckpoint(step: number, state: any) {
    await this.storage.save({
      step,
      state,
      timestamp: Date.now(),
      context: this.context.getSnapshot()
    });
  }
}

class LearningAgent extends BaseAgent {
  private learningModel: MLModel;

  async execute(task: Task): Promise<Result> {
    const result = await super.execute(task);

    // Learn from outcome
    await this.learningModel.train({
      input: task,
      output: result,
      success: result.success
    });

    return result;
  }
}

class AutonomousAgent extends BaseAgent {
  async findHelp(task: Task) {
    // Discover available agents
    const agents = await this.registry.search({
      capabilities: task.requiredCapabilities,
      availability: 'now'
    });

    // Negotiate collaboration
    for (const agent of agents) {
      const offer = await agent.negotiate(task);
      if (offer.acceptable) {
        return agent;
      }
    }
  }
}

# Using OnPiste (open source)
npm install @onpiste/multi-agent

# Basic setup
import { Executor, Navigator, Planner } from '@onpiste/multi-agent';

const executor = new Executor({
  agents: [new Navigator(), new Planner()]
});

await executor.execute("Scrape product data from Amazon");

class AuthenticationManager {
  private sessions = new Map<string, Session>();

  async authenticate(site: string) {
    if (this.sessions.has(site)) {
      return this.sessions.get(site);
    }

    const session = await this.login(site);
    this.sessions.set(site, session);

    // Share with all agents
    this.context.updateState('auth', {
      [site]: session
    });

    return session;
  }
}

class ServerlessExecutor {
  async execute(task: string) {
    // Serialize state to external storage
    await this.saveState(this.context);

    // Execute agents in Lambda functions
    const results = await Promise.all([
      lambda.invoke({ agent: 'navigator', task }),
      lambda.invoke({ agent: 'planner', task }),
      lambda.invoke({ agent: 'validator', task })
    ]);

    // Aggregate results
    return this.combineResults(results);
  }
}

class ObservableExecutor extends Executor {
  private trace: Trace[] = [];

  async execute(task: string) {
    // Start tracing
    const traceId = this.startTrace(task);

    try {
      const result = await super.execute(task);

      // Log success
      this.endTrace(traceId, 'success', result);

      return result;
    } catch (error) {
      // Log failure
      this.endTrace(traceId, 'error', error);
      throw error;
    }
  }

  getTrace(traceId: string): Trace[] {
    // Return full execution trace
    return this.trace.filter(t => t.id === traceId);
  }
}