From ChatGPT Atlas to Local Browser Agents: Why Running AI Locally Changes Everything

Your search → OpenAI servers → Browser action → Results → OpenAI servers → You

Request to OpenAI → Queue wait → LLM processing → Response → Browser action → Report to OpenAI → Next step

Your Browser ⟷ OpenAI Servers ⟷ Automation Logic ⟷ Target Website
     ↓                ↓                  ↓              ↓
  Display         AI Processing      Execution       Data

Your Browser
  ├─ UI Layer (what you see)
  ├─ Agent Layer (AI logic)
  ├─ Execution Layer (browser automation)
  └─ LLM Provider (your choice: OpenAI, Anthropic, local model)
       ↓
   Target Website (direct connection)

// Service Worker (background.js)
class LocalAgent {
  constructor() {
    this.llm = new LLMProvider(userConfig.provider); // User's choice
    this.navigator = new NavigatorAgent();
    this.planner = new PlannerAgent();
  }

  async execute(task: string) {
    // 1. Plan locally
    const plan = await this.planner.createPlan(task);

    // 2. Execute in browser (no external communication)
    for (const step of plan.steps) {
      await this.navigator.executeInTab(step);
    }

    // 3. Return results (never leaves your machine)
    return this.aggregateResults();
  }
}

User Command → Local Planning → Browser Actions → Results
     ↓              ↓                  ↓            ↓
  Your UI     Your LLM API        Your Browser   Your Screen

NO intermediate servers. NO data exfiltration.

// You choose the provider and model
const providers = {
  openai: 'gpt-4o',              // Cheapest, fastest
  anthropic: 'claude-sonnet-4',  // Best reasoning
  google: 'gemini-2.0-flash',    // Free tier available
  groq: 'llama-3-70b',           // Ultra-fast inference
  ollama: 'llama3:70b',          // 100% local, zero cost
  chromeNano: 'nano-ai'          // On-device, built-in
};

1. You: "Fill out this job application"
2. OpenAI receives: entire form + your data
3. OpenAI stores: your name, address, work history, etc.
4. OpenAI processes: generates fill commands
5. Your browser: executes commands
6. OpenAI receives: confirmation + final data

1. You: "Fill out this job application"
2. Local agent: analyzes form (locally)
3. Your browser: fills data directly
4. No external party ever sees your personal information

// Sent to LLM
{
  task: "Extract product prices",
  pageStructure: {
    type: "e-commerce",
    elements: ["product cards", "price labels", "pagination"]
  },
  capabilities: ["click", "scroll", "extract"]
}

// NOT sent (stays local)
{
  actualPrices: "$29.99", "$44.50", ...  // your scraped data
  personalInfo: {...},                    // anything sensitive
  cookies: {...},                         // session data
  authTokens: {...}                       // credentials
}

100 products × 5 sites = 500 pages
Average task complexity: 50 actions per site
Total: 250 actions/day

Cost per action: ~$0.02 (conservative)
Daily cost: $5
Monthly cost: $150
Annual cost: $1,800

Plus ChatGPT Plus: $20/month = $240/year
Total annual: $2,040

LLM API calls: ~500 planning calls/day
Average tokens per call: 2,000 input + 500 output

Using Claude Haiku (cheapest):
Input: 500 × 2K tokens × $0.00025/1K = $0.25/day
Output: 500 × 500 tokens × $0.00125/1K = $0.31/day
Daily cost: $0.56
Monthly cost: $16.80
Annual cost: $201.60

Savings: $1,838.40/year (90% reduction)

Annual cost: $0

Savings: $2,040/year (100% reduction)

500 tests × 3 environments = 1,500 automation runs
Average: 20 actions per test
Total: 30,000 actions/day

Cost per action: $0.02
Daily cost: $600
Monthly cost: $18,000
Annual cost: $216,000

LLM calls: 1,500 runs × 10 planning calls = 15,000 calls/day
Gemini Flash free tier: 1,500 requests/day
Paid tier: $0.00001/1K tokens

15,000 calls × 2K tokens × $0.00001/1K = $0.30/day
Monthly cost: $9
Annual cost: $108

Savings: $215,892/year (99.95% reduction)

1,000 tasks × $1.50 average = $1,500/day
Monthly: $45,000
Annual: $540,000

Use Llama 3 (Groq) for 70% of tasks: Free
Use Claude Haiku for 30% complex tasks: $300/month

Monthly cost: $300
Annual cost: $3,600

Savings: $536,400/year (99.3% reduction)

Request packaging: 10ms
Network to OpenAI: 50-200ms
Queue wait: 0-5,000ms (variable)
LLM processing: 500-3,000ms
Response network: 50-200ms
Local execution: 100-1,000ms
Total: 710-9,410ms (0.7-9.4 seconds)

