How to Build an AI Web Automation Agent with V8 Isolates: Complete Tutorial

mkdir ai-web-agent && cd ai-web-agent
npm init -y
npm install playwright dotenv

const { chromium } = require('playwright');

class AgentBrowser {
  constructor() {
    this.browser = null;
    this.page = null;
  }

  async launch() {
    this.browser = await chromium.launch({ headless: true });
    this.page = await this.browser.newPage();
    await this.page.setViewportSize({ width: 1280, height: 720 });
    await this.page.setDefaultTimeout(30000);
  }

  async navigate(url) {
    await this.page.goto(url, { waitUntil: 'networkidle' });
    return await this.getPageState();
  }

  async getPageState() {
    return await this.page.evaluate(() => {
      const elements = [];
      document.querySelectorAll('a, button, input, select, textarea').forEach((el, i) => {
        const rect = el.getBoundingClientRect();
        if (rect.width === 0) return;
        elements.push({
          id: i, tag: el.tagName.toLowerCase(),
          text: (el.innerText || el.value || '').substring(0, 80),
          href: el.href || ''
        });
      });
      return {
        url: window.location.href, title: document.title,
        elements: elements.slice(0, 30),
        bodyText: document.body.innerText.substring(0, 2000)
      };
    });
  }

  async click(elementId) {
    await this.page.evaluate((id) => {
      const els = document.querySelectorAll('a, button, input, select, textarea');
      const visible = Array.from(els).filter(el => el.getBoundingClientRect().width > 0);
      if (visible[id]) visible[id].click();
    }, elementId);
    await this.page.waitForLoadState('networkidle');
  }

  async type(elementId, text) {
    await this.page.evaluate((id, txt) => {
      const els = document.querySelectorAll('a, button, input, select, textarea');
      const visible = Array.from(els).filter(el => el.getBoundingClientRect().width > 0);
      if (visible[id]) { visible[id].value = txt; visible[id].dispatchEvent(new Event('input')); }
    }, elementId, text);
  }

  async close() { if (this.browser) await this.browser.close(); }
}
module.exports = { AgentBrowser };

require('dotenv').config();
const { AgentBrowser } = require('./browser');

const API_URL = 'https://api.qubax.ai/v1/chat/completions';
const API_KEY = process.env.QUBAX_API_KEY;

class WebAgent {
  constructor(task, options = {}) {
    this.task = task;
    this.maxSteps = options.maxSteps || 15;
    this.model = options.model || 'deepseek-v4-flash';
    this.browser = new AgentBrowser();
    this.history = [];
    this.stepCount = 0;
  }

  async run() {
    await this.browser.launch();
    while (this.stepCount < this.maxSteps) {
      this.stepCount++;
      const state = await this.browser.getPageState();
      const decision = await this.decide(state);
      console.log(`Step ${this.stepCount}: ${decision.action}`);
      if (decision.action === 'done') break;
      await this.execute(decision);
      this.history.push(decision);
      await new Promise(r => setTimeout(r, 1000));
    }
    await this.browser.close();
  }

  async decide(pageState) {
    const prompt = `Task: ${this.task}
Page: ${pageState.url} | ${pageState.title}
Elements: ${JSON.stringify(pageState.elements.slice(0, 15))}
Text: ${pageState.bodyText.substring(0, 1000)}
History: ${JSON.stringify(this.history.slice(-2))}
Respond with JSON: {"action":"navigate|click|type|done","elementId":N,"text":"...","url":"...","reasoning":"..."}`;

    const res = await fetch(API_URL, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json', 'Authorization': `Bearer ${API_KEY}` },
      body: JSON.stringify({ model: this.model, messages: [{ role: 'user', content: prompt }], temperature: 0.3 })
    });
    const data = await res.json();
    const match = data.choices[0].message.content.match(/\{[\s\S]*\}/);
    return match ? JSON.parse(match[0]) : { action: 'done' };
  }

  async execute(decision) {
    if (decision.action === 'navigate') await this.browser.navigate(decision.url);
    if (decision.action === 'click') await this.browser.click(decision.elementId);
    if (decision.action === 'type') await this.browser.type(decision.elementId, decision.text);
  }
}
module.exports = { WebAgent };

const { WebAgent } = require('./agent');

async function main() {
  const agent = new WebAgent('Find the pricing page and extract plan costs', {
    maxSteps: 10, model: 'deepseek-v4-flash'
  });
  await agent.run();
  console.log('History:', agent.history);
}
main().catch(console.error);

const { Worker } = require('worker_threads');
const path = require('path');

class AgentPool {
  constructor(maxConcurrent = 5) {
    this.maxConcurrent = maxConcurrent;
    this.active = 0;
    this.queue = [];
  }

  async runTask(task) {
    if (this.active >= this.maxConcurrent) {
      return new Promise(resolve => this.queue.push({ task, resolve }));
    }
    this.active++;
    return new Promise((resolve, reject) => {
      const worker = new Worker(path.join(__dirname, 'worker.js'), { workerData: { task } });
      worker.on('message', resolve);
      worker.on('error', reject);
      worker.on('exit', () => {
        this.active--;
        if (this.queue.length > 0) {
          const next = this.queue.shift();
          this.runTask(next.task).then(next.resolve);
        }
      });
    });
  }
}
module.exports = { AgentPool };

class ResilientAgent extends WebAgent {
  constructor(task, options = {}) {
    super(task, options);
    this.maxRetries = options.maxRetries || 3;
  }

  async run() {
    for (let attempt = 1; attempt <= this.maxRetries; attempt++) {
      try { return await super.run(); }
      catch (error) {
        if (attempt === this.maxRetries) throw error;
        await new Promise(r => setTimeout(r, 1000 * Math.pow(2, attempt)));
        this.history = [];
        this.stepCount = 0;
      }
    }
  }
}