### Install Dependencies

Source: https://github.com/antonis19/autobrowse/blob/main/browser-console/README.md

Install the necessary project dependencies using npm.

```bash
npm install
```

--------------------------------

### Install Dependencies

Source: https://github.com/antonis19/autobrowse/blob/main/README.md

Install project dependencies using pip.

```bash
pip install -r requirements.txt
```

--------------------------------

### Run Browser Controller

Source: https://github.com/antonis19/autobrowse/blob/main/browser-console/README.md

Start the browser controller application using Node.js.

```bash
node console.js
```

--------------------------------

### AutoBrowse.ask_planner Example

Source: https://context7.com/antonis19/autobrowse/llms.txt

This example shows how to use the `ask_planner` method to submit a task to AutoBrowse. The agent will then autonomously perform the necessary steps, and the method returns the Puppeteer.js code that was executed.

```APIDOC
## AutoBrowse.ask_planner

The top-level method for giving AutoBrowse a task. Triggers the planner agent, which autonomously calls `ask_html_assistant` and `ask_code_generator` as needed. Returns all Puppeteer.js code that was successfully executed during the session.

```python
from autobrowse import AutoBrowse
import agent_config

ab = AutoBrowse(config=agent_config.config)

# Task: search Craigslist and click the first result
code_executed = ab.ask_planner(
    "Go to Craigslist and search for Nintendo DS. Click on the first result."
)

print(code_executed)
# Example output:
# await page.goto('https://www.craigslist.org', { waitUntil: 'networkidle0' });
# await page.click('#search-bar');
# await page.type('#search-bar', 'Nintendo DS');
# await page.keyboard.press('Enter');
# await page.waitForSelector('.result-title');
# await page.click('.result-title');
```
```

--------------------------------

### Start Browser Console WebSocket Server

Source: https://context7.com/antonis19/autobrowse/llms.txt

Launch the Node.js WebSocket server that bridges Python agents with a Puppeteer browser. Ensure Node.js 18+ is installed. This server handles code execution and HTML fetching.

```bash
# Start the browser console (requires Node.js 18)
cd browser-console
npm install
node console.js
```

--------------------------------

### Install and Use Node.js Version 18 with NVM

Source: https://github.com/antonis19/autobrowse/blob/main/browser-console/README.md

Install Node.js version 18 and set it as the current version using Node Version Manager (nvm).

```bash
nvm install 18 && nvm use
```

--------------------------------

### Run AutoBrowse

Source: https://github.com/antonis19/autobrowse/blob/main/README.md

Execute the AutoBrowse script to start the AI agent. You will be prompted to provide a task.

```bash
python autobrowse.py
```

--------------------------------

### Check Node.js Version

Source: https://github.com/antonis19/autobrowse/blob/main/browser-console/README.md

Verify your current Node.js installation version. Requires Node.js version 18.

```bash
node -v
```

--------------------------------

### AutoBrowse.ask_html_assistant Example

Source: https://context7.com/antonis19/autobrowse/llms.txt

Use `ask_html_assistant` to query the HTML assistant agent about the current page's DOM. It retrieves relevant HTML fragments by fetching the live HTML, chunking it, and performing a similarity search.

```APIDOC
## AutoBrowse.ask_html_assistant

Asks the HTML assistant agent a question about the current page's DOM. The agent fetches the live HTML from the browser, chunks it by token count, uses FAISS similarity search to find the most relevant chunk, and answers via GPT-3.5-turbo-16k.

```python
from autobrowse import AutoBrowse
import agent_config

ab = AutoBrowse(config=agent_config.config)

# Get the relevant HTML fragment for a login form
html_fragment = ab.ask_html_assistant(
    "What is the HTML for the sign-in form on this page?"
)

print(html_fragment)
# Example output:
# <form id="login-form" method="POST">
#   <input type="email" name="email" placeholder="Email" />
#   <input type="password" name="password" placeholder="Password" />
#   <button type="submit">Sign In</button>
# </form>
```
```

--------------------------------

### AutoBrowse.__init__ with Custom Configuration

