-->

Overview

Nanobrowser is an innovative open-source Chrome extension for AI-driven web automation. Designed as an alternative to OpenAI Operator, it automates complex web workflows through a multi-agent system. This guide covers everything from installation to advanced agentic ops strategies.

Introduction to Nanobrowser

Nanobrowser is a system in which three specialized AI agents collaborate to perform web automation:

  • Navigator: Web page navigation and element interaction
  • Planner: Task planning and strategy decisions
  • Validator: Result verification and quality assurance

Key Features

  • Multi-agent system: Specialized AI agents collaborating by role
  • Interactive side panel: Real-time status updates and a chat interface
  • Task automation: Full automation of repetitive web tasks
  • Conversation history: Management of AI agent interaction logs
  • Multiple LLM support: OpenAI, Anthropic, Gemini, Ollama, Groq, Cerebras, and more

Installation and Initial Setup

1. Install from the Chrome Web Store

Stable version installation:

# Visit the Chrome Web Store
https://chrome.google.com/webstore/detail/nanobrowser

2. Manual Installation of the Latest Version

For faster updates, manual installation is recommended:

# 1. Download the latest release from GitHub
curl -L -o nanobrowser.zip https://github.com/nanobrowser/nanobrowser/releases/latest/download/nanobrowser.zip

# 2. Extract the archive
unzip nanobrowser.zip

# 3. Install the Chrome extension
# Navigate to chrome://extensions/
# Enable developer mode
# Click "Load unpacked"
# Select the nanobrowser folder

3. Build from Source

Developers can build directly from source:

# Clone the repository
git clone https://github.com/nanobrowser/nanobrowser.git
cd nanobrowser

# Install dependencies (Node.js v22.12.0+ required)
pnpm install

# Production build
pnpm build

# Run in development mode
pnpm dev

4. Configure Agent Models

After installation, configure the model for each agent:

{
  "agents": {
    "planner": "claude-3-5-sonnet-20241022",
    "navigator": "claude-3-5-haiku-20241022", 
    "validator": "claude-3-5-sonnet-20241022"
  },
  "apiKeys": {
    "anthropic": "sk-ant-xxxxx",
    "openai": "sk-xxxxx",
    "google": "xxxxx"
  }
}

Model Selection Strategy

High-Performance Configuration

For optimal performance:

{
  "planner": "claude-3-5-sonnet-20241022",
  "validator": "claude-3-5-sonnet-20241022", 
  "navigator": "claude-3-5-haiku-20241022"
}

Cost-Efficient Configuration

When cost savings are a priority:

{
  "planner": "gpt-4o-mini",
  "validator": "claude-3-5-haiku-20241022",
  "navigator": "gemini-2.0-flash"
}

Local Model Configuration

For complete privacy and zero API costs:

# Ollama setup
ollama serve
ollama pull qwen2.5-coder:14b
ollama pull mistral-small:24b

# nanobrowser configuration
{
  "planner": "ollama/mistral-small:24b",
  "validator": "ollama/qwen2.5-coder:14b", 
  "navigator": "ollama/qwen2.5-coder:14b",
  "baseUrl": "http://localhost:11434/v1"
}

Basic Usage

1. Simple Task Examples

News aggregation:

"Go to TechCrunch and extract the top 10 headlines from the last 24 hours"

GitHub research:

"Find the most starred trending Python repositories on GitHub"

Shopping research:

"Find a portable Bluetooth speaker with waterproofing on Amazon. It must be under $50 and have at least 10 hours of battery life"

2. Complex Workflow Examples

Competitor analysis:

"Collect the latest product launch information from the websites of 3 competitor companies,
then compile a comparison table of prices and key features"

Agentic Ops Strategies

1. DevOps Automation

CI/CD Monitoring

// GitHub Actions status monitoring
const monitoringTask = `
Check the latest CI/CD status of our 5 main repositories on GitHub.
If there are any failed builds, collect the error logs and send a summary report to Slack.
`;

