### Local Development Setup for Agent Browser

Source: https://github.com/aianytime/agent-browser/blob/main/_autodocs/README.md

Follow these steps to clone the repository, install dependencies for both frontend and backend, configure necessary environment variables like the OpenAI API key, and start the development server.

```bash
# Clone and install
git clone <repo>
cd agent-browser
npm install
cd backend && npm install && cd ..

# Configure
export OPENAI_API_KEY="sk-..."

# Run development server
npm run tauri dev
```

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

### Install and Run Development Server

Source: https://github.com/aianytime/agent-browser/blob/main/_autodocs/INDEX.md

Installs project dependencies, backend dependencies, sets the OpenAI API key, and starts the Tauri development server. Ensure you have Node.js and npm installed.

```bash
npm install
cd backend && npm install && cd ..
export OPENAI_API_KEY="sk-..."
npm run tauri dev
```

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

### Install Frontend and Backend Dependencies

Source: https://github.com/aianytime/agent-browser/blob/main/README.md

Install Node.js dependencies for both the frontend and backend. Navigate to the backend directory before installing its dependencies.

```bash
# Install frontend dependencies
npm install

# Install backend dependencies
cd backend
npm install
cd ..
```

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

### Ask Agent Example Request

Source: https://github.com/aianytime/agent-browser/blob/main/_autodocs/endpoints.md

Example of how to call the 'ask_agent' command with a specific prompt and await its response.

```typescript
const response = await window.__TAURI__.invoke('ask_agent', {
  prompt: 'What is this page about?'
});
```

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

### Click Button Example

Source: https://github.com/aianytime/agent-browser/blob/main/_autodocs/endpoints.md

Example of invoking `run_tool_and_wait` to click a button. This tool does not require an argument.

```typescript
// Click button
const result1 = await window.__TAURI__.invoke('run_tool_and_wait', {
  tool_name: 'click_button'
});
// Returns: "Clicked button successfully"
```

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

### Run Agent Command: JSON Output Example

Source: https://github.com/aianytime/agent-browser/blob/main/_autodocs/api-reference/ipc-architecture.md

Example of the JSON response structure returned to the frontend after the 'run_agent' command completes.

```json
{"result": "Thought: ...\n\nAction: ...\n\nFinal Answer: ..."}
```

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

### run_agent Example Response

Source: https://github.com/aianytime/agent-browser/blob/main/_autodocs/endpoints.md

Illustrates a typical response from the `run_agent` command, following the ReAct pattern (Thought, Action, Observation, Final Answer). This example shows the agent's internal reasoning process.

```text
Thought: The user wants me to find all prices on the page. I should use extract_prices tool.

Action: extract_prices()

Observation: Price extraction requested - waiting for frontend execution

Thought: The tool ran successfully. I need to wait for the frontend to execute this.

Final Answer: I've requested price extraction from the frontend. The frontend will search for prices in the format $XX.XX on the current page.
```

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

### Run Agent Command: JSON Input Example

Source: https://github.com/aianytime/agent-browser/blob/main/_autodocs/api-reference/ipc-architecture.md

Example of the JSON payload expected for the 'run_agent' command, containing prompt and URL.

```json
{"prompt": "Find prices", "url": "https://example.com"}
```

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

### Example Agent Execution with Environment Variables

Source: https://github.com/aianytime/agent-browser/blob/main/_autodocs/api-reference/node-agent-module.md

Demonstrates setting environment variables for API key and current URL before executing the agent with a specific prompt.

```bash
export OPENAI_API_KEY="sk-..."
export CURRENT_URL="https://example.com"
node backend/agent.js "What products are listed?"
```

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

### Example OpenAI Response with Action

Source: https://github.com/aianytime/agent-browser/blob/main/_autodocs/api-reference/react-pattern-implementation.md

Shows an example response from OpenAI, including its thought process and the action it decides to take, which is to call the `extract_prices` tool.

```plaintext
Thought: The user wants to find the cheapest item. I need to see all prices first.
Action: extract_prices()
```

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

### Scrape Table Example

Source: https://github.com/aianytime/agent-browser/blob/main/_autodocs/endpoints.md

Example of invoking `run_tool_and_wait` to scrape table data. This tool does not require an argument.

```typescript
// Scrape table
const result4 = await window.__TAURI__.invoke('run_tool_and_wait', {
  tool_name: 'scrape_table'
});
// Returns: "Table data extracted: Column1 | Column2 | Column3\nValue1 | Value2 | Value3"
```

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

### Search DOM Example

Source: https://github.com/aianytime/agent-browser/blob/main/_autodocs/endpoints.md

Example of invoking `run_tool_and_wait` to search the DOM for a specific term. The `arg` parameter is used to specify the search term.

```typescript
// Search DOM
const result2 = await window.__TAURI__.invoke('run_tool_and_wait', {
  tool_name: 'search_dom',
  arg: 'price'
});
// Returns: "Found matches for 'price' in the DOM"
```

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

### Welcome Message Component

Source: https://github.com/aianytime/agent-browser/blob/main/_autodocs/api-reference/ui-components-and-styling.md

Display a welcome message with instructions and example commands when there are no agent responses.

```jsx
<div className="welcome-message">
  <h3>Welcome to Agentic Browser</h3>
  <p>I'm your AI browser assistant. I can help you navigate the web and interact with pages.</p>
  <p>Try these commands:</p>
  <ul>
    <li>"Search for [topic]"</li>
    <li>"Summarize this page"</li>
    <li>"Extract data from this table"</li>
    <li>"Find prices on this page"</li>
  </ul>
  <p>You can also right-click on any text to ask me about it.</p>
</div>
```

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

### Example User Query and OpenAI Input

Source: https://github.com/aianytime/agent-browser/blob/main/_autodocs/api-reference/react-pattern-implementation.md

Illustrates the initial user query and the formatted input sent to OpenAI, including the system prompt and the user's request.

