Web-агент с компьютерным зрением и LLM: как заменить RPA без боли

Представьте: сайт конкурента обновил интерфейс, и ваш RPA-бот, завязанный на селекторы вроде #price-block, начал выдавать ошибки. Знакомая ситуация? Мы решаем её с помощью AI-агентов, которые анализируют интерфейс как человек — через скриншот и семантику элементов. Они не ломаются при рефакторинге вёрстки и устойчивы к антибот-защите. За время работы мы реализовали 30+ проектов автоматизации для e-commerce, логистики и финансов.

Традиционный RPA-бот жёстко завязан на DOM-структуру. Изменился class кнопки — скрипт упал. AI-агент анализирует снимок экрана и семантику элементов, поэтому работает с любым интерфейсом — SPA, React, Vue, динамические элементы. Гибкость выше на порядок: рефакторинг фронтенда не ломает агента.

Что такое AI-агент и чем он отличается от RPA?

AI-агент — это программный робот, который использует мультимодальную большую языковую модель (LLM) и компьютерное зрение для взаимодействия с веб-интерфейсом. В отличие от RPA, работающего по жёстким селекторам, AI-агент видит страницу как человек: распознаёт кнопки, поля ввода и другие элементы по их визуальному представлению и контексту. Это делает его устойчивым к изменениям вёрстки, замене фреймворков и даже к некоторым видам антибот-защиты.

Как мы строим агента: архитектура

Используем связку Playwright + LLM (Claude, GPT-4). Playwright управляет браузером, LLM принимает решения — выбирает следующее действие на основе скриншота и доступных элементов.

from playwright.async_api import async_playwright, Page from anthropic import Anthropic import asyncio import base64 import json client = Anthropic() class AIWebAgent: def __init__(self, headless: bool = True): self.headless = headless async def run(self, task: str, start_url: str) -> str: async with async_playwright() as p: browser = await p.chromium.launch(headless=self.headless) context = await browser.new_context( viewport={"width": 1280, "height": 800}, user_agent="Mozilla/5.0 (compatible; research-bot/1.0)" ) page = await context.new_page() await page.goto(start_url) result = await self._agent_loop(page, task) await browser.close() return result async def _get_page_state(self, page: Page) -> dict: screenshot = await page.screenshot(type="png") screenshot_b64 = base64.standard_b64encode(screenshot).decode() elements = await page.evaluate("""() => { const interactive = document.querySelectorAll( 'a, button, input, select, textarea, [role="button"]' ); return Array.from(interactive).slice(0, 50).map((el, idx) => ({ index: idx, tag: el.tagName.toLowerCase(), text: el.textContent?.trim().slice(0, 80) || '', type: el.type || '', placeholder: el.placeholder || '', })); }""") return { "url": page.url, "title": await page.title(), "screenshot": screenshot_b64, "elements": elements, } async def _execute_action(self, page: Page, action: dict) -> str: action_type = action.get("type") try: if action_type == "click": if "text" in action: await page.get_by_text(action["text"]).first.click() elif "element_index" in action: elements = await page.query_selector_all( 'a, button, input, select, textarea, [role="button"]' ) if action["element_index"] < len(elements): await elements[action["element_index"]].click() elif action_type == "fill": await page.fill(action["selector"], action["value"]) elif action_type == "navigate": await page.goto(action["url"]) elif action_type == "scroll": amount = action.get("amount", 500) direction = 1 if action.get("direction", "down") == "down" else -1 await page.evaluate(f"window.scrollBy(0, {direction * amount})") elif action_type == "extract": return await page.evaluate( f'document.querySelector({json.dumps(action.get("selector", "body"))})?.textContent?.trim()' ) await asyncio.sleep(0.5) return "success" except Exception as e: return f"error: {e}" async def _agent_loop(self, page: Page, task: str) -> str: messages = [] system = """Ты — AI веб-агент. Выполняй задачи в браузере. Доступные действия (верни JSON): - {"type": "click", "text": "текст кнопки"} - {"type": "fill", "selector": "CSS", "value": "текст"} - {"type": "navigate", "url": "https://..."} - {"type": "scroll", "direction": "down", "amount": 500} - {"type": "extract", "selector": ".result"} - {"type": "done", "result": "итоговый результат"} Формат ответа: REASONING: <что видишь и что планируешь> ACTION: <JSON с одним действием>""" for _ in range(20): state = await self._get_page_state(page) user_content = [ {"type": "image", "source": {"type": "base64", "media_type": "image/png", "data": state["screenshot"]}}, {"type": "text", "text": f"Задача: {task}\nURL: {state['url']}\nЭлементы:\n{json.dumps(state['elements'][:20], ensure_ascii=False)}"} ] messages.append({"role": "user", "content": user_content}) response = client.messages.create( model="claude-opus-4-5", max_tokens=1024, system=system, messages=messages, ) reply = response.content[0].text messages.append({"role": "assistant", "content": reply}) try: action_line = [l for l in reply.split("\n") if l.startswith("ACTION:")][0] action = json.loads(action_line.replace("ACTION:", "").strip()) except (IndexError, json.JSONDecodeError): continue if action.get("type") == "done": return action.get("result", "Task completed") await self._execute_action(page, action) return "Max iterations reached" 

async def setup_stealth_context(playwright): browser = await playwright.chromium.launch( headless=False, args=["--disable-blink-features=AutomationControlled"] ) context = await browser.new_context( viewport={"width": 1366, "height": 768}, locale="ru-RU", timezone_id="Europe/Moscow", ) await context.add_init_script( "Object.defineProperty(navigator, 'webdriver', {get: () => undefined})" ) return context