🌐 راهنمای عملی: چگونه به یک عامل هوش مصنوعی مرورگر بدهیم؟

برای اینکه عامل‌های هوش مصنوعی در گردش‌کارهای واقعی مفید باشند، باید بتوانند مستقیماً از طریق مرورگر کار کنند. در این مطلب، با استفاده از OpenAI Agents SDK و Playwright MCP یک عامل مرورگر می‌سازیم.

---

🧩 مدل ذهنی: حلقه‌ی تعامل با مرورگر

یک عامل مرورگر، در یک حلقه‌ی تعامل با مرورگر قرار می‌گیرد:
۱. عامل با یک وظیفه و وضعیت فعلی مرورگر شروع می‌کند.
۲. وضعیت را تفسیر کرده، تصمیم می‌گیرد چه کاری انجام دهد و یک اقدام (Action) به مرورگر ارسال می‌کند.
۳. آن اقدام، وضعیت جدیدی در مرورگر ایجاد می‌کند که ورودی دور بعدی تصمیم‌گیری است.
۴. این حلقه تا زمانی که عامل وظیفه را کامل شده تشخیص دهد، ادامه می‌یابد.

برای این کار، به دو اتصال بین عامل و مرورگر نیاز است:
- کانال مشاهده (Observation Channel) : برای دریافت وضعیت فعلی مرورگر (تصاویر، ساختار صفحه یا ترکیبی از هر دو)
- کانال اقدام (Action Channel) : برای تعامل با مرورگر (ماوس و صفحه‌کلید، یا هدف‌گیری عناصر خاص صفحه)

---

🔧 دو رویکرد رایج برای مشاهده و اقدام

🔹 تصویر + اقدامات ماوس/صفحه‌کلید مبتنی بر مختصات: این روش به سمت استفاده‌ی عمومی از کامپیوتر متمایل است و فراتر از مرورگر، به سایر برنامه‌های دسکتاپ نیز قابل‌تعمیم است.

🔹 وضعیت ساختاریافته‌ی صفحه + اقدامات هدف‌گیری عناصر: این روش مخصوص مرورگر است و از ساختار موجود در صفحه‌ی وب (مانند DOM یا درخت دسترسی) برای تعامل دقیق‌تر استفاده می‌کند. در این مقاله، تمرکز روی این رویکرد است.

---

🛠️ مطالعه‌ی موردی: پاسخ به یک درخواست پشتیبانی مشتری

ما یک کنسول پشتیبانی ساده (HTML/CSS/JS) راه‌اندازی می‌کنیم که در آدرس http://127.0.0.1:8000 در دسترس است. وظیفه‌ی عامل این است که یک پرونده‌ی پشتیبانی را بررسی کرده و آن را از طریق این کنسول به نتیجه برساند.

پشته‌ی فناوری:
- OpenAI Agents SDK: برای اجرای عامل
- Playwright MCP: برای اتصال عامل به مرورگر

مراحل پیکربندی:

۱. اتصال به Azure OpenAI:

from openai import AsyncAzureOpenAI
from agents import set_default_openai_client, set_default_openai_api

azure_client = AsyncAzureOpenAI(...)
set_default_openai_client(azure_client)
set_default_openai_api("responses")

۲. دستورالعمل عامل (به‌صورت حداقلی):

AGENT_INSTRUCTIONS = "You are an agent that can interact with a web browser."

۳. راه‌اندازی Playwright MCP:

from agents.mcp import MCPServerStdio

playwright_server = MCPServerStdio(
    name="Playwright MCP",
    params={
        "command": "npx",
        "args": ["-y", "@playwright/mcp@latest", "--browser", "chrome"],
    },
)

وقتی عامل برای اولین بار یک ابزار مرورگر را فراخوانی کند، Playwright MCP یک پنجره‌ی Chrome باز کرده و اقدام درخواستی را اجرا می‌کند.

۴. تعریف وظیفه و اجرا:

TASK = f"""
Open {APP_URL} and resolve the support case for order ORD-1042.
The customer says they received the wrong item. ...
"""

async with playwright_server:
    result = await Runner.run(agent, TASK, max_turns=20)

---

📊 نتیجه‌ی اجرا

عامل وظیفه را با موفقیت انجام داد:
- پرونده‌ی مرتبط با سفارش را پیدا کرد
- جزئیات سفارش، درخواست مشتری، موجودی و سیاست‌های مربوطه را بررسی کرد
- تشخیص داد که تعویض کالا (Replacement) اقدام مناسب است
- یک یادداشت داخلی اضافه کرده و آن را ثبت کرد
- وضعیت پرونده را به "حل‌شده" تغییر داد

خروجی نهایی عامل:
"Resolved CASE-4107 for order ORD-1042 with Replacement. The case now shows Resolved, the recorded action is Replacement, and the audit log contains the corresponding resolution entry."

---

🔭 از مرورگر تا استفاده‌ی عمومی از کامپیوتر

الگوی اصلی (مشاهده 👈 تصمیم 👈 اقدام 👈 تکرار) به‌خوبی به استفاده‌ی عمومی از کامپیوتر نیز قابل‌تعمیم است. تفاوت اصلی در کانال‌های مشاهده و اقدام است:
- در اینجا، از ساختار صفحه و هدف‌گیری عناصر استفاده کردیم.
- در حالت کلی‌تر، می‌توان از تصاویر و کنترل ماوس/صفحه‌کلید بر اساس مختصات بهره برد.
---

🔗 مخزن کد:
https://github.com/ShuaiGuo16/llm-browser-agent

📄 مقاله‌ی اصلی:
https://towardsdatascience.com/giving-an-llm-agent-a-browser/
--- 
#هوش_مصنوعی #عامل_مرورگر #OpenAI #AgentsSDK #Playwright #MCP

🆔 @asrgooyeshpardaz