// Usage
nanobrowser.execute(monitoringTask, {
  schedule: "*/30 * * * *", // Run every 30 minutes
  notify: ["slack://devops-channel"]
});

Infrastructure Health Check

const infraCheck = `
Log into the AWS console and check the status of the following resources:
1. EC2 instances with CPU utilization above 80%
2. Databases with RDS connection counts near their thresholds
3. Active CloudWatch alarms
Compile the results into a dashboard-style report.
`;

2. Data Pipeline Management

Data Quality Monitoring

const dataQualityCheck = `
Sequentially check the following data sources and generate a data quality report:
1. Check the volume of data loaded yesterday in the Snowflake web console
2. Check the data refresh status of key dashboards in Tableau
3. Check if there are any failed DAGs in the Airflow UI
Collect detailed information for any issues found in each system.
`;

Automated Data Collection

const dataCollection = `
Automatically perform the following tasks every day at 9 AM:
1. Download yesterday's website traffic data from Google Analytics
2. Collect campaign performance data from the Facebook Ads Manager
3. Upload the collected data to the designated sheet in Google Sheets
4. Calculate the day-over-day change rate for key metrics and generate a summary report
`;

3. Security Operations Automation

Vulnerability Scan Automation

const securityScan = `
Perform the following tasks in order for the weekly security check:
1. Check for new security alerts in the GitHub Security tab
2. Collect dependency vulnerability scan results from the Snyk dashboard
3. Check for compliance violations in AWS Security Hub
4. Classify all discovered issues by priority and create JIRA tickets
`;

Compliance Monitoring

const complianceCheck = `
For GDPR compliance checks:
1. Verify log retention policies for personal data processing systems
2. Review the status of data deletion request handling
3. Check whether third-party data sharing agreements need renewal
Organize the results in a format suitable for reporting to the compliance team.
`;

4. Customer Support Automation

Ticket Classification and Routing

const ticketManagement = `
Analyze customer support tickets received in Zendesk over the last 2 hours:
1. Automatically classify by urgency and category
2. Recommend solutions if similar issues have been resolved in the past
3. Automatically escalate complex technical issues to the development team
4. Generate automatic responses for simple FAQ-type questions
`;

Customer Feedback Analysis

const feedbackAnalysis = `
Collect and analyze customer feedback from multiple channels:
1. Collect the latest reviews from the App Store and Google Play Store
2. Monitor mentions of our product on social media (Twitter, Reddit)
3. Extract recurring complaints from customer support chat logs
4. Derive insights through sentiment analysis and keyword analysis
`;

5. Marketing Automation

Competitor Monitoring

const competitorAnalysis = `
Monitor the marketing activities of 3 major competitors:
1. Check for new announcements on each company's blog and news section
2. Analyze recent marketing campaigns on LinkedIn and Twitter
3. Detect price changes or new feature additions on their product pages
4. Compile the collected information into a marketing intelligence report
`;

Content Performance Analysis

const contentPerformance = `
Conduct a comprehensive analysis of our content marketing performance:
1. Collect views, likes, and comments for recently uploaded videos on YouTube
2. Check Google Analytics data for blog posts
3. Analyze engagement rates for LinkedIn posts
4. Identify common traits of top-performing content and suggest guidelines for future content creation
`;

Advanced Use Cases

1. Cross-Platform Data Integration

const crossPlatformIntegration = `
Update the E-commerce business KPI dashboard:
1. Collect daily revenue, order count, and refund rate data from Shopify Admin
2. Check ad spend, click-through rate, and conversion rate from Facebook Ads Manager
3. Analyze website traffic by source from Google Analytics
4. Automatically update all data in the Notion database
5. Analyze weekly trends for key metrics and configure alerts
`;

// Scheduling configuration
nanobrowser.schedule(crossPlatformIntegration, {
  cron: "0 9 * * 1", // Every Monday at 9 AM
  timezone: "Asia/Seoul"
});

