OpenAI Agents Hacked Another Website

Learn to build an AI web agent that can navigate websites, extract data, and make intelligent decisions using OpenAI's API and Selenium.

Introduction

In this tutorial, you'll learn how to build and deploy a simple AI agent using OpenAI's API that can interact with websites and perform automated tasks. This tutorial demonstrates the capabilities and potential risks of AI agents like those mentioned in the Wired article, focusing on how they can be programmed to navigate web interfaces and extract information. We'll create a basic web scraping agent that can visit websites, fill forms, and extract data - similar to what was described in the article about AI agents hacking websites.

Prerequisites

Python 3.7 or higher installed on your system
Basic understanding of Python programming concepts
OpenAI API key (available at platform.openai.com)
Knowledge of HTML and web scraping concepts
Install required Python packages: openai, selenium, beautifulsoup4

Step 1: Set Up Your Development Environment

Install Required Packages

First, we need to install the necessary Python packages for our AI agent. The openai package will handle communication with OpenAI's API, while selenium will allow us to control a web browser programmatically.

pip install openai selenium beautifulsoup4

This step is crucial because we need both the AI capabilities for decision-making and the browser automation tools to interact with websites.

Step 2: Configure Your OpenAI API Key

Create Environment Variables

Store your OpenAI API key securely using environment variables to avoid exposing it in your code:

import os
from openai import OpenAI

# Set your API key
client = OpenAI(api_key=os.getenv('OPENAI_API_KEY'))

This approach protects your API key from being accidentally committed to version control systems or exposed in logs.

Step 3: Create the Base AI Agent Class

Initialize the Agent Structure

Let's create the foundation of our AI agent that will handle website interactions:

import time
from selenium import webdriver
from selenium.webdriver.common.by import By
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC


class WebAgent:
    def __init__(self, headless=False):
        self.driver = self._setup_driver(headless)
        self.client = OpenAI(api_key=os.getenv('OPENAI_API_KEY'))
        
    def _setup_driver(self, headless):
        options = webdriver.ChromeOptions()
        if headless:
            options.add_argument('--headless')
        options.add_argument('--no-sandbox')
        options.add_argument('--disable-dev-shm-usage')
        return webdriver.Chrome(options=options)
    
    def close(self):
        self.driver.quit()

This base class sets up a web driver for browser automation and initializes the OpenAI client for AI decision-making. The headless option allows the browser to run without a visible interface, which is useful for automated tasks.

Step 4: Implement Web Navigation and Data Extraction

Add Core Functionality

Now we'll add methods to navigate websites and extract information:

    def navigate_to(self, url):
        self.driver.get(url)
        time.sleep(2)  # Wait for page to load
        
    def extract_text(self, selector, by=By.CSS_SELECTOR):
        try:
            element = WebDriverWait(self.driver, 10).until(
                EC.presence_of_element_located((by, selector))
            )
            return element.text
        except:
            return "Element not found"
            
    def fill_form(self, field_selectors, data):
        for selector, value in field_selectors.items():
            try:
                element = self.driver.find_element(By.CSS_SELECTOR, selector)
                element.clear()
                element.send_keys(value)
                time.sleep(1)
            except Exception as e:
                print(f"Error filling {selector}: {e}")

These methods enable our agent to navigate to web pages, extract text content, and fill out forms - core capabilities that AI agents can use to interact with websites.

Step 5: Add AI Decision-Making Capabilities

Integrate OpenAI for Intelligent Actions

Let's add the AI decision-making component that will determine what actions to take:

    def get_ai_action(self, context, available_actions):
        prompt = f"""
        You are an AI web agent. Based on the following context:
        {context}
        
        Available actions: {available_actions}
        
        What action should you take? Respond with only the action name.
        """
        
        response = self.client.chat.completions.create(
            model="gpt-4",
            messages=[
                {"role": "system", "content": "You are a helpful web automation agent."},
                {"role": "user", "content": prompt}
            ],
            max_tokens=100
        )
        
        return response.choices[0].message.content.strip()
        
    def perform_action(self, action, **kwargs):
        if action == "navigate":
            self.navigate_to(kwargs['url'])
        elif action == "extract":
            return self.extract_text(kwargs['selector'])
        elif action == "fill_form":
            self.fill_form(kwargs['fields'], kwargs['data'])

This integration allows our agent to make intelligent decisions about what to do next based on the current web context, demonstrating how AI can be used to automate complex web interactions.

Step 6: Create a Complete Example Script

Build a Working Demo

Here's a complete example that demonstrates how our AI agent works:

def main():
    # Initialize the agent
    agent = WebAgent()
    
    try:
        # Navigate to a test website
        agent.navigate_to('https://example.com')
        
        # Get page title using AI
        title = agent.extract_text('h1')
        print(f"Page title: {title}")
        
        # Simulate AI decision making
        context = f"Currently on example.com with title: {title}"
        available_actions = ['navigate', 'extract', 'fill_form']
        
        action = agent.get_ai_action(context, available_actions)
        print(f"AI decided to: {action}")
        
        # Extract more information
        content = agent.extract_text('p')
        print(f"Page content preview: {content[:200]}...")
        
    except Exception as e:
        print(f"Error: {e}")
    finally:
        agent.close()

if __name__ == "__main__":
    main()

This example shows how an AI agent would interact with a website, make decisions based on context, and extract information - similar to the capabilities described in the Wired article.

Step 7: Test and Optimize

Run Your Agent

Run your script to see the AI agent in action:

python web_agent.py

Monitor the output to see how the AI agent navigates the website and makes decisions. You can modify the prompts and actions to suit your specific use cases.

Summary

In this tutorial, you've learned how to create a basic AI web agent using OpenAI's API and Selenium. The agent can navigate websites, extract information, and make intelligent decisions about what actions to take next. This demonstrates the capabilities of AI agents like those mentioned in the Wired article that can interact with web interfaces. Remember that while these tools are powerful for legitimate automation tasks, they can also be misused for unauthorized access to websites, highlighting the importance of responsible AI development and cybersecurity practices.