Skip to content

Janlery/Auto-lab

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

5 Commits
 
 
 
 
 
 

Repository files navigation

Pixel Art AI Browser Agent

A powerful AI-powered browser automation userscript with a premium retro Macintosh-inspired UI. This tool enables you to automate web browsing tasks using natural language commands, powered by OpenAI-compatible APIs.

Features

AI-Powered Automation

  • Natural Language Commands: Simply describe what you want to do, and the AI will figure out how to accomplish it
  • Smart Element Detection: Automatically identifies interactive elements on any webpage including buttons, inputs, links, dropdowns, and rich text editors
  • Multi-step Task Execution: Handles complex workflows that span multiple pages and actions
  • Cross-page Navigation: Seamlessly continues tasks across page navigations and redirects

Supported Actions

  • Click: Click on buttons, links, and interactive elements
  • Type: Input text into fields, textareas, and rich text editors (contenteditable)
  • Scroll: Scroll the page by pixels or to specific elements
  • Wait: Wait for time intervals or specific elements to appear
  • Select: Choose options from dropdown menus
  • Hover: Trigger hover states on elements
  • Press: Simulate keyboard key presses
  • Navigate: Go to specific URLs
  • Clear: Clear input field contents

Premium UI Design

  • Retro Macintosh Plus Aesthetic: Beautiful pixel art design inspired by classic Macintosh computers
  • Cyberpunk Glow Effects: Modern neon breathing animations for a unique visual experience
  • Draggable Floating Button: Convenient mini-Mac icon that can be positioned anywhere on screen
  • Real-time Status Logs: Detailed, color-coded execution logs with timestamps
  • Collapsible Settings Panel: Easy configuration without cluttering the interface

Installation

Prerequisites

Steps

  1. Install a userscript manager extension for your browser
  2. Click on the userscript manager icon and select "Create a new script"
  3. Copy the entire contents of ai_browser_agent.user.js
  4. Paste into the editor and save
  5. The script will now run on all websites

Configuration

API Setup

  1. Click the floating Mac icon to open the control panel
  2. Click the "CONFIG" button to expand settings
  3. Configure the following:
Setting Description Example
API Endpoint Base URL for OpenAI-compatible API https://api.openai.com/v1
Model AI model to use gpt-4o, gpt-3.5-turbo, etc.
API Key Your API authentication key sk-...

Compatible APIs

This script works with any OpenAI-compatible API endpoint:

  • OpenAI API
  • Azure OpenAI
  • Local LLM servers (LM Studio, Ollama with OpenAI compatibility layer)
  • Third-party API proxies

Usage

Basic Usage

  1. Navigate to the webpage where you want to perform automation
  2. Click the floating Mac icon to open the panel
  3. Enter your task in natural language (e.g., "Search for 'machine learning' and click the first result")
  4. Click "EXECUTE" to start the automation

Example Tasks

Search for "artificial intelligence" on Google
Fill in the login form with username "test@example.com" and password "demo123", then click submit
Click the "Sign Up" button and fill in the registration form
Scroll down and find the contact section, then click the email link

Task Status Indicators

The floating Mac button shows real-time status:

  • Static lines: Idle, waiting for commands
  • Animated lines: Task in progress

Log Levels

The status area displays color-coded logs:

  • Green: Success messages
  • Blue: Action execution
  • Orange: Warnings
  • Red: Errors
  • Gray: Debug information

Technical Details

Element Detection

The script intelligently detects and catalogs interactive elements:

  • Publish/Submit buttons (for social media posting)
  • Search buttons and forms
  • Rich text editors (Quill, ProseMirror, TinyMCE, contenteditable)
  • File upload triggers
  • Standard form elements (inputs, textareas, selects)
  • Custom UI components (tabs, dropdowns, checkboxes)
  • Clickable elements with pointer cursor

Unique Selector Generation

Elements are identified using a priority-based selector strategy:

  1. Element ID
  2. Name attribute
  3. ARIA labels
  4. Data attributes
  5. Path-based selectors with classes and nth-child

Cross-Tab Coordination

  • Prevents multiple tabs from executing the same task simultaneously
  • Handles page navigation gracefully with task resumption
  • Implements lock-based coordination for multi-tab scenarios
  • Automatically intercepts window.open to keep navigation in the current tab

Permissions

The script requires the following Tampermonkey grants:

  • GM_setValue / GM_getValue: Store configuration and task state
  • GM_xmlhttpRequest: Make API calls to the AI service
  • GM_registerMenuCommand: Register menu commands (optional)

Troubleshooting

Common Issues

AI response parsing failed

  • Ensure your API endpoint is correct and includes the base path (e.g., /v1)
  • Verify your API key is valid
  • Check that the selected model is available on your API endpoint

Element not found

  • The page may have dynamic content that hasn't loaded yet
  • Try adding a wait step before the action
  • Some elements may be inside iframes (not currently supported)

Task doesn't continue after navigation

  • Ensure the script is installed and active on the target domain
  • Check browser console for any errors
  • The task timeout is 5 minutes - if exceeded, the task will reset

Debug Mode

Open your browser's developer console (F12) to see detailed logs prefixed with [AI Agent].

Limitations

  • Does not support interactions inside iframes
  • Cannot handle CAPTCHA or complex anti-bot measures
  • File upload selection requires manual user interaction
  • Some highly dynamic SPAs may have timing issues

Version History

  • v0.7: Current version with enhanced element detection, rich text editor support, and improved cross-page navigation
  • v0.6: Previous stable version

License

This project is provided as-is for personal and educational use.

Contributing

Contributions are welcome! Feel free to submit issues and pull requests.

Acknowledgments

  • UI design inspired by classic Macintosh Plus computers
  • Cyberpunk aesthetic elements for modern visual appeal
  • Built with vanilla JavaScript for maximum compatibility

About

A auto

Resources

Stars

0 stars

Watchers

0 watching

Forks

Releases

No releases published

Packages

 
 
 

Contributors