lsustc

Posted on Nov 4

I built an open-source AI browser that automates web tasks with natural language

#ai #opensource #browser #nextjs

What is it?

AI Browser (Altas) is an open-source Electron app that lets you control a browser using plain English (or any language). Just describe what you want to do, and the AI figures out how to do it.

🌟 GitHub: https://github.com/DeepFundAI/ai-browser
🌐 Try download it: https://www.deepfundai.com/altas

Why I built this

As a developer, I got tired of:

Writing Puppeteer scripts for simple web scraping tasks
Manually checking websites for updates
Repeating the same browser workflows every day

I wanted something simpler: tell the AI what to do, and let it handle the details.

Current status: I'm actively job hunting and would love feedback from the community. If this project resonates with you, a ⭐️ on GitHub would mean a lot for my portfolio!

What it does

1. Natural Language Task Execution

Type something like:

"Collect the top 10 posts from Hacker News"
"Search for 'AI news' and summarize the results"
"Monitor this GitHub repo and notify me when stars increase"

The AI plans the steps and executes them automatically.

2. Visual Task Execution

Left side shows the AI's thought process and tool calls. Right side shows the live browser preview.

You can see exactly what the AI is doing at each step.

3. Scheduled Tasks

Set up recurring tasks to run at specific intervals.

Examples:

Scrape news every morning at 9 AM
Check crypto prices every hour
Monitor competitor websites daily

4. Task History

All executed tasks are saved with full logs and playback capability.

Tech Stack

Frontend: Next.js 15 + React 19 + Ant Design + Tailwind CSS
Desktop: Electron 33
AI Engine: @jarvis-agent (based on Eko framework)
State: Zustand
Storage: IndexedDB
Build: Vite + TypeScript

Architecture

┌─────────────────────────────────────────┐
│         Next.js UI Layer                │
│  ┌──────┐  ┌──────┐  ┌──────┐          │
│  │ Home │  │ Main │  │History│          │
│  └──────┘  └──────┘  └──────┘          │
└────────────────┬────────────────────────┘
                 │ IPC
┌────────────────▼────────────────────────┐
│      Electron Main Process              │
│  ┌────────────────────────────────┐    │
│  │   AI Agent (Eko Framework)     │    │
│  │  ┌────────┐    ┌────────┐      │    │
│  │  │Planner │───▶│Executor│      │    │
│  │  └────────┘    └────────┘      │    │
│  └────────────────────────────────┘    │
│  ┌────────────────────────────────┐    │
│  │    Browser Automation Tools    │    │
│  │  - Navigate - Click - Extract  │    │
│  └────────────────────────────────┘    │
└─────────────────────────────────────────┘

Supported AI Models

DeepSeek: deepseek-chat, deepseek-reasoner
Qwen: qwen-max, qwen-plus, qwen-vl-max
Google Gemini: gemini-1.5-flash, gemini-2.0-flash, gemini-1.5-pro
Anthropic Claude: claude-3.7-sonnet, claude-3.5-sonnet, claude-3-opus
OpenRouter: Aggregates multiple providers

Getting Started

Installation

# Clone the repo
git clone https://github.com/DeepFundAI/ai-browser.git
cd ai-browser

# Install dependencies
pnpm install

# Configure API keys
cp .env.template .env.local
# Edit .env.local with your API key (at least one provider)

# Build Electron dependencies
pnpm run build:deps

# Start development server
pnpm run next

# Start Electron app (in another terminal)
pnpm run electron

Building for Distribution

pnpm run build

Outputs:

macOS: .dmg installer
Windows: .exe installer

Use Cases

1. Web Scraping

Task: "Scrape the top 20 GitHub trending repositories today"

AI executes:

Navigate to GitHub trending page
Extract repo names, stars, descriptions
Save as JSON file

2. Monitoring

Scheduled task: "Check my website uptime every 30 minutes"

AI does:

Visit the website
Verify it loads successfully
Log the result
Alert if it fails

3. Data Collection

Task: "Visit these 10 URLs and extract all article titles"

AI handles:

Loop through each URL
Find article title elements
Compile results
Save to file

4. Automated Testing

Task: "Test the login flow on my staging site"

AI workflow:

Open login page
Enter test credentials
Click login button
Verify redirect to dashboard
Report success/failure

Key Features

MCP Protocol Integration

Uses Model Context Protocol for standardized AI-tool communication:

const tool = {
  name: "browser_navigate",
  description: "Navigate to a URL",
  parameters: {
    url: { type: "string", description: "Target URL" }
  }
}

Streaming Responses

Real-time updates via Server-Sent Events:

// API route returns SSE stream
const stream = new ReadableStream({
  async start(controller) {
    for await (const chunk of aiResponse) {
      controller.enqueue(encoder.encode(chunk))
    }
  }
})

Task Persistence

All tasks saved to IndexedDB with full-text search:

await taskStorage.save(task)
const results = await taskStorage.search("github")

Roadmap

Short-term (Next 1-2 months)

[ ] Agent Configuration: Customize agent prompts and MCP tools settings
[ ] Human Intervention: Allow manual control during sessions (e.g., handling login prompts)
[ ] Voice Input: Support voice commands for task input
[ ] More Agent Types: Add ShellAgent and other specialized agents

Long-term Vision

[ ] Plugin system for custom tools
[ ] Cloud sync for task history
[ ] Team collaboration features
[ ] Mobile app (iOS/Android)
[ ] Browser extension version
[ ] More AI model integrations

Credits

Special thanks to Eko for the powerful agent framework.

License

MIT License - free to use, modify, and commercialize

Why I'm Sharing This

If you find this project useful:

⭐️ Star the repo: https://github.com/DeepFundAI/ai-browser

- 💬 Share feedback: I'm actively improving this and would love to hear your thoughts

Author: lsustc
Tech Stack: Next.js 15 + Electron 33 + TypeScript + AI Agents
GitHub: https://github.com/DeepFundAI/ai-browser
Website: https://www.deepfundai.com/altas

Thanks for reading! Questions, feedback, and constructive criticism are all welcome in the comments. 🙏

DEV Community