Apify Autoplans - AI Web Scraper Assistant

AI-powered VS Code extension for learning and creating Apify scrapers with Browser Use integration

An intelligent VS Code extension that combines local browser automation with a metered AI backend to help you learn website structures and generate Apify Actor code automatically.

🚀 Features

• 💬 Chat Participant: Talk to @apify in GitHub Copilot Chat for natural conversation
• 🤖 AI-Powered Agent: Intelligent agent with Browser Use integration for website analysis
• 🌐 Local Browser Automation: Run browser automation locally for login-required websites
• 📊 Metered Usage: Proxy backend with OpenRouter integration and usage tracking
• 💡 Smart Learning: Analyze websites to understand structure and generate scrapers
• 🔧 Apify Integration: Generate complete Apify Actor code with best practices
• 💰 Billing Support: Built-in credit system for usage metering

🏗️ Architecture

VS Code Extension (User's Machine)
  ├── Browser Use (Local) - Handles browser automation
  └── Commands & UI
       └── Sends tasks to → Proxy Backend

Proxy Backend Server (Your Server)
  ├── Express API
  ├── LangChain Agent
  ├── Usage Tracking & Billing
  └── OpenRouter Integration (Your API Key)
       └── LLM Calls

OpenRouter API
  └── Multiple LLM Providers

Key Benefits of This Architecture

1. API Key Security: Your OpenRouter key stays on the backend, never exposed to users
2. Usage Control: Track and meter user requests for billing
3. Local Browser Access: Browser runs locally, so users can handle login/cookies
4. Centralized Management: Update models and logic without updating extensions

📦 Installation

Prerequisites

• Node.js 20+
• pnpm (recommended) or npm
• VS Code 1.80+
• OpenRouter API key

Step 1: Install Backend Dependencies

cd packages/apify-autoplans/backend
pnpm install

Step 2: Configure Backend

cp .env.example .env
# Edit .env and add your OpenRouter API key

OPENROUTER_API_KEY=your_key_here
PORT=3000
DEFAULT_MODEL=openai/gpt-4-turbo-preview

Step 3: Start Backend Server

# Development mode with auto-reload
pnpm dev

# Production mode
pnpm build
pnpm start

Step 4: Install Extension Dependencies

cd ../  # Back to apify-autoplans directory
pnpm install

Step 5: Build Extension

pnpm build

Step 6: Install in VS Code

1. Press F5 to launch extension development host, OR
2. Package and install:

pnpm package
# This creates apify-autoplans-vscode-0.1.0.vsix
# Install via: code --install-extension apify-autoplans-vscode-0.1.0.vsix

🎯 Usage

Method 1: Chat Participant (Recommended)

Open GitHub Copilot Chat (Ctrl+Alt+I) and chat with @apify:

@apify scrape https://example.com and extract product titles
@apify learn from https://github.com/trending how to extract repo names
@apify create a scraper for https://news.ycombinator.com
@apify /help

📖 Full Chat Guide - Learn all chat commands and features

Method 2: Command Palette

Open command palette (Ctrl+Shift+P) and use traditional commands:

Initial Setup

1. Set API Key: Open command palette (Ctrl+Shift+P) and run:

   Apify Autoplans: Set API Key
   

2. Configure Backend (if not using localhost:3000):

   Apify Autoplans: Set Proxy Backend Endpoint
   

3. Check Status:

   Apify Autoplans: Show Status
   

Running the Agent

Basic Agent Execution

Command: Apify Autoplans: Run Agent with Browser Use

Example prompts:

• "Learn how to scrape product listings from Amazon"
• "Analyze the structure of Hacker News and suggest selectors"
• "Help me extract job postings from Indeed.com"

The agent will:

1. Launch a local browser
2. Navigate to the website
3. Extract structure and observations
4. Send to AI for analysis
5. Return recommendations and code

Create Apify Scraper

Command: Apify Autoplans: Create Apify Scraper

This will:

• Ask for scraper name
• Ask for target URL
• Analyze the website
• Generate complete Apify Actor code
• Save to workspace

Learn from Website

Command: Apify Autoplans: Learn from Website

Interactive learning mode:

• Enter website URL
• Specify what to learn
• Get detailed analysis

Example Workflow

1. Open VS Code in your project folder
2. Run: "Apify Autoplans: Create Apify Scraper"
3. Name: "amazon-product-scraper"
4. URL: "https://www.amazon.com/s?k=laptops"
5. Wait for agent to analyze and generate code
6. Review generated Actor code in workspace
7. Deploy to Apify platform

🔧 Backend API Reference

Endpoints

GET /api/health

Health check endpoint.

Response:

{
  "status": "ok",
  "timestamp": "2024-01-01T00:00:00.000Z",
  "service": "Apify Autoplans Proxy",
  "version": "0.1.0"
}

POST /api/run-agent

Execute agent task with optional browser observations.

Headers:

• Authorization: Bearer <api_key>
• Content-Type: application/json

Request:

{
  "instruction": "Analyze this website and create a scraper",
  "observations": {
    "url": "https://example.com",
    "selectors": {...},
    "htmlStructure": "..."
  }
}

Response:

{
  "success": true,
  "data": {
    "result": "AI-generated response",
    "analysis": "...",
    "recommendations": []
  },
  "usage": {
    "tokens": 1234,
    "cost": 0.1234,
    "duration": 3500,
    "creditsRemaining": 998.8766
  }
}

GET /api/usage

Get current user usage statistics.

Headers:

• Authorization: Bearer <api_key>

Response:

{
  "success": true,
  "data": {
    "remaining": 998.8766,
    "used": 1.1234,
    "requestCount": 5,
    "lastRequest": "2024-01-01T00:00:00.000Z"
  }
}

💰 Billing & Usage

Credit System

• New users start with 1000 credits (configurable)
• Each agent request costs credits based on:
  • Tokens used
  • Model selected
  • Complexity of task

Pricing Example

With default settings:

• ~$0.0001 per token
• Average request: 500-2000 tokens
• Cost per request: $0.05 - $0.20

Tracking Usage

Users can check their usage via:

1. Extension command: "Apify Autoplans: Show Status"
2. Backend API: GET /api/usage

🔐 Security Considerations

API Key Management

✅ DO:

• Store API keys in VS Code secrets storage
• Use environment variables for backend
• Implement rate limiting
• Validate API keys server-side

❌ DON'T:

• Embed API keys in extension code
• Commit keys to version control
• Share keys between users

Best Practices

1. HTTPS Only: Always use HTTPS for production backend
2. Authentication: Implement proper user authentication
3. Rate Limiting: Prevent abuse with rate limits
4. Input Validation: Sanitize all user inputs
5. Error Handling: Don't expose sensitive error details

🛠️ Development

Project Structure

apify-autoplans/
├── src/                    # Extension source
│   ├── extension.ts       # Main entry point
│   ├── agent/            # Browser Use agent
│   └── lib/              # Utilities
├── backend/              # Proxy server
│   └── src/
│       └── server.ts     # Express server
├── media/                # Icons and assets
└── package.json         # Extension manifest

Building

# Build extension
pnpm build

# Build backend
cd backend && pnpm build

# Watch mode (auto-rebuild)
pnpm watch

Testing

# Launch extension in debug mode
# Press F5 in VS Code

# Test backend
curl https://autoplans.dev/api/health

🚀 Deployment

Backend Deployment Options

1. Heroku

   heroku create apify-autoplans-backend
   heroku config:set OPENROUTER_API_KEY=your_key
   git push heroku main
   

2. Vercel

   vercel --prod
   

3. AWS/GCP/Azure

   • Deploy as containerized app
   • Use managed services (App Service, Cloud Run, etc.)

4. Docker

   docker build -t apify-autoplans-backend ./backend
   docker run -p 3000:3000 -e OPENROUTER_API_KEY=key apify-autoplans-backend
   

Extension Distribution

1. VS Code Marketplace

   • Package: pnpm package
   • Publish: vsce publish

2. Private Distribution

   • Share .vsix file
   • Users install: code --install-extension *.vsix

📝 Configuration

Extension Settings

Available in VS Code settings:

• apifyAutoplans.proxyEndpoint: Backend server URL
• apifyAutoplans.enableDebugLogs: Enable debug logging

Backend Environment Variables

PORT=3000                              # Server port
OPENROUTER_API_KEY=sk-...            # Your OpenRouter key
DEFAULT_MODEL=openai/gpt-4-turbo     # LLM model
RATE_LIMIT_RPM=20                    # Requests per minute
COST_PER_TOKEN=0.0001                # Pricing

🤝 Contributing

Contributions welcome! Please:

1. Fork the repository
2. Create feature branch
3. Make your changes
4. Add tests if applicable
5. Submit pull request

📄 License

MIT License - see LICENSE file for details

🆘 Support

Troubleshooting

Backend not connecting:

• Check if server is running: curl https://autoplans.dev/api/health
• Verify proxy endpoint in settings
• Check firewall/network settings

Authentication errors:

• Verify API key is set in extension
• Check OpenRouter key is valid
• Ensure backend has correct environment variables

Browser automation issues:

• Browser-use library needs to be properly installed
• Check system dependencies for browser automation
• Review logs in Output panel

Getting Help

• 📧 Email: support@autoplans.dev
• 🐛 Issues: GitHub Issues
• 💬 Discussions: GitHub Discussions

🗺️ Roadmap

• [ ] Real Browser-Use integration (currently mocked)
• [ ] Support for multiple OpenRouter keys (rotation)
• [ ] Advanced scraper templates
• [ ] Visual scraper builder UI
• [ ] Integration with Apify Console API
• [ ] Scraper testing and validation
• [ ] Export to multiple formats (Python, Node.js, etc.)
• [ ] Team collaboration features
• [ ] Usage analytics dashboard

📚 Resources

• OpenRouter Documentation
• LangChain Documentation
• Apify Documentation
• VS Code Extension API
• Browser-Use Library

---

Made with ❤️ by the Autoplans.dev team