2. Real-Time Monitoring System

const realTimeMonitoring = `
Real-time service status monitoring:
1. Check response times and status codes for key API endpoints
2. Monitor database connection pool utilization
3. Check CDN cache hit rate and error rate
4. Send an immediate PagerDuty alert when anomalies are detected
5. Automatically update the status page
`;

3. Automated Reporting System

const executiveReporting = `
Generate a monthly comprehensive report for executives:
1. Collect revenue, cost, and margin data from the financial system
2. Check headcount, turnover rate, and satisfaction metrics from the HR system
3. Collect lead generation and customer acquisition cost data from marketing platforms
4. Compile technical metrics (system uptime, deployment count, bug resolution rate)
5. Automatically insert all data into a PowerPoint template to produce a finished report
`;

Security and Governance

1. Security Best Practices

API Key Management

// Use environment variables
const secureConfig = {
  apiKeys: {
    anthropic: process.env.ANTHROPIC_API_KEY,
    openai: process.env.OPENAI_API_KEY
  },
  // Key rotation settings
  keyRotation: {
    enabled: true,
    interval: "30d"
  }
};

Access Control

const accessControl = {
  users: {
    "devops-team": ["infrastructure", "monitoring"],
    "security-team": ["security-scan", "compliance"],
    "marketing-team": ["competitor-analysis", "content-performance"]
  },
  // Task-level permission settings
  permissions: {
    "aws-console": ["devops-team", "security-team"],
    "social-media": ["marketing-team"],
    "financial-data": ["finance-team", "executives"]
  }
};

2. Audit Logs and Tracking

const auditLogging = `
Generate audit logs for all nanobrowser operations:
1. Record the details and timestamps of executed tasks
2. List the systems and data accessed
3. Track task results and changes
4. Flag security-related events separately
5. Submit reports to the compliance team on a regular basis
`;

Performance Optimization

1. Agent Model Optimization

// Dynamic model selection based on task complexity
const adaptiveModelSelection = {
  simple: {
    planner: "gpt-4o-mini",
    navigator: "claude-3-5-haiku",
    validator: "gpt-4o-mini"
  },
  complex: {
    planner: "claude-3-5-sonnet",
    navigator: "claude-3-5-haiku", 
    validator: "claude-3-5-sonnet"
  },
  // Automatic complexity determination logic
  complexityThreshold: {
    steps: 5,
    platforms: 3,
    dataVolume: "10MB"
  }
};

2. Parallel Processing and Batch Jobs

const batchProcessing = `
Batch jobs for large-scale data processing:
1. Collect price information from 1,000 product pages
2. Divide the work into 10 batches and process in parallel
3. Save intermediate results after each batch completes
4. Validate data quality after the entire job finishes
5. Bulk upload the final results to the database
`;

Troubleshooting and Debugging

1. Common Issues

Login Failures

const loginTroubleshooting = `
Remediation for automatic login failures:
1. Use backup codes for accounts with 2FA enabled
2. Attempt automatic re-login when the session expires
3. Request manual intervention from the user when a CAPTCHA is detected
4. Wait for a set period and retry after consecutive failures
`;

Element Location Failures

const elementLocationFix = `
Solutions for web element location failures:
1. Increase the wait time for page load completion
2. Try various selector combinations (CSS, XPath, text)
3. For dynamic content, trigger loading by scrolling or clicking
4. Capture a screenshot on error to provide debugging information
`;

2. Performance Tuning

Response Time Optimization

const performanceOptimization = {
  // Page load optimization
  pageLoad: {
    timeout: 30000,
    waitUntil: "networkidle2",
    blockResources: ["image", "font", "media"]
  },
  // Agent response optimization
  agentOptimization: {
    maxTokens: 2048,
    temperature: 0.1,
    caching: true
  }
};

Real-World Implementation Examples