Average: ~3 seconds per action

Local planning: 0ms (cached) or 20ms
LLM API call: 200-800ms (only when needed)
Local execution: 100-1,000ms
Total: 100-1,820ms (0.1-1.8 seconds)

Average: ~0.5 seconds per action

6x faster than cloud

Atlas: Browser → OpenAI (US East) → Browser
       ↓ 150ms     ↓ 2000ms      ↓ 150ms
       Total: 2,300ms + processing

Local: Browser → Browser
       ↓ 0ms
       Total: 0ms + processing

// Local agents can run multiple tabs simultaneously
await Promise.all([
  agent.executeInTab(tab1, task1),
  agent.executeInTab(tab2, task2),
  agent.executeInTab(tab3, task3)
]);

// Atlas processes sequentially (one task at a time)

class LocalAgent {
  private planCache = new Map();

  async plan(task: string) {
    // Similar tasks reuse plans (no LLM call needed)
    const cached = this.planCache.get(task.pattern);
    if (cached) return cached; // Instant

    const newPlan = await this.llm.generate(task);
    this.planCache.set(task.pattern, newPlan);
    return newPlan;
  }
}

const agentConfig = {
  // Use cheap, fast models for navigation
  navigator: {
    provider: 'groq',
    model: 'llama-3-8b',
    cost: 'free'
  },

  // Use smart models for planning
  planner: {
    provider: 'anthropic',
    model: 'claude-sonnet-4',
    cost: '$15/1M tokens'
  },

  // Use on-device for summarization
  summarizer: {
    provider: 'chrome-nano',
    model: 'gemini-nano',
    cost: 'free'
  }
};

// Optimize for your budget and needs

class CustomExecutor {
  // Your automation, your rules
  async execute(task: string) {
    if (this.isHighPriority(task)) {
      // Use premium model, fast execution
      return await this.executeWithModel('gpt-4o', { maxWait: 0 });
    }

    if (this.isBulkOperation(task)) {
      // Use free model, batch processing
      return await this.executeBatch('llama3-groq', { parallel: 10 });
    }

    if (this.requiresPrivacy(task)) {
      // Use fully local model, zero data egress
      return await this.executeLocal('nano-ai', { offline: true });
    }
  }
}

// Run automation without internet
const offlineAgent = new LocalAgent({
  llm: {
    provider: 'ollama',
    model: 'llama3:70b',
    endpoint: 'http://localhost:11434'
  }
});

// Perfect for:
// - Air-gapped environments
// - Secure facilities
// - Compliance requirements
// - Airplane/remote work

// Enterprise deployment
const enterpriseAgent = new LocalAgent({
  llm: {
    provider: 'custom',
    endpoint: 'https://internal-llm.company.com',
    authentication: {
      type: 'oauth',
      clientId: process.env.LLM_CLIENT_ID
    }
  },

  storage: {
    type: 'on-premise',
    database: 'postgresql://internal-db.company.com'
  },

  audit: {
    enabled: true,
    destination: 'siem.company.com'
  }
});

// Full control for:
// - Regulatory compliance
// - Data sovereignty
// - Security audits
// - Custom policies

// Rich debugging
agent.on('action', (action) => {
  console.log('Executing:', action);
});

agent.on('error', (error) => {
  console.error('Failed:', error);
  // Custom error handling
});

// Extensibility
class CustomAgent extends BaseAgent {
  async execute(task: string) {
    // Add your logic
    const result = await super.execute(task);
    await this.customPostProcessing(result);
    return result;
  }
}

// Testing
test('agent extracts correct data', async () => {
  const agent = new TestAgent();
  const result = await agent.execute('extract prices');
  expect(result.prices).toHaveLength(10);
});

┌─────────────────────────────────────────────────────┐
│                   Chrome Extension                   │
├─────────────────────────────────────────────────────┤
│  UI Layer (Side Panel)                              │
│    └─ React + TypeScript                            │
│    └─ Real-time event streaming                     │
│                                                      │
│  Service Worker (Background)                        │
│    ├─ Multi-Agent System                            │
│    │   ├─ Planner Agent (strategy)                  │
│    │   ├─ Navigator Agent (execution)               │
│    │   └─ Validator Agent (quality)                 │
│    │                                                 │
│    ├─ Browser Context                               │
│    │   ├─ Tab management                            │
│    │   ├─ DOM manipulation                          │
│    │   └─ Screenshot capture                        │
│    │                                                 │
│    └─ LLM Integration Layer                         │
│        └─ Provider abstraction (OpenAI/Anthropic/   │
│           Google/Groq/Ollama/ChromeNano)            │
│                                                      │
│  Storage Layer                                      │
│    ├─ Chrome Storage API                            │
│    ├─ IndexedDB (large data)                        │
│    └─ Session state                                 │
└─────────────────────────────────────────────────────┘
         ↓ (Only when needed)