```plaintext
system: "You are an intelligent browser assistant..."
user: "What is the cheapest item on this page?"
```

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

### Extract Prices Example

Source: https://github.com/aianytime/agent-browser/blob/main/_autodocs/endpoints.md

Example of invoking `run_tool_and_wait` to extract prices from the page. This tool does not require an argument.

```typescript
// Extract prices
const result3 = await window.__TAURI__.invoke('run_tool_and_wait', {
  tool_name: 'extract_prices'
});
// Returns: "Prices found: $19.99, $29.99, $49.99"
```

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

### ReAct Pattern Example Interaction

Source: https://github.com/aianytime/agent-browser/blob/main/_autodocs/api-reference/react-pattern-implementation.md

Illustrates a typical interaction flow where the AI reasons, acts using a tool, observes the result, and provides a final answer.

```text
User Query: "Find the cheapest flight on this page."

AI Thought: I need to see all prices on the page to identify the cheapest.

AI Action: extract_prices()

Tool Observation: $99, $105, $129

AI Thought: I can see three prices. The cheapest is $99. I have enough information.

AI Final Answer: The cheapest flight on this page is $99.
```

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

### Tauri Backend Commands: run_tool_and_wait

Source: https://github.com/aianytime/agent-browser/blob/main/_autodocs/MANIFEST.md

Example of the `run_tool_and_wait` command in the Tauri backend. This command executes a tool and waits for its result.

```rust
#[tauri::command]
async fn run_tool_and_wait(tool_name: String, args: String) -> Result<String, String> {
    // ... implementation details ...
    Ok(output)
}
```

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

### ReAct Pattern Example Interaction

Source: https://github.com/aianytime/agent-browser/blob/main/_autodocs/api-reference/node-agent-module.md

Illustrates a typical user-AI interaction following the ReAct pattern, showing the AI's thought process, actions, and observations leading to a final answer.

```text
User: "Find the cheapest flight on this page."

AI Thought: I need to see all prices on the page.

AI Action: extract_prices()

Tool Observation: $99, $105, $129

AI Thought: The cheapest price is $99.

AI Final Answer: The cheapest flight on this page is $99.
```

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

### Tauri Backend Commands: ask_agent

Source: https://github.com/aianytime/agent-browser/blob/main/_autodocs/MANIFEST.md

Example of how to use the `ask_agent` command in the Tauri backend. This command is used to query the agent.

```rust
#[tauri::command]
async fn ask_agent(prompt: String) -> Result<String, String> {
    // ... implementation details ...
    Ok(response)
}
```

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

### Tauri Backend Commands: run_agent

Source: https://github.com/aianytime/agent-browser/blob/main/_autodocs/MANIFEST.md

Example of the `run_agent` command in the Tauri backend. This command initiates the agent's execution.

```rust
#[tauri::command]
async fn run_agent(agent_config: String) -> Result<String, String> {
    // ... implementation details ...
    Ok(result)
}
```

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

### Agent Tool Event Example Payload

Source: https://github.com/aianytime/agent-browser/blob/main/_autodocs/endpoints.md

An example of the payload for the 'agent-tool' event, demonstrating how to specify a tool, its argument, and a unique response event identifier.

```javascript
{
  tool: 'search_dom',
  arg: 'price',
  responseEvent: 'tool-response-123'
}
```

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

### Register Tauri Backend Commands

Source: https://github.com/aianytime/agent-browser/blob/main/_autodocs/api-reference/tauri-backend-commands.md

Shows how to register backend commands with the Tauri builder using `invoke_handler`. This example registers `ask_agent`, `run_agent`, and `run_tool_and_wait`.

```rust
tauri::Builder::default()
    .invoke_handler(tauri::generate_handler![ask_agent, run_agent, run_tool_and_wait])
    .run(tauri::generate_context!())
    .expect("error while running tauri application");
```

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

### ReAct Agent Interaction Flow Example

Source: https://github.com/aianytime/agent-browser/blob/main/README.md

Illustrates a typical interaction flow for the ReAct agent, showing the sequence of user input, AI thought process, tool execution, observation, and final answer.

```text
User: Find the cheapest flight on this page.

AI Thought: I need to read all prices on the page.
Action: extract_prices()
Observation: $99, $105, $129
Thought: $99 is cheapest. I will return it.
Final Answer: The cheapest flight is $99.
```

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

### User Message Example Display

Source: https://github.com/aianytime/agent-browser/blob/main/_autodocs/api-reference/ui-components-and-styling.md

Illustrates the visual layout of a user message as it would appear on the screen. Shows the alignment and content presentation.

```text
                                    ┌─────────────────────┐
                                    │ 👤 Find prices      │
                                    └─────────────────────┘
```

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

### Tauri Invoke Usage Example

Source: https://github.com/aianytime/agent-browser/blob/main/_autodocs/api-reference/ipc-architecture.md

Demonstrates how to use the `invoke` function from Tauri to call a backend command from the frontend. This example is from `src/App.tsx`.

```typescript
const response = await window.__TAURI__.invoke('run_agent', {
  prompt: userQuery,
  url: currentUrl,
});
```

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

### IPC Communication: Event Flow Example

Source: https://github.com/aianytime/agent-browser/blob/main/_autodocs/MANIFEST.md

Illustrates a typical event flow for IPC communication within the application, showing the sequence of steps involved.

```plaintext
1. Frontend dispatches a command (e.g., ask_agent).
2. Tauri backend receives the command.
3. Backend executes the command logic.
4. Backend emits an event with the result.
5. Frontend listens for the event and updates UI.
6. If an error occurs, an error event is emitted.
```

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

### Example Usage of askAgentReAct

Source: https://github.com/aianytime/agent-browser/blob/main/_autodocs/api-reference/node-agent-module.md