1. E-Commerce Monitoring System

// Comprehensive monitoring running daily
const ecommerceMonitoring = async () => {
  const tasks = [
    {
      name: "inventory-check",
      description: `
        Check the inventory status of key products:
        1. Generate a list of low-stock products (10 units or fewer)
        2. Analyze the inventory turnover rate for bestsellers
        3. Check the delivery delay status by supplier
        4. Create a prioritized list of products that need to be reordered
      `,
      schedule: "0 8 * * *" // Daily at 8 AM
    },
    {
      name: "competitor-pricing",
      description: `
        Competitor price monitoring:
        1. Collect prices for the same products from 3 major competitors
        2. Comparative analysis against our prices
        3. Analyze price change patterns
        4. Suggest price adjustment recommendations
      `,
      schedule: "0 10 * * *" // Daily at 10 AM
    }
  ];

  // Parallel execution
  const results = await Promise.all(
    tasks.map(task => nanobrowser.execute(task.description))
  );
  
  return results;
};

2. DevOps Automation Pipeline

const devopsAutomation = {
  // Incident response automation
  incidentResponse: `
    Automatic response when a system failure occurs:
    1. Identify the failure situation from the monitoring dashboard
    2. Estimate the number of affected services and users
    3. Search for resolutions from past similar incidents
    4. Send automatic notifications to relevant teams
    5. Apply temporary fixes and monitor status
  `,
  
  // Post-deployment validation
  deploymentValidation: `
    Automatic validation after a new version is deployed:
    1. Health check on key API endpoints
    2. Test user flow scenarios
    3. Monitor error rates and response times
    4. Compare metrics before and after deployment
    5. Trigger an automatic rollback if issues are found
  `,
  
  // Security audit
  securityAudit: `
    Weekly security check automation:
    1. Review dependency vulnerability scan results
    2. Detect anomalous patterns in access logs
    3. Check for upcoming SSL certificate expirations
    4. Inspect security policy compliance status
    5. Assess the risk level of discovered issues
  `
};

Future Directions

1. AI Agent Evolution

const futureCapabilities = {
  // Self-learning agents
  selfLearning: {
    description: "Improve performance by learning from past task success and failure patterns",
    implementation: "Reinforcement learning-based optimization"
  },
  
  // Multimodal processing
  multimodal: {
    description: "Comprehensive agents that handle images, video, and audio",
    useCases: ["Video content analysis", "Image-based quality inspection"]
  },
  
  // Natural language workflows
  naturalLanguage: {
    description: "Implement complex business logic using everyday language",
    example: "If monthly revenue drops by 10% compared to the previous month, increase the marketing budget by 20%"
  }
};

2. Integration Ecosystem

const integrationEcosystem = {
  // Enterprise tool integrations
  enterprise: [
    "Salesforce", "SAP", "Oracle", "Microsoft Dynamics",
    "Workday", "ServiceNow", "Jira", "Confluence"
  ],
  
  // Developer tool integrations
  developer: [
    "GitHub", "GitLab", "Jenkins", "Docker", "Kubernetes",
    "Datadog", "New Relic", "PagerDuty", "Splunk"
  ],
  
  // Business intelligence integrations
  bi: [
    "Tableau", "Power BI", "Looker", "Qlik",
    "Snowflake", "BigQuery", "Redshift", "Databricks"
  ]
};

Conclusion

Nanobrowser is evolving beyond a simple web automation tool into a comprehensive agentic ops platform. Through the collaboration of a multi-agent system, complex business workflows can be automated, and various LLM models can be leveraged to optimize performance and cost.

In particular, automating repetitive and time-consuming tasks across diverse areas such as DevOps, data pipelines, security operations, customer support, and marketing can significantly boost team productivity.

As an open-source project, it continues to evolve through community contributions, and customization to meet specific enterprise requirements is also possible.

If you want to experience the new paradigm of agentic ops, start with nanobrowser!

References

참고