┌─────────────────────────────────────────────────────┐
│     External LLM Provider (User's Choice)           │
│       OpenAI / Anthropic / Google / Groq /          │
│       Local Ollama / Chrome Nano AI                 │
└─────────────────────────────────────────────────────┘

// Real implementation from Onpiste
class Executor {
  async execute(task: string) {
    // 1. Initialize context
    const context = new AgentContext({
      task,
      browserContext: await this.getBrowserContext(),
      maxSteps: 100,
      llmProviders: this.userConfig.llmProviders
    });

    // 2. Create agents
    const planner = new PlannerAgent(context);
    const navigator = new NavigatorAgent(context);

    // 3. Execution loop
    while (!context.done && context.step < context.maxSteps) {
      // Navigator: Execute actions
      const navResult = await navigator.execute();
      context.recordResult(navResult);

      // Every 3 steps: Planner evaluates progress
      if (context.step % 3 === 0) {
        const planResult = await planner.evaluate();

        if (planResult.done) {
          context.done = true;
          context.finalAnswer = planResult.final_answer;
          break;
        }

        if (planResult.next_goal) {
          context.updateGoal(planResult.next_goal);
        }
      }

      context.step++;
    }

    return {
      success: context.done,
      result: context.finalAnswer,
      metrics: context.getMetrics()
    };
  }
}

// Support for any LLM provider
interface LLMProvider {
  generate(prompt: string, options: GenerateOptions): Promise<Response>;
}

class UniversalLLMProvider implements LLMProvider {
  private providers = new Map([
    ['openai', new OpenAIProvider()],
    ['anthropic', new AnthropicProvider()],
    ['google', new GoogleProvider()],
    ['groq', new GroqProvider()],
    ['ollama', new OllamaProvider()],
    ['chrome-nano', new ChromeNanoProvider()]
  ]);

  async generate(prompt: string, options: GenerateOptions) {
    const provider = this.providers.get(options.provider);
    return await provider.generate(prompt, options);
  }
}

// User configuration
const userConfig = {
  plannerProvider: 'anthropic',  // Best reasoning
  plannerModel: 'claude-sonnet-4',

  navigatorProvider: 'groq',     // Fast, free
  navigatorModel: 'llama-3-70b',

  summaryProvider: 'chrome-nano', // Local, private
  summaryModel: 'gemini-nano'
};

class PrivacyAwarePromptBuilder {
  sanitize(pageContent: string): string {
    // Remove sensitive data before sending to LLM
    return {
      structure: this.extractStructure(pageContent),
      elementTypes: this.classifyElements(pageContent),
      actions: this.availableActions(),
      // NO actual user data, NO text content, NO PII
    };
  }

  buildPrompt(task: string, context: Context): string {
    return `
      Task: ${task}

      Page structure: ${this.sanitize(context.page)}
      Available actions: click, type, scroll, extract
      Previous steps: ${context.history.map(s => s.type)}

      What should the next action be?
    `;
    // Only structural metadata, no sensitive data
  }
}

const migration = {
  before: {
    provider: 'chatgpt-atlas',
    cost: '$15,000/month',
    latency: '3.2s per product',
    privacy: 'All data sent to OpenAI'
  },

  after: {
    provider: 'local-agent + Groq',
    cost: '$0/month (Groq free tier)',
    latency: '0.4s per product',
    privacy: 'Product data stays local'
  },

  results: {
    costSavings: '$180,000/year',
    speedIncrease: '8x faster',
    privacyWin: 'No competitor exposure',
    scalability: 'Unlimited usage'
  }
};

const healthcareConfig = {
  llm: {
    provider: 'ollama',      // 100% local
    model: 'llama3:70b',
    endpoint: 'localhost:11434'
  },

  storage: {
    type: 'encrypted-local',
    key: 'hardware-security-module'
  },

  audit: {
    logLevel: 'full',        // Required for HIPAA
    retention: '6-years',
    destination: 'local-siem'
  }
};

const results = {
  compliance: 'Full HIPAA compliance',
  dataBreaches: 0,
  cost: '$0/month (vs impossible with Atlas)',
  patientPrivacy: 'Protected',
  auditReady: true
};

const bankingTestAgent = {
  deployment: 'self-hosted',
  environment: 'air-gapped network',

  llm: {
    provider: 'on-premise',
    endpoint: 'https://internal-llm.bank.com',
    authentication: 'mTLS + HSM'
  },

  testing: {
    testCases: 5000,
    frequency: 'daily',
    coverage: '95%',
    execution: 'parallel across 50 VMs'
  },

  compliance: {
    pciDss: 'compliant',
    sox: 'compliant',
    dataResidency: 'US-only',
    auditTrail: 'complete'
  }
};

const benefits = {
  enabledAutomation: 'Previously impossible',
  qaTimeReduction: '90%',
  defectDetection: '+40%',
  cost: '$0 cloud fees'
};

# Required
- Chrome 138+ (for latest APIs)
- Node.js 18+ (for build tools)
- pnpm (package manager)

# Optional but recommended
- Ollama (for local LLM)
- Docker (for self-hosted LLM)

# Install from Chrome Web Store
https://chromewebstore.google.com/detail/onpiste/hmojfgaobpbggbfcaijjghjimbbjfnei

# Configure your LLM provider
1. Click extension icon
2. Go to Settings
3. Add API key for your preferred provider:
   - OpenAI (gpt-4o)
   - Anthropic (claude-sonnet-4)
   - Google (gemini-2.0-flash)
   - Groq (llama-3-70b, FREE)
   - Or use Chrome Nano AI (built-in, FREE)

# Start automating
1. Open side panel
2. Describe your task
3. Watch local agents execute

# Clone starter template
git clone https://github.com/onpiste/local-agent-starter
cd local-agent-starter
pnpm install

# Configure
cp .env.example .env
# Add your LLM API keys

# Develop
pnpm dev          # Hot reload
pnpm build        # Production build
pnpm zip          # Package extension

# Load in Chrome
1. chrome://extensions/
2. Enable "Developer mode"
3. "Load unpacked" → select dist/ folder

local-agent-starter/
├─ manifest.json                 # Chrome extension config
├─ src/
│  ├─ background/               # Service worker
│  │  ├─ agent/
│  │  │  ├─ executor.ts        # Main orchestrator
│  │  │  ├─ planner.ts         # Planning agent
│  │  │  ├─ navigator.ts       # Execution agent
│  │  │  └─ validator.ts       # Quality agent
│  │  │
│  │  └─ llm/
│  │     ├─ provider.ts        # LLM abstraction
│  │     ├─ openai.ts
│  │     ├─ anthropic.ts
│  │     ├─ groq.ts
│  │     └─ ollama.ts
│  │
│  ├─ side-panel/              # UI
│  │  ├─ App.tsx
│  │  └─ components/
│  │
│  └─ shared/                  # Common utilities
│
└─ packages/
   ├─ storage/                 # Chrome storage wrapper
   └─ schema/                  # Type definitions

// src/background/agent/custom-navigator.ts
import { NavigatorAgent } from './navigator';

export class CustomNavigatorAgent extends NavigatorAgent {
  async execute(step: Step): Promise<Result> {
    // Add your custom logic
    if (step.requiresSpecialHandling) {
      return await this.specialHandler(step);
    }

    // Default execution
    return await super.execute(step);
  }

  private async specialHandler(step: Step): Promise<Result> {
    // Your domain-specific automation
    // Example: custom authentication flow
    // Example: special data extraction logic
    // Example: integration with internal tools
  }
}

// src/background/llm/custom-provider.ts
import type { LLMProvider } from './provider';

export class CustomLLMProvider implements LLMProvider {
  constructor(private config: ProviderConfig) {}

  async generate(prompt: string, options: GenerateOptions): Promise<string> {
    const response = await fetch(this.config.endpoint, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'Authorization': `Bearer ${this.config.apiKey}`
      },
      body: JSON.stringify({
        model: this.config.model,
        messages: [{ role: 'user', content: prompt }],
        temperature: options.temperature
      })
    });

    const data = await response.json();
    return data.choices[0].message.content;
  }
}

# Install Ollama (local LLM runtime)
curl -fsSL https://ollama.com/install.sh | sh

# Download Llama 3
ollama pull llama3:70b

# Configure agent to use local LLM
const fullyLocalConfig = {
  llm: {
    provider: 'ollama',
    endpoint: 'http://localhost:11434',
    model: 'llama3:70b'
  }
};

# Now all automation runs 100% locally
# No external API calls
# No internet required (after model download)
# Zero cost
# Total privacy

┌─────────────────────────────────────┐
│      Application Layer              │
│  (Browser, Desktop, Mobile)         │
├─────────────────────────────────────┤
│      Local AI Runtime               │
│  (Chrome Nano, Ollama, Local LLM)   │
├─────────────────────────────────────┤
│      Local Data Storage             │
│  (IndexedDB, SQLite, Files)         │
├─────────────────────────────────────┤
│      Sync Layer (Optional)          │
│  (Conflict-free replication)        │
└─────────────────────────────────────┘
         ↕ (Optional sync)
┌─────────────────────────────────────┐
│      Cloud (Optional)               │
│  (Backup, Collaboration only)       │
└─────────────────────────────────────┘