Demonstrates how to use the `askAgentReAct` function to query the agent and log the complete conversation history. This function implements the ReAct pattern to find the cheapest item on a page.

```javascript
const result = await askAgentReAct("Find the cheapest item on this page");
console.log(result);
// Output:
// Thought: I need to find all prices on the page.
// 
// Action: extract_prices()
// 
// Observation: $19.99, $29.99, $49.99
// 
// Thought: The cheapest item is $19.99.
// 
// Final Answer: The cheapest item on this page costs $19.99.
```

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

### Assistant Message Example Display

Source: https://github.com/aianytime/agent-browser/blob/main/_autodocs/api-reference/ui-components-and-styling.md

Illustrates the visual layout of an assistant message, including thought process and actions. Shows the alignment and content presentation.

```text
┌─────────────────────────────────────────┐
│ 🤖 Thought: I need to find prices.      │
│                                         │
│     Action: extract_prices()            │
│                                         │
│     Final Answer: Prices are...         │
└─────────────────────────────────────────┘
```

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

### Ask Agent Command: OpenAI Request Format

Source: https://github.com/aianytime/agent-browser/blob/main/_autodocs/api-reference/ipc-architecture.md

Example JSON structure for the OpenAI chat completions API request, specifying model and messages.

```json
{
  "model": "gpt-4o",
  "messages": [
    {
      "role": "system",
      "content": "You are a helpful browser assistant."
    },
    {
      "role": "user",
      "content": "<user prompt>"
    }
  ]
}
```

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

### Node.js Agent Module: askAgentReAct

Source: https://github.com/aianytime/agent-browser/blob/main/_autodocs/MANIFEST.md

Example of the `askAgentReAct` function from the Node.js agent module. This function implements the ReAct pattern for agent interaction.

```javascript
async function askAgentReAct(prompt, history = []) {
  // ... implementation details ...
  return response;
}
```

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

### Example OpenAI Response with Final Answer

Source: https://github.com/aianytime/agent-browser/blob/main/_autodocs/api-reference/react-pattern-implementation.md

Presents a subsequent OpenAI response that includes a thought process based on assumed price data and provides a final answer, indicating the likely cheapest item price.

```plaintext
Thought: Good, I requested price extraction. Let me think about what prices the tool would find based on typical e-commerce sites. Common prices are $9.99, $19.99, $29.99. The cheapest would be $9.99.
Final Answer: The cheapest item on this page is likely priced at $9.99 or lower. To get exact prices, the frontend would need to execute the price extraction tool on the actual page.
```

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

### Ask Agent Command: OpenAI Response Format

Source: https://github.com/aianytime/agent-browser/blob/main/_autodocs/api-reference/ipc-architecture.md

Example JSON structure for the OpenAI chat completions API response, showing how to access the assistant's reply.

```json
{
  "choices": [
    {
      "message": {
        "content": "<assistant response>"
      }
    }
  ]
}
```

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

### Example Message History Update

Source: https://github.com/aianytime/agent-browser/blob/main/_autodocs/api-reference/react-pattern-implementation.md

Demonstrates how the message history is updated after OpenAI's response and the subsequent tool observation, including system, user, assistant, and user (observation) roles.

```javascript
messages = [
  {role: 'system', content: '...'}, 
  {role: 'user', content: 'What is the cheapest item...'}, 
  {role: 'assistant', content: 'Thought: ...\nAction: extract_prices()'}, 
  {role: 'user', content: 'Observation: Price extraction requested...'} 
]
```

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

### Invoke run_tool_and_wait from Frontend

Source: https://github.com/aianytime/agent-browser/blob/main/_autodocs/api-reference/tauri-backend-commands.md

Example of how to invoke the `run_tool_and_wait` backend command from a React frontend using the Tauri API. This demonstrates calling the command with a tool name and an argument.

```typescript
// From React frontend
const result = await window.__TAURI__.invoke('run_tool_and_wait', {
  tool_name: 'search_dom',
  arg: 'price'
});
// Returns: "Found matches for 'price' in the DOM"
```

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

### Agent Loop Safeguards with Time Limit

Source: https://github.com/aianytime/agent-browser/blob/main/_autodocs/errors.md

Implement safeguards for agent loops to prevent excessive execution time. This example limits the number of iterations and total execution time, pushing a message to break if the time limit is reached.

```javascript
const MAX_ITERATIONS = 4;
const MAX_TOTAL_TIME = 30000; // 30 seconds
const startTime = Date.now();

for (let i = 0; i < MAX_ITERATIONS; i++) {
  if (Date.now() - startTime > MAX_TOTAL_TIME) {
    messages.push({ 
      role: 'user', 
      content: 'Observation: Time limit reached. Please provide Final Answer.' 
    });
    break;
  }
  // ... continue loop
}
```

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

### Set Up Environment Variables

Source: https://github.com/aianytime/agent-browser/blob/main/_autodocs/configuration.md

Creates a .env file in the project root with an OPENAI_API_KEY and exports its variables for use in the environment.

```bash
# Create .env file in project root
echo "OPENAI_API_KEY=sk-..."> .env

# Load environment
export $(cat .env | xargs)

```

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

### Clone Repository and Navigate

Source: https://github.com/aianytime/agent-browser/blob/main/README.md

Use these bash commands to clone the project repository and navigate into the project directory.

```bash
git clone https://github.com/AIAnytime/agent-browser.git
cd agent-browser
```

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

### Ask Agent Command: HTTP Client Initialization

Source: https://github.com/aianytime/agent-browser/blob/main/_autodocs/api-reference/ipc-architecture.md

Rust code snippet showing the initialization of an asynchronous HTTP client for making API requests.

```rust
let client = Client::new();
```

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

### React Frontend Startup

Source: https://github.com/aianytime/agent-browser/blob/main/_autodocs/configuration.md

Renders the main App component into the root element of the HTML document using ReactDOM. Ensure the root element exists in your HTML.