Source: https://context7.com/antonis19/autobrowse/llms.txt

Demonstrates initializing the AutoBrowse class with a custom configuration object. This allows overriding default models, system prompts, and reply limits for the internal agents.

```APIDOC
## AutoBrowse.__init__

Constructs the agent system. Reads model configs from the `OAI_CONFIG_LIST` JSON file and initializes the HTML assistant, code generator, and planner with their respective system prompts and models.

```python
from autobrowse import AutoBrowse

# Custom config — override models, system prompts, and reply limits
custom_config = {
    "html_assistant": {
        "model": "gpt-3.5-turbo-16k",
        "system_message": "You are a helpful AI Assistant. Answer questions about HTML only."
    },
    "code_generator": {
        "model": "gpt-4",
        "system_message": "You are a Javascript engineer generating puppeteer.js code."
    },
    "code_generator_user_proxy": {
        "max_consecutive_auto_reply": 3
    },
    "planner": {
        "model": "gpt-4",
        "system_message": "You are a planner coordinating HTML and code agents to fulfill web tasks."
    },
    "planner_user_proxy": {
        "max_consecutive_auto_reply": 35
    }
}

# OAI_CONFIG_LIST file must exist in current directory:
# [
#   {"model": "gpt-4", "api_key": "sk-..."},
#   {"model": "gpt-3.5-turbo-16k", "api_key": "sk-..."}
# ]

ab = AutoBrowse(config=custom_config, browser_console_uri="ws://localhost:3000")
```
```

--------------------------------

### Initialize AutoBrowse with Custom Configuration

Source: https://context7.com/antonis19/autobrowse/llms.txt

Constructs the AutoBrowse agent system with custom configurations for models, system prompts, and reply limits. Ensure the OAI_CONFIG_LIST JSON file exists.

```python
from autobrowse import AutoBrowse

# Custom config — override models, system prompts, and reply limits
custom_config = {
    "html_assistant": {
        "model": "gpt-3.5-turbo-16k",
        "system_message": "You are a helpful AI Assistant. Answer questions about HTML only."
    },
    "code_generator": {
        "model": "gpt-4",
        "system_message": "You are a Javascript engineer generating puppeteer.js code."
    },
    "code_generator_user_proxy": {
        "max_consecutive_auto_reply": 3
    },
    "planner": {
        "model": "gpt-4",
        "system_message": "You are a planner coordinating HTML and code agents to fulfill web tasks."
    },
    "planner_user_proxy": {
        "max_consecutive_auto_reply": 35
    }
}

# OAI_CONFIG_LIST file must exist in current directory:
# [
#   {"model": "gpt-4", "api_key": "sk-..."},
#   {"model": "gpt-3.5-turbo-16k", "api_key": "sk-..."}
# ]

ab = AutoBrowse(config=custom_config, browser_console_uri="ws://localhost:3000")
```

--------------------------------

### Activate Python Environment

Source: https://github.com/antonis19/autobrowse/blob/main/README.md

Activate the previously created Python 3.9 environment.

```bash
conda activate py39
```

--------------------------------

### Configure OpenAI API Key

Source: https://github.com/antonis19/autobrowse/blob/main/README.md

Create an OAI_CONFIG_LIST file with your OpenAI API key for different models.

```json
[
    {
        "model": "gpt-4",
        "api_key": "<your-api-key>"
    },
    {
        "model": "gpt-3.5-turbo",
        "api_key": "<your-api-key>"
    },
    {
        "model": "gpt-3.5-turbo-16k",
        "api_key": "<your-api-key>"
    }
]
```

--------------------------------

### Initialize RetrieveHTMLProxyAgent for Context-Aware Chat

Source: https://context7.com/antonis19/autobrowse/llms.txt

Set up a RetrieveHTMLProxyAgent to automatically fetch and inject live HTML context into prompts for an HTML assistant. This agent uses RAG for relevant chunk retrieval.