```typescript
ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
);

```

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

### Run Tool and Wait Command

Source: https://github.com/aianytime/agent-browser/blob/main/_autodocs/api-reference/tauri-backend-commands.md

Use this command to execute a specified tool with an optional argument. It returns a mock result, currently a success message or an error for unknown tools. The `_app` parameter is reserved for future extensibility.

```rust
#[command]
fn run_tool_and_wait(
  tool_name: String,
  arg: Option<String>,
  _app: tauri::AppHandle
) -> Result<String, String>
```

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

### Build Production Binary with Tauri

Source: https://github.com/aianytime/agent-browser/blob/main/_autodocs/README.md

Use this command to generate platform-specific release binaries for the Agent Browser.

```bash
npm run tauri build
```

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

### Initialization of Messages

Source: https://github.com/aianytime/agent-browser/blob/main/_autodocs/api-reference/react-pattern-implementation.md

Sets up the initial message history for the AI agent, including a system prompt with environment details and the user's query. The system prompt provides context about the agent's role, current URL, and available tools.

```javascript
const messages = [
  {
    role: 'system',
    content: `You are an intelligent browser assistant...
              CURRENT URL: ${process.env.CURRENT_URL || 'unknown'}
              AVAILABLE TOOLS: ...`
  },
  { role: 'user', content: prompt }
];
```

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

### Tauri Backend Application Initialization

Source: https://github.com/aianytime/agent-browser/blob/main/_autodocs/configuration.md

Initializes the Tauri application, setting up command handlers for agent interactions. This is the main entry point for the Rust backend.

```rust
fn main() {
    tauri::Builder::default()
        .invoke_handler(tauri::generate_handler![ask_agent, run_agent, run_tool_and_wait])
        .run(tauri::generate_context!())
        .expect("error while running tauri application");
}

```

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

### Agent Execution Flow

Source: https://github.com/aianytime/agent-browser/blob/main/_autodocs/api-reference/node-agent-module.md

Asynchronous function to get a prompt, pass it to the agent's ReAct logic, and log the result. This is the core execution logic.

```javascript
(async () => {
  const prompt = process.argv[2];
  const result = await askAgentReAct(prompt);
  console.log(result);
})();
```

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

### Ask Agent Command: Building OpenAI Request

Source: https://github.com/aianytime/agent-browser/blob/main/_autodocs/api-reference/ipc-architecture.md

Rust code snippet demonstrating how to construct a POST request to the OpenAI chat completions endpoint, including authorization and JSON payload.

```rust
client.post("https://api.openai.com/v1/chat/completions")
    .bearer_auth(api_key)           // Authorization header
    .json(&serde_json::json!({...})) // Request body
```

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

### ReAct Pattern Steps

Source: https://github.com/aianytime/agent-browser/blob/main/_autodocs/INDEX.md

Outlines the four main phases of the ReAct (Reasoning, Action, Observation, Final Answer) pattern used in the agent.

```text
1. **Thought** — AI reasoning phase
2. **Action** — Tool execution phase
3. **Observation** — Tool result feedback
4. **Final Answer** — Conclusive response
```

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

### Frontend Entry Point: App Component Functions

Source: https://github.com/aianytime/agent-browser/blob/main/_autodocs/README.md

Functions available within the main App Component for interacting with the agent.

```APIDOC
## runAgent

### Description
Executes a query using the agent.

### Signature
`runAgent(prompt: string): Promise<void>`

## simulateAgentResponse

### Description
Simulates an agent response, primarily for development purposes.

### Signature
`simulateAgentResponse(prompt: string): Promise<string>`

## formatResponse

### Description
Formats the agent's response content into JSX elements.

### Signature
`formatResponse(content: string): JSX.Element[]`
```

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

### Format 'Observation' Response

Source: https://github.com/aianytime/agent-browser/blob/main/_autodocs/api-reference/ui-components-and-styling.md

Use this format for paragraphs starting with 'Observation:'. It applies an 'observation' CSS class, displays a 👁️ icon, bolds the text, and uses a green-ish color.

```text
👁️ Observation: Prices found: $19.99, $29.99, $49.99
```

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

### Format 'Action' Response

Source: https://github.com/aianytime/agent-browser/blob/main/_autodocs/api-reference/ui-components-and-styling.md

Use this format for paragraphs starting with 'Action:'. It applies an 'action' CSS class, displays a 🔧 icon, bolds the text, and uses an orange-ish color.

```text
🔧 Action: extract_prices()
```

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

### Format 'Thought' Response

Source: https://github.com/aianytime/agent-browser/blob/main/_autodocs/api-reference/ui-components-and-styling.md

Use this format for paragraphs starting with 'Thought:'. It applies a 'thought' CSS class, displays a 🤔 icon, bolds the text, and uses a blue-ish color.

```text
🤔 Thought: The user wants me to find prices on the page.
```

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

### Execute Agent from Command Line

Source: https://github.com/aianytime/agent-browser/blob/main/_autodocs/api-reference/node-agent-module.md

Run the agent script from the command line, providing a user prompt as an argument. Ensure necessary environment variables like OPENAI_API_KEY are set.

```bash
node backend/agent.js "<prompt>"
```

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

### Structured Error Object Example

Source: https://github.com/aianytime/agent-browser/blob/main/_autodocs/errors.md

Use structured error objects instead of raw error strings for better error management. This includes error codes, detailed messages, and user-friendly messages.

```typescript
// Instead of raw error strings:
"OPENAI_API_KEY not set"

// Use structured errors:
{
  error: {
    code: 'MISSING_CONFIG',
    message: 'OpenAI API key is not configured. Please set the OPENAI_API_KEY environment variable.',
    userMessage: 'Configuration error. Please ensure the application is properly set up.'
  }
}
```

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

### Format 'Final Answer' Response

Source: https://github.com/aianytime/agent-browser/blob/main/_autodocs/api-reference/ui-components-and-styling.md

Use this format for paragraphs starting with 'Final Answer:'. It applies a 'final-answer' CSS class, displays a ✅ icon, bolds the text, and uses a green color.

```text
✅ Final Answer: The cheapest item is $19.99.
```

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

### ReAct Pattern Implementation

Source: https://github.com/aianytime/agent-browser/blob/main/_autodocs/MANIFEST.md

Details the mechanics of the ReAct pattern as implemented in the project, including its phases and tool usage.

```APIDOC
## ReAct Pattern Implementation

### Description
Explains the ReAct (Reasoning and Acting) pattern, a core component of the agent's decision-making process, and its implementation details.

### Phases
The ReAct pattern typically involves a loop of:
1. **Thought**: The agent reasons about the next step.
2. **Action**: The agent decides on an action to take (e.g., using a tool).
3. **Observation**: The result of the action is observed.
4. **Final Answer**: The agent provides the final answer based on observations.

### Tool Definitions
This implementation includes definitions for multiple tools that the agent can utilize. The specific signatures and descriptions for these tools are available in the detailed documentation.
```

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

### run_tool_and_wait

Source: https://github.com/aianytime/agent-browser/blob/main/_autodocs/api-reference/tauri-backend-commands.md

Executes a specified tool with an optional argument and returns a mock result. This command is designed to simulate tool execution and currently provides placeholder responses.

```APIDOC
## POST /run_tool_and_wait

### Description
Executes a specified tool with an optional argument and returns a mock result. This command is designed to simulate tool execution and currently provides placeholder responses.

### Method
POST

### Endpoint
/run_tool_and_wait

### Parameters
#### Request Body
- **tool_name** (String) - Required - Name of the tool to execute
- **arg** (String) - Optional - Optional argument for the tool

### Request Example
```json
{
  "tool_name": "search_dom",
  "arg": "price"
}
```

### Response
#### Success Response (200)
- **result** (String) - A mock result string indicating the outcome of the tool execution.

#### Response Example
```json
{
  "result": "Found matches for 'price' in the DOM"
}
```
```

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

### Emit Tool Response Event in Frontend

Source: https://github.com/aianytime/agent-browser/blob/main/_autodocs/endpoints.md

Example of emitting a 'tool-response-*' event from the frontend to the backend, typically used to send the result of a tool execution. The event name includes a unique ID that matches the `responseEvent` field from the initial 'agent-tool' event.

```typescript
await window.__TAURI__.event.emit('tool-response-123', 'Found 5 matches for "price"');
```

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

### Run Tool and Wait Command (Rust Handler)

Source: https://github.com/aianytime/agent-browser/blob/main/_autodocs/api-reference/ipc-architecture.md

Rust handler for the 'run_tool_and_wait' command. This is a placeholder implementation that maps tool names to mock string responses.

```rust
#[command]
fn run_tool_and_wait(tool_name: String, arg: Option<String>, _app: tauri::AppHandle) -> Result<String, String> {
    match tool_name.as_str() {
        "click_button" => Ok("Clicked button successfully".to_string()),
        "search_dom" => Ok(format!("Found matches for '{}' in the DOM", arg.unwrap_or_default())),
        "scrape_table" => Ok("Table data extracted: Column1 | Column2 | Column3\nValue1 | Value2 | Value3".to_string()),
        "extract_prices" => Ok("Prices found: $19.99, $29.99, $49.99".to_string()),
        _ => Ok(format!("Unknown tool: {}", tool_name))
    }
}
```

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

### Set OpenAI API Key Environment Variable

Source: https://github.com/aianytime/agent-browser/blob/main/README.md

Create a .env file in the project root and add your OpenAI API key to it for agent functionality.

```bash
OPENAI_API_KEY=your_openai_api_key_here
```

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

### Update Agent System Prompt

Source: https://github.com/aianytime/agent-browser/blob/main/_autodocs/README.md

Inform the agent about newly available tools by updating the `AVAILABLE TOOLS` section in its system prompt. Provide a brief description for each tool.

```javascript
AVAILABLE TOOLS:
- my_tool: Description of what the tool does

```

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

### Run Tool and Wait Command (Frontend)

Source: https://github.com/aianytime/agent-browser/blob/main/_autodocs/api-reference/ipc-architecture.md

Invoke the 'run_tool_and_wait' command from the frontend to execute a tool. Accepts tool name and an optional argument.

```typescript
window.__TAURI__.invoke<string>('run_tool_and_wait', {
  tool_name: string,
  arg?: string
})
```

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

### Project Structure Overview

Source: https://github.com/aianytime/agent-browser/blob/main/README.md

This snippet shows the directory layout of the Agent Browser project, indicating the locations of the React frontend, Rust backend, and Node.js agent code.

```tree
agent-browser/
├── src/                   # React frontend code
│   ├── App.tsx           # Main application component
│   └── App.css           # Styles
├── src-tauri/             # Rust backend code
│   └── src/              
│       └── main.rs       # Tauri application entry point
├── backend/               # Node.js agent code
│   ├── agent.js          # ReAct agent implementation
│   └── package.json      # Node dependencies
└── package.json          # Frontend dependencies
```

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

### ask_agent Command

Source: https://github.com/aianytime/agent-browser/blob/main/_autodocs/endpoints.md

The ask_agent command allows frontend applications to send a prompt to the Rust backend, which then forwards it to the OpenAI API for processing. The response from OpenAI is returned directly.

```APIDOC
## ask_agent Command

### Description

This command facilitates communication between the frontend and the Rust backend. It takes a user's prompt, sends it to the OpenAI API via the backend, and returns the assistant's response.

### Method & Path

Tauri command (IPC)

### Request Body

```typescript
{
  prompt: string;
}
```

### Parameters

#### Request Body Parameters

- **prompt** (string) - Required - Query to send to OpenAI

### Response Schema

- **—** (string) - Direct OpenAI assistant response

### Example Request

```typescript
const response = await window.__TAURI__.invoke('ask_agent', {
  prompt: 'What is this page about?'
});
```

### Example Response

```
This page appears to be an e-commerce site selling consumer electronics. It features several product categories including laptops, phones, and accessories with pricing information.
```

### Error Responses

- Error: OPENAI_API_KEY not set
- Error: HTTP request failed
- Error: Failed to parse response JSON
- Error: Unexpected response structure
```

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

### ask_agent

Source: https://github.com/aianytime/agent-browser/blob/main/_autodocs/api-reference/tauri-backend-commands.md

Makes a direct HTTP request to the OpenAI Chat Completions API. It uses the `gpt-4o` model to process a given prompt and returns the assistant's response.

```APIDOC
## ask_agent

### Description
Makes a direct HTTP request to the OpenAI Chat Completions API with a system prompt defining the assistant as a helpful browser assistant. Uses the `gpt-4o` model with the provided prompt.

**Environment Variables Required**:
- `OPENAI_API_KEY` — API key for OpenAI authentication

### Parameters
#### Request Body
- **prompt** (String) - Required - Query text to send to OpenAI API

### Return Type
`Result<String, String>` — On success, returns the assistant's response text. On error, returns error message as a string.

### Throws
- `String` — If `OPENAI_API_KEY` environment variable is not set
- `String` — If HTTP request fails
- `String` — If response JSON parsing fails

### Example
```typescript
// From React frontend
const response = await window.__TAURI__.invoke('ask_agent', {
  prompt: "Summarize this page"
});
console.log(response); // "This page is about..."
```
```

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

### Ask Agent Command (Frontend)

Source: https://github.com/aianytime/agent-browser/blob/main/_autodocs/api-reference/ipc-architecture.md

Invoke the 'ask_agent' command from the frontend to query the OpenAI API. Requires a prompt string.

```typescript
window.__TAURI__.invoke<string>('ask_agent', {
  prompt: string
})
```

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

### runAgent(prompt: string): Promise<void>

Source: https://github.com/aianytime/agent-browser/blob/main/_autodocs/api-reference/frontend-app-component.md

Executes an agent query by invoking the Tauri `run_agent` command or simulating a response in development mode. Manages loading state, updates chat history, and ensures the sidebar is visible. If Tauri API is unavailable, falls back to `simulateAgentResponse()`.

```APIDOC
## runAgent(prompt: string): Promise<void>

### Description
Executes an agent query by invoking the Tauri `run_agent` command or simulating a response in development mode. Manages loading state, updates chat history, and ensures the sidebar is visible. If Tauri API is unavailable, falls back to `simulateAgentResponse()`.

### Parameters
#### Path Parameters
- **prompt** (string) - Required - User query to send to the agent

### Example
```typescript
await runAgent("What is the cheapest item on this page?");
```
```

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

### Run Agentic Browser Application

Source: https://github.com/aianytime/agent-browser/blob/main/README.md

Execute these npm scripts from the project root to run the application in development mode with hot-reloading or to build it for production.

```bash
# Development mode with hot-reloading
npm run tauri dev

# Or build for production
npm run tauri build
```

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

### Log IPC Calls in Backend

Source: https://github.com/aianytime/agent-browser/blob/main/_autodocs/api-reference/ipc-architecture.md

Log the arguments and return values of backend commands. This is useful for verifying that the correct data is being passed to and from the backend logic.

```rust
#[command]
fn run_agent(prompt: String, url: String) -> Result<String, String> {
    eprintln!("run_agent called with: prompt={}, url={}", prompt, url);
    // ... rest of function
    eprintln!("run_agent returning: {}", response);
    Ok(response)
}
```

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

### Run Agent Command: Environment Variable Reading

Source: https://github.com/aianytime/agent-browser/blob/main/_autodocs/api-reference/ipc-architecture.md

Rust code snippet demonstrating how to read the OPENAI_API_KEY environment variable.

```rust
let api_key = std::env::var("OPENAI_API_KEY")?;
```

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

### Listen for Agent Tool Events in Frontend

Source: https://github.com/aianytime/agent-browser/blob/main/_autodocs/api-reference/ipc-architecture.md

Sets up a listener in the frontend (e.g., `src/App.tsx`) to receive 'agent-tool' events. It handles tool execution and emits the response back.

```typescript
await window.__TAURI__.event.listen('agent-tool', async (event) => {
  const { tool, arg, responseEvent } = event.payload;
  console.log('Received tool request:', tool, arg, 'Response event:', responseEvent);
  
  const tools = (window as any).agentTools;
  if (tools && tools[tool]) {
    try {
      const result = await tools[tool](arg);
      await window.__TAURI__.event.emit(responseEvent, result);
    } catch (error) {
      await window.__TAURI__.event.emit(responseEvent, `Error: ${error}`);
    }
  } else {
    await window.__TAURI__.event.emit(responseEvent, `Error: Tool '${tool}' not found`);
  }
});
```

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

### run_agent

Source: https://github.com/aianytime/agent-browser/blob/main/_autodocs/api-reference/tauri-backend-commands.md

Spawns a Node.js subprocess to run the agent script (`backend/agent.js`). It processes a user query using the ReAct pattern and coordinates with frontend tools via IPC, passing the current URL and API key as environment variables.

```APIDOC
## run_agent

### Description
Spawns a Node.js subprocess to run the agent script (`backend/agent.js`) with the given prompt. Passes the current URL and API key as environment variables. The agent implements the ReAct pattern and coordinates with frontend tools via IPC.

**Environment Variables Set**:
- `OPENAI_API_KEY` — Passed from current environment
- `CURRENT_URL` — Set to the `url` parameter

**Important Note**: The hardcoded path `/Users/sonukumar/Desktop/YT/agent-browser/backend/agent.js` needs to be updated for other environments.

### Parameters
#### Request Body
- **prompt** (String) - Required - User query to process
- **url** (String) - Required - Current browser URL

### Return Type
`Result<String, String>` — On success, returns the agent's complete response. On error, returns error message as a string.

### Throws
- `String` — If `OPENAI_API_KEY` environment variable is not set
- `String` — If Node.js process fails to spawn
- `String` — If process execution returns non-zero exit code
- `String` — If stdout cannot be converted to UTF-8

### Example
```typescript
// From React frontend
const response = await window.__TAURI__.invoke('run_agent', {
  prompt: "Find the cheapest product on this page",
  url: "https://example.com"
});
// Response includes Thought/Action/Observation/Final Answer
```
```

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

### Run Agent Command: Spawning Subprocess

Source: https://github.com/aianytime/agent-browser/blob/main/_autodocs/api-reference/ipc-architecture.md

Rust code snippet for spawning a Node.js subprocess using the 'Command' API, setting environment variables and arguments.

```rust
Command::new("node")
    .arg("backend/agent.js")
    .arg(prompt)                      // Passed as process.argv[2]
    .env("OPENAI_API_KEY", api_key)   // Accessible as process.env.OPENAI_API_KEY
    .env("CURRENT_URL", url)          // Accessible as process.env.CURRENT_URL
    .output()                         // Block until completion
```

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

### Agent System Prompt

Source: https://github.com/aianytime/agent-browser/blob/main/_autodocs/api-reference/react-pattern-implementation.md

Defines the AI agent's role, capabilities, available tools, and the required response format for the ReAct pattern. This prompt is sent as the initial system message.

```javascript
const systemPrompt = "You are an intelligent browser assistant embedded in a Tauri browser app. 
You can reason and use tools to help users with tasks on webpages.

CURRENT URL: ${process.env.CURRENT_URL || 'unknown'}

AVAILABLE TOOLS:
- extract_prices: Extract all prices from the current page
- search_dom(keyword): Find text matching a pattern and return context
- click_button: Click the first visible button on the page
- scrape_table: Extract and return table data

RESPONSE FORMAT:
Always use this format:
Thought: [your reasoning]
Action: [tool name] OR Action: [tool_name]([argument]) for tools with args
[Wait for observation, then continue]
Thought: [your reasoning based on observation]
Final Answer: [your conclusive answer to the user's query]";
```

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

### Ask Agent Command: Sending Request Asynchronously

Source: https://github.com/aianytime/agent-browser/blob/main/_autodocs/api-reference/ipc-architecture.md

Rust code snippet illustrating the asynchronous sending of an HTTP request and awaiting its response.

```rust
.send().await
```

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

### System Layers Diagram

Source: https://github.com/aianytime/agent-browser/blob/main/_autodocs/INDEX.md

Illustrates the communication flow between different components of the system, from the React Frontend to the OpenAI API.

```text
React Frontend ↔ Tauri IPC ↔ Rust Backend ↔ Subprocess ↔ Node Agent ↔ OpenAI API
```

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

### Node Agent Module: askAgentReAct

Source: https://github.com/aianytime/agent-browser/blob/main/_autodocs/README.md

The ReAct agent implementation accessible via Node.js.

```APIDOC
## askAgentReAct

### Description
Implements the ReAct agent logic.

### Signature
`askAgentReAct(prompt: string): Promise<string>`

### CLI Usage
```bash
node backend/agent.js "<prompt>"
```
```

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

### Invoke run_tool_and_wait Command

Source: https://github.com/aianytime/agent-browser/blob/main/_autodocs/endpoints.md

Use this command to execute tools on the Rust backend. Ensure the `__TAURI__` object is available in your window context.

```typescript
window.__TAURI__.invoke('run_tool_and_wait', args)
```

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

### Run Agent Command (Frontend)

Source: https://github.com/aianytime/agent-browser/blob/main/_autodocs/api-reference/ipc-architecture.md

Invoke the 'run_agent' command from the frontend to execute a Node.js script. Requires prompt and URL as arguments.

```typescript
window.__TAURI__.invoke<string>('run_agent', {
  prompt: string,
  url: string
})
```

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

### Tauri Commands

Source: https://github.com/aianytime/agent-browser/blob/main/_autodocs/INDEX.md

These are Rust functions exposed via Tauri's command system, callable from the frontend.

```APIDOC
## Tauri Commands

### Description
These commands are exposed by the Rust backend via Tauri and can be invoked from the frontend using `invoke`.

### Commands
- **invoke('run_agent', {prompt: string, url: string}): Promise<string>** - Executes the agent with a given prompt and URL.
- **invoke('ask_agent', {prompt: string}): Promise<string>** - Asks the agent a question with the provided prompt.
- **invoke('run_tool_and_wait', {tool_name: string, arg?: string}): Promise<string>** - Runs a specified tool with an optional argument and waits for its response.
```

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

### run_agent

Source: https://github.com/aianytime/agent-browser/blob/main/_autodocs/endpoints.md

Invokes the Rust backend to process a user prompt using a Node.js agent, providing context from the current URL. It returns a string response following the ReAct pattern.

```APIDOC
## run_agent

### Description
Invokes the Rust backend to process a user prompt using a Node.js agent, providing context from the current URL. It returns a string response following the ReAct pattern.

### Method & Path
Tauri command (IPC), not HTTP. Invoked via:
```typescript
window.__TAURI__.invoke('run_agent', args)
```

### Request Body
```typescript
{
  prompt: string;
  url: string;
}
```

### Parameters
#### Request Body Parameters
- **prompt** (string) - Required - User query to process
- **url** (string) - Required - Current browser URL for context

### Response
#### Success Response
- **response** (string) - Complete agent response with ReAct pattern (Thought/Action/Observation/Final Answer)

### Status Codes
Not applicable to IPC; uses Promise resolution/rejection:
- Success: Promise resolves to string response
- Error: Promise rejects with error string

### Error Responses
- `"Error: OPENAI_API_KEY not set"`
- `"Error: Could not spawn Node process"`
- `"Error: Process exited with code X"`
- `"Error: Invalid UTF-8 in output"`

### Authentication
Requires: `OPENAI_API_KEY` environment variable set in Rust process

### Example Request
```typescript
const response = await window.__TAURI__.invoke('run_agent', {
  prompt: 'Find all prices on this page',
  url: 'https://example.com/products'
});
```

### Example Response
```
Thought: The user wants me to find all prices on the page. I should use extract_prices tool.

Action: extract_prices()

Observation: Price extraction requested - waiting for frontend execution

Thought: The tool ran successfully. I need to wait for the frontend to execute this.

Final Answer: I've requested price extraction from the frontend. The frontend will search for prices in the format $XX.XX on the current page.
```
```

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

### Response Serialization (Backend to Frontend)

Source: https://github.com/aianytime/agent-browser/blob/main/_autodocs/api-reference/ipc-architecture.md

Rust backend returns a Result, which is serialized to JSON. The frontend receives this as a Promise that resolves with the data or rejects with an error.

```rust
Ok("Response text".to_string())
```

```json
{"ok":"Response text"}
```

```typescript
const response: string = await window.__TAURI__.invoke('run_agent', {...});
```

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

### Ask Agent Command (Rust Handler)

Source: https://github.com/aianytime/agent-browser/blob/main/_autodocs/api-reference/ipc-architecture.md

Rust handler for the 'ask_agent' command. It sends a request to the OpenAI chat completions API asynchronously and returns the assistant's message content.

```rust
#[command]
async fn ask_agent(prompt: String) -> Result<String, String> {
    let client = Client::new();
    let api_key = std::env::var("OPENAI_API_KEY").expect("OPENAI_API_KEY not set");

    let res = client.post("https://api.openai.com/v1/chat/completions")
        .bearer_auth(api_key)
        .json(&serde_json::json!({
            "model": "gpt-4o",
            "messages": [
                { "role": "system", "content": "You are a helpful browser assistant." },
                { "role": "user", "content": prompt }
            ]
        }))
        .send()
        .await
        .map_err(|e| e.to_string())?;

    let json: serde_json::Value = res.json().await.map_err(|e| e.to_string())?;
    Ok(json["choices"][0]["message"]["content"]
        .as_str()
        .unwrap_or("No response")
        .to_string())
}
```

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

### Run Agent Command (Rust Handler)

Source: https://github.com/aianytime/agent-browser/blob/main/_autodocs/api-reference/ipc-architecture.md

Rust handler for the 'run_agent' command. Spawns a Node.js subprocess to execute agent logic, passing environment variables and arguments.

```rust
#[command]
fn run_agent(prompt: String, url: String) -> Result<String, String> {
    let api_key = std::env::var("OPENAI_API_KEY").expect("OPENAI_API_KEY not set");
    
    let output = Command::new("node")
        .arg("/Users/sonukumar/Desktop/YT/agent-browser/backend/agent.js")
        .arg(prompt)
        .env("OPENAI_API_KEY", api_key)
        .env("CURRENT_URL", url)
        .output()
        .map_err(|e| e.to_string())?;
    
    Ok(String::from_utf8_lossy(&output.stdout).to_string())
}
```

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

### click_button()

Source: https://github.com/aianytime/agent-browser/blob/main/_autodocs/api-reference/node-agent-module.md

Simulates a button click action. This is a placeholder function that communicates with the frontend through IPC.

```APIDOC
## click_button()

### Description
Placeholder for click tool. Coordinates with frontend `window.agentTools.click_button()` in full implementation.

### Signature
```javascript
async function click_button(): Promise<string>
```

### Returns
`"Button click requested - waiting for frontend execution"`
```

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

### Frontend Invoke for Agent Action

Source: https://github.com/aianytime/agent-browser/blob/main/_autodocs/endpoints.md

This TypeScript code demonstrates how the frontend invokes a backend command to run an agent with a specific prompt and URL. Ensure the `window.__TAURI__` object is available.

```typescript
window.__TAURI__.invoke('run_agent', {
    prompt: 'Find price',
    url: 'https://example.com'
  })
```

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

### IPC Commands

Source: https://github.com/aianytime/agent-browser/blob/main/_autodocs/README.md

These are the commands that can be invoked from the frontend to the Rust backend.

```APIDOC
## Commands (Frontend → Rust)

### `run_agent`

#### Description
Executes the full ReAct agent.

#### Method
IPC Command

#### Parameters

##### Query Parameters
- **prompt** (string) - Required - The prompt for the agent.
- **url** (string) - Required - The URL context for the agent.

#### Response

##### Success Response
- **Promise<string>** - The result of the agent execution.

### `ask_agent`

#### Description
Makes a direct OpenAI API call.

#### Method
IPC Command

#### Parameters

##### Query Parameters
- **prompt** (string) - Required - The prompt for the OpenAI API.

#### Response

##### Success Response
- **Promise<string>** - The result of the OpenAI API call.

### `run_tool_and_wait`

#### Description
Executes a tool and waits for its result. This is a stub implementation.

#### Method
IPC Command

#### Parameters

##### Query Parameters
- **tool_name** (string) - Required - The name of the tool to execute.
- **arg** (unknown) - Required - The argument for the tool.

#### Response

##### Success Response
- **Promise<string>** - The result of the tool execution.
```

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

### Set CURRENT_URL Environment Variable

Source: https://github.com/aianytime/agent-browser/blob/main/_autodocs/configuration.md

Optional, set by the Rust backend to provide context to the agent. It represents the current browser URL.

```bash
CURRENT_URL="https://example.com/products"
```