```python
from retrieve_html_proxy_agent import RetrieveHTMLProxyAgent
import autogen

config_list = autogen.config_list_from_json("OAI_CONFIG_LIST", file_location=".")

html_assistant = autogen.AssistantAgent(
    name="html_assistant",
    llm_config={"config_list": config_list},
    system_message="Answer questions about HTML only."
)

html_proxy = RetrieveHTMLProxyAgent(
    name="html_user_proxy",
    human_input_mode="NEVER",
    max_consecutive_auto_reply=0,
    browser_console_uri="ws://localhost:3000"
)

# Ask a question — proxy auto-fetches HTML, runs RAG, injects context into prompt
html_proxy.initiate_chat(html_assistant, message="Where is the checkout button?")
```

--------------------------------

### AutoBrowse Class Initialization and Task Submission

Source: https://context7.com/antonis19/autobrowse/llms.txt

Initialize AutoBrowse with default or custom configurations and submit a high-level browsing task to the planner agent. The method returns all executed Puppeteer.js code.

```APIDOC
## AutoBrowse Class

`AutoBrowse` is the main entry point. It initializes all three agents and wires them together. The `ask_planner()` method is the primary interface for submitting tasks.

```python
import agent_config
from autobrowse import AutoBrowse

# Initialize AutoBrowse with the default config and a local browser console
autobrowse = AutoBrowse(
    config=agent_config.config,
    browser_console_uri="ws://localhost:3000"  # default
)

# Submit a task — the agent will plan, browse, and complete it autonomously
final_code = autobrowse.ask_planner(
    "Go to booking.com and find a hotel for 2 people in Madrid "
    "for 2 nights starting 2 November for under 200 EUR per night."
)

print("Puppeteer.js code that was executed:")
print(final_code)
# Output: all puppeteer.js code blocks run during the task, joined by newlines
```
```

--------------------------------

### Interactive Puppeteer REPL

Source: https://context7.com/antonis19/autobrowse/llms.txt

Provides an interactive command-line interface for sending commands to a browser controlled by Puppeteer. Useful for testing and debugging browser interactions.

```bash
# run_puppeteer_test.py — interactive REPL for sending Puppeteer commands
python run_puppeteer_test.py
# Enter a command to send to the browser: await page.goto('https://google.com', { waitUntil: 'networkidle0' });
# Response data = {'success': True, 'result': None}
```

--------------------------------

### Initialize and Use AutoBrowse for Tasks

Source: https://context7.com/antonis19/autobrowse/llms.txt

Initializes AutoBrowse with default configurations and submits a high-level browsing task. The method returns the executed Puppeteer.js code.

```python
import agent_config
from autobrowse import AutoBrowse

# Initialize AutoBrowse with the default config and a local browser console
autobrowse = AutoBrowse(
    config=agent_config.config,
    browser_console_uri="ws://localhost:3000"  # default
)

# Submit a task — the agent will plan, browse, and complete it autonomously
final_code = autobrowse.ask_planner(
    "Go to booking.com and find a hotel for 2 people in Madrid "
    "for 2 nights starting 2 November for under 200 EUR per night."
)

print("Puppeteer.js code that was executed:")
print(final_code)
# Output: all puppeteer.js code blocks run during the task, joined by newlines
```

--------------------------------

### Create Python 3.9 Environment

Source: https://github.com/antonis19/autobrowse/blob/main/README.md

Use conda to create a new Python 3.9 environment for the project.

```bash
conda create --name py39 python=3.9
```

--------------------------------

### Fetch HTML using WebSockets

Source: https://context7.com/antonis19/autobrowse/llms.txt

Fetches the current page's HTML content via a WebSocket connection. Requires a running WebSocket server at the specified URI.

```python
import asyncio, json, websockets

async def fetch_html(websocket) -> str:
    await websocket.send(json.dumps({'action': "fetchHTML"}))
    response_data = json.loads(await websocket.recv())
    if not response_data.get('success'):
        raise Exception("Failed to fetch HTML")
    return response_data["result"]

uri = "ws://localhost:3000"
websocket = asyncio.get_event_loop().run_until_complete(websockets.connect(uri))
dom = asyncio.get_event_loop().run_until_complete(fetch_html(websocket))
print(dom)  # Prints cleaned HTML of whatever page is currently open
```

--------------------------------

### Count Tokens in File (CLI)

Source: https://context7.com/antonis19/autobrowse/llms.txt

Command-line interface for counting tokens in a specified file using the `token_count.py` script. Provides a quick way to assess file size in terms of tokens.

```bash
# CLI usage — count tokens in a file
python token_count.py mypage.html
# Token count is 8432
```

--------------------------------

### Initialize BrowserProxyAgent for Code Execution

Source: https://context7.com/antonis19/autobrowse/llms.txt

Configure and initialize a BrowserProxyAgent to intercept and route JavaScript code blocks to a Puppeteer browser via WebSocket. Python and Bash code are executed normally.

```python
from browser_proxy_agent import BrowserProxyAgent

proxy = BrowserProxyAgent(
    name="code_generator_user_proxy",
    human_input_mode="NEVER",
    max_consecutive_auto_reply=3,
    code_execution_config={"work_dir": "code_execution"},
    browser_console_uri="ws://localhost:3000"
)
```

--------------------------------

### Execute Code Request Format

Source: https://github.com/antonis19/autobrowse/blob/main/browser-console/README.md

Use this JSON format to send code to the browser controller for execution.

```json
{
    "action": "executeCode",
    "code" : "<code-to-execute>",
}
```

--------------------------------

### Query HTML Assistant for DOM Information

Source: https://context7.com/antonis19/autobrowse/llms.txt

Asks the HTML assistant agent a question about the current page's DOM. The agent retrieves live HTML, finds the most relevant chunk using FAISS, and answers using GPT-3.5-turbo-16k.

```python
from autobrowse import AutoBrowse
import agent_config

ab = AutoBrowse(config=agent_config.config)

# Get the relevant HTML fragment for a login form
html_fragment = ab.ask_html_assistant(
    "What is the HTML for the sign-in form on this page?"
)

print(html_fragment)
# Example output:
# <form id="login-form" method="POST">
#   <input type="email" name="email" placeholder="Email" />
#   <input type="password" name="password" placeholder="Password" />
#   <button type="submit">Sign In</button>
# </form>
```

--------------------------------

### Fetch HTML Request Format

Source: https://github.com/antonis19/autobrowse/blob/main/browser-console/README.md

Use this JSON format to request the rendered HTML of the current page from the browser controller.

```json
{
    "action": "fetchHTML",
}
```

--------------------------------

### Generate Code with HTML Context using AutoBrowse

Source: https://context7.com/antonis19/autobrowse/llms.txt

Use AutoBrowse to generate and execute code, optionally providing HTML context from the HTML assistant. This method automatically appends previously executed code to maintain browser state.

```python
from autobrowse import AutoBrowse
import agent_config

ab = AutoBrowse(config=agent_config.config)

# First, retrieve relevant HTML for context
html_context = ab.ask_html_assistant(
    "What is the HTML for the email and password fields on the sign-up page?"
)

# Then ask the code generator to fill in the form using that HTML context
result = ab.ask_code_generator(
    message="Fill in the sign-up form with email 'user@example.com' and password 'C0mplexPassword!'",
    context_html=html_context
)

print(result)
```

--------------------------------

### Submit Task to AutoBrowse Planner

Source: https://context7.com/antonis19/autobrowse/llms.txt

The primary interface for submitting tasks to AutoBrowse. This method triggers the planner agent to autonomously execute the task and returns all executed Puppeteer.js code.

```python
from autobrowse import AutoBrowse
import agent_config

ab = AutoBrowse(config=agent_config.config)

# Task: search Craigslist and click the first result
code_executed = ab.ask_planner(
    "Go to Craigslist and search for Nintendo DS. Click on the first result."
)

print(code_executed)
# Example output:
# await page.goto('https://www.craigslist.org', { waitUntil: 'networkidle0' });
# await page.click('#search-bar');
# await page.type('#search-bar', 'Nintendo DS');
# await page.keyboard.press('Enter');
# await page.waitForSelector('.result-title');
# await page.click('.result-title');
```

--------------------------------

### RetrieveHTMLProxyAgent

Source: https://context7.com/antonis19/autobrowse/llms.txt

A custom `autogen.ConversableAgent` that enriches every message to the HTML assistant with live page HTML context. On each `send()`, it fetches the current page HTML from the browser via WebSocket, chunks it into 15,000-token segments, builds a FAISS vector store, retrieves the most relevant chunk via similarity search, and injects it into the prompt using a RAG template.

```APIDOC
## RetrieveHTMLProxyAgent

### Description
A custom `autogen.ConversableAgent` that enriches every message to the HTML assistant with live page HTML context. On each `send()`, it fetches the current page HTML from the browser via WebSocket, chunks it into 15,000-token segments, builds a FAISS vector store, retrieves the most relevant chunk via similarity search, and injects it into the prompt using a RAG template.

### Initialization
```python
from retrieve_html_proxy_agent import RetrieveHTMLProxyAgent
import autogen

config_list = autogen.config_list_from_json("OAI_CONFIG_LIST", file_location=".")

html_assistant = autogen.AssistantAgent(
    name="html_assistant",
    llm_config={"config_list": config_list},
    system_message="Answer questions about HTML only."
)

html_proxy = RetrieveHTMLProxyAgent(
    name="html_user_proxy",
    human_input_mode="NEVER",
    max_consecutive_auto_reply=0,
    browser_console_uri="ws://localhost:3000"
)
```

### Usage
```python
# Ask a question — proxy auto-fetches HTML, runs RAG, injects context into prompt
html_proxy.initiate_chat(html_assistant, message="Where is the checkout button?")
# The agent sees: "You're a retrieve augmented chatbot. ... Context is: <relevant HTML chunk>"
```
```

--------------------------------

### Browser Console WebSocket Server

Source: https://context7.com/antonis19/autobrowse/llms.txt

The `browser-console/console.js` Node.js server acts as a bridge between Python agents and a real browser using Puppeteer. It exposes a WebSocket server on port 3000 with actions to execute JavaScript code and fetch HTML.

```APIDOC
## Browser Console WebSocket Server

### Description
The `browser-console/console.js` Node.js server is the bridge between the Python agents and the real browser. It runs a Puppeteer browser instance and exposes a WebSocket server on port 3000 with two actions: `executeCode` (runs arbitrary JS in a sandboxed VM with `page` and `browser` in scope) and `fetchHTML` (returns cleaned, attribute-stripped HTML of the current page).

### Starting the Server
```bash
# Start the browser console (requires Node.js 18)
cd browser-console
npm install
node console.js
# Output: WebSocket Server is running on port 3000
```

### WebSocket Message Format
```javascript
// WebSocket message format — execute Puppeteer code
const ws = new WebSocket('ws://localhost:3000');

// Execute code in the browser
ws.send(JSON.stringify({
  action: "executeCode",
  code: "await page.goto('https://example.com', { waitUntil: 'networkidle0' });"
}));
// Response: { "success": true, "result": null }
// Error:    { "success": false, "error": "TimeoutError: Navigation timeout" }

// Fetch cleaned HTML of the current page
ws.send(JSON.stringify({ action: "fetchHTML" }));
// Response: { "success": true, "result": "<html>...(cleaned HTML)...</html>" }
// Cleaned HTML has script/style/img/svg/meta tags removed,
// and only allowed attributes (id, name, type, class, href, etc.) are retained.
```
```

--------------------------------

### AutoBrowse.ask_code_generator

Source: https://context7.com/antonis19/autobrowse/llms.txt

Sends a code generation request to the code generator agent. It can optionally be augmented with HTML context retrieved by the HTML assistant and automatically appends previously executed code to maintain browser state continuity. Returns the execution result or error.

```APIDOC
## AutoBrowse.ask_code_generator

### Description
Sends a code generation request to the code generator agent, optionally augmented with HTML context retrieved by the HTML assistant. Automatically appends previously executed code so the generator can maintain browser state continuity. Returns the execution result or error.

### Method Signature
```python
ab.ask_code_generator(message: str, context_html: str = None)
```

### Parameters
- **message** (str) - Required - The prompt for the code generator.
- **context_html** (str) - Optional - HTML content to provide context to the code generator.

### Request Example
```python
from autobrowse import AutoBrowse
import agent_config

ab = AutoBrowse(config=agent_config.config)

# First, retrieve relevant HTML for context
html_context = ab.ask_html_assistant(
    "What is the HTML for the email and password fields on the sign-up page?"
)

# Then ask the code generator to fill in the form using that HTML context
result = ab.ask_code_generator(
    message="Fill in the sign-up form with email 'user@example.com' and password 'C0mplexPassword!'",
    context_html=html_context
)

print(result)
```

### Response Example
```
# Success output:
# Code execution successful. The following code was executed:
# await page.click('input[name="email"]');
# await page.type('input[name="email"]', 'user@example.com');
# await page.click('input[name="password"]');
# await page.type('input[name="password"]', 'C0mplexPassword!');
# await page.click('button[type="submit"]');

# Failure output:
# Code execution failed. Code execution:
# await page.click('#email-field');
# Error message:
# Node is either not clickable or not an Element
```
```

--------------------------------

### Interact with Browser Console via WebSocket

Source: https://context7.com/antonis19/autobrowse/llms.txt

Send JSON messages to the browser console WebSocket server to execute JavaScript code or fetch the current page's cleaned HTML. The server provides success or error responses.

```javascript
// WebSocket message format — execute Puppeteer code
const ws = new WebSocket('ws://localhost:3000');

// Execute code in the browser
ws.send(JSON.stringify({
  action: "executeCode",
  code: "await page.goto('https://example.com', { waitUntil: 'networkidle0' });"
}));
// Response: { "success": true, "result": null }
// Error:    { "success": false, "error": "TimeoutError: Navigation timeout" }

// Fetch cleaned HTML of the current page
ws.send(JSON.stringify({ action: "fetchHTML" }));
// Response: { "success": true, "result": "<html>...(cleaned HTML)...</html>" }
// Cleaned HTML has script/style/img/svg/meta tags removed,
// and only allowed attributes (id, name, type, class, href, etc.) are retained.
```

--------------------------------

### Count Tokens in String

Source: https://context7.com/antonis19/autobrowse/llms.txt

Calculates the number of tokens in a given string using OpenAI's tiktoken encoding. Useful for determining if text needs to be chunked before processing.

```python
from token_count import num_tokens_from_string

html = "<html><body><h1>Hello World</h1></body></html>"
count = num_tokens_from_string(html)
print(count)  # 14

# Also works for any text
count = num_tokens_from_string("The quick brown fox", encoding_name="cl100k_base")
print(count)  # 4
```

--------------------------------

### BrowserProxyAgent

Source: https://context7.com/antonis19/autobrowse/llms.txt

A custom `autogen.ConversableAgent` subclass that intercepts code block execution from the code generator and routes JavaScript blocks to the Puppeteer browser over WebSocket instead of running them locally. Python and Bash blocks are still executed normally.

```APIDOC
## BrowserProxyAgent

### Description
A custom `autogen.ConversableAgent` subclass that intercepts code block execution from the code generator and routes JavaScript blocks to the Puppeteer browser over WebSocket instead of running them locally. Python and Bash blocks are still executed normally.

### Initialization
```python
from browser_proxy_agent import BrowserProxyAgent

proxy = BrowserProxyAgent(
    name="code_generator_user_proxy",
    human_input_mode="NEVER",
    max_consecutive_auto_reply=3,
    code_execution_config={"work_dir": "code_execution"},
    browser_console_uri="ws://localhost:3000"
)
```

### Internal Behavior
Internally calls `run_puppeteer_code` for JS blocks:
- **Sends**: `{"action": "executeCode", "code": "await page.goto('https://example.com')"}`
- **Receives**: `{"success": true, "result": null}`
- **Returns**: `(exitcode=0, logs='{"success": true, "result": null}')`
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.