يهيمن بروتوكولان على التحكم بالمتصفح عبر الذكاء الاصطناعي: CDP (Chrome DevTools Protocol) وMCP (Model Context Protocol). يحلّان مشكلات مختلفة في طبقات مختلفة، لكن المطورين الذين يبنون وكلاء متصفح كثيرًا ما يخلطون بينهما أو يختارون الخاطئ لحالة الاستخدام. يوضح هذا الدليل ما يفعله كل بروتوكول ومتى تستخدم أيًا منهما وكيف يعملان معًا في بنية agent إنتاجية.
الخلاصة: CDP يمنح agent تحكمًا مباشرًا ومنخفض المستوى بالمتصفح عبر اتصال WebSocket. MCP يمنح LLM أدوات متصفح عالية المستوى عبر واجهة tool-use معيارية. CDP هو المحرك؛ MCP هو عجلة القيادة. معظم وكلاء الذكاء الاصطناعي الإنتاجيين يحتاجون كليهما: MCP ليقرر LLM الإجراءات وCDP في الأسفل ليعمل المتصفح فعلًا. Clawbrowser يدعم كليهما بشكل أصلي.
ملاحظة: "CDP" في هذا المقال تعني Chrome DevTools Protocol، معيار التحكم بالمتصفح.
ما هو CDP وMCP فعلًا
CDP: Chrome DevTools Protocol
CDP هو بروتوكول قائم على WebSocket للتحكم في متصفحات Chromium برمجيًا. بنته Google لأدوات Chrome DevTools (المفتش الذي تفتحه بـF12)، لكنه أصبح المعيار لأتمتة المتصفح. Playwright وPuppeteer وكل مكتبة أتمتة رئيسية تستخدم CDP داخليًا.
عندما تستدعي page.goto() في Playwright، يُرسل أمر CDP عبر WebSocket إلى المتصفح. يمنحك CDP تحكمًا دقيقًا: التنقل بين الصفحات وتنفيذ JavaScript واعتراض طلبات الشبكة والتعامل مع cookies والتقاط screenshots.
# CDP: your code controls the browser directly
from playwright.async_api import async_playwright
async with async_playwright() as p:
browser = await p.chromium.connect_over_cdp("http://127.0.0.1:9222")للتعمق الكامل في CDP، راجع متصفح CDP لوكلاء الذكاء الاصطناعي: دليل للمطورين.
MCP: Model Context Protocol
MCP هو بروتوكول يوحّد طريقة اتصال LLMs بالأدوات الخارجية. بدلًا من كتابة تعريفات function-call مخصصة لكل أداة، يكتشف LLM الأدوات المتاحة عبر خادم MCP ويستدعيها بواجهة معيارية.
للتحكم بالمتصفح، يعرّض خادم MCP إجراءات مثل navigate وclick وtype وscreenshot وextract كأدوات يستطيع LLM استدعاءها. يقرر LLM أي أداة يستدعي بناءً على المهمة. لا كود Playwright ولا CSS selectors ولا تعريفات أدوات مخصصة في agent.
{
"mcpServers": {
"clawbrowser": {
"command": "clawctl",
"args": ["mcp", "serve"]أضف هذا الإعداد إلى Claude Code أو Cursor أو Gemini CLI أو أي agent متوافق مع MCP. يحصل LLM على أدوات المتصفح فورًا.
لماذا يُخلط بينهما
كلا البروتوكولين يربط وكيل ذكاء اصطناعي بمتصفح. كلاهما يستخدم كلمة "protocol". كلاهما يظهر في المحادثات نفسها حول بنية وكلاء الذكاء الاصطناعي. لكنهما يعملان في طبقات مختلفة:
- CDP بروتوكول على مستوى المتصفح. يتحدث إلى Chromium.
- MCP بروتوكول على مستوى التطبيق. يتحدث إلى LLMs.
خادم MCP للمتصفح يستخدم CDP داخليًا للتحكم بالمتصفح. ليسا بديلين. هما طبقات في البنية نفسها.
مقارنة جنبًا إلى جنب
| CDP (Chrome DevTools Protocol) | MCP (Model Context Protocol) | |
|---|---|---|
| أنشأه | Google (فريق Chrome) | Anthropic |
| نوع البروتوكول | تحكم بالمتصفح (WebSocket) | استخدام أدوات (stdio/SSE) |
| من يستدعيه | الكود (Playwright أو Puppeteer أو WebSocket خام) | LLM (Claude أو GPT أو Gemini) |
| مستوى التحكم | منخفض: DOM وشبكة وتنفيذ JavaScript وcookies | عالٍ: navigate وclick وtype وscreenshot وextract |
| الإعداد | الاتصال بـdebugging port المتصفح | إعداد خادم MCP في agent |
| المرونة | كاملة: أي شيء يستطيع المتصفح فعله | محدودة بالأدوات التي يعرّضها الخادم |
| سرعة كل إجراء | ميلي ثوانٍ (بدون inference) | 0.5-3 ثوانٍ (LLM يقرر كل خطوة) |
| معالجة الأخطاء | الكود يعالج الأخطاء | LLM يستنتج حول الأخطاء |
| مكافحة الكشف | غير مدمجة (تعتمد على المتصفح) | غير مدمجة (تعتمد على المتصفح) |
| الأنسب لـ | أتمتة مبرمجة وتحكم دقيق وتطوير أطر عمل | تصفح بقيادة LLM ومهام مفتوحة ونمذجة سريعة |
لا يتعامل أي من البروتوكولين مع مكافحة الكشف. هذه مشكلة على مستوى المتصفح وليست مشكلة بروتوكول. نسخة Chrome عادية متصلة عبر CDP أو من خلال خادم MCP تسرّب إشارات الأتمتة نفسها. تتطلب مكافحة الكشف حلًا على مستوى المحرك مثل Clawbrowser: بصمات مُدارة عبر أكثر من 20 سطحًا وproxy routing مدمج وإخفاء إشارات CDP على مستوى كود Chromium المصدري.
متى تستخدم CDP
استخدم CDP عندما تحتاج تحكمًا دقيقًا وبرمجيًا بالمتصفح وتعرف الخطوات الدقيقة مسبقًا.
سيناريوهات يتفوق فيها CDP:
- جمع بيانات منظم. تعرف أي selectors تستهدف وأي بيانات تستخرج وكيف تتعامل مع pagination. الكود ينفذ الخطوات نفسها في كل مرة.
- اعتراض الشبكة. تحتاج حظر موارد أو تعديل request headers أو التقاط استجابات API أو حقن JavaScript قبل تحميل الصفحة.
- شروط انتظار معقدة. تحتاج الانتظار حتى ظهور عناصر DOM محددة أو حالات network idle أو تغيّر متغيرات JavaScript قبل التصرف.
- أتمتة حساسة للأداء. أوامر CDP تُنفذ بالميلي ثانية. لا تأخير inference من LLM لكل إجراء. مهمة جمع بيانات من 50 خطوة تستغرق ثوانٍ عبر CDP ستستغرق دقائق مع استنتاج LLM لكل خطوة.
- تطوير أطر العمل. تبني إطار agent أو بيئة اختبار أو مكتبة أتمتة سيستخدمها آخرون.
# CDP: full control, full responsibility
await page.wait_for_selector("#login-form")
await page.fill("#email", "[email protected]")
await page.fill("#password", credentials)
await page.click("#submit")المقايضة: أنت تكتب وتصون كل كود ربط المتصفح. كل selector وكل شرط انتظار وكل معالج أخطاء. عندما تتغير بنية الصفحة المستهدفة، ينكسر الكود.
متى تستخدم MCP
استخدم MCP عندما يجب أن يقرر LLM ما يفعله بناءً على ما يراه في الصفحة.
سيناريوهات يتفوق فيها MCP:
- تصفح مفتوح. "ابحث عن صفحة الأسعار واستخرج تفاصيل الخطط." يتنقل agent ويقرأ الصفحة ويقرر ما ينقر دون selectors ثابتة.
- سير عمل متعدد الخطوات مع حكم. "سجّل الدخول وتحقق إن كانت هناك فاتورة جديدة وحمّلها إذا تجاوز المبلغ 500 دولار." يتعامل LLM مع المنطق الشرطي بقراءة محتوى الصفحة في كل خطوة.
- نمذجة سريعة. تريد وكيل متصفح في خمس دقائق دون كتابة كود Playwright. أضف إعداد MCP وصِف المهمة وانتهى الأمر.
- مستخدمون غير مطورين. مشغّل agent يصف المهام بلغة طبيعية. لا حاجة لكود.
- بيئات أصلية للوكلاء. Claude Code وCursor وGemini CLI يتحدثون MCP بالفعل. إضافة متصفح تتطلب كتلة إعداد واحدة.
# MCP: the LLM decides what to do
User prompt: "Go to example.com and tell me the page title"
LLM calls: navigate(url="https://example.com")
LLM calls: screenshot()المقايضة: دقة أقل. قد ينقر LLM على العنصر الخاطئ أو يتخذ خطوات إضافية أو يقرأ محتوى الصفحة بشكل خاطئ. كل إجراء يحمل تأخير inference من LLM. لا يمكنك اعتراض طلبات الشبكة أو حقن JavaScript عبر أدوات MCP القياسية للمتصفح.
متى تستخدم كليهما معًا
هنا ينتهي المطاف بمعظم وكلاء الذكاء الاصطناعي الإنتاجيين. MCP يدير واجهة LLM-إلى-agent. CDP يدير واجهة agent-إلى-المتصفح. خادم MCP يجلس بينهما ويترجم استدعاءات الأدوات عالية المستوى إلى أوامر متصفح منخفضة المستوى.
LLM ← MCP → MCP Server ← CDP → Browser
(clawctl) (Clawbrowser)يرسل LLM استدعاءات أدوات MCP ("انتقل إلى هذا الرابط" أو "انقر زر تسجيل الدخول"). يترجم خادم MCP تلك الاستدعاءات إلى أوامر CDP ويرسلها إلى المتصفح. تعود النتائج عبر السلسلة نفسها.
لماذا تهم طبقة المتصفح
معظم خوادم MCP للمتصفح تتصل بنسخة Chrome عادية عبر CDP. المتصفح لا يملك إدارة fingerprint ولا proxy routing ولا مكافحة كشف. يعمل agent على مواقع تجريبية لكنه يُحظر على مواقع إنتاجية خلف Cloudflare أو DataDome أو Akamai.
خادم MCP المدمج في Clawbrowser يتصل بمحرك Chromium الخاص به. عندما يستدعي LLM أمر navigate، يرسل خادم MCP أمر CDP إلى متصفح يملك بالفعل fingerprints مُدارة وproxy routing متوافق جغرافيًا وإخفاء إشارات CDP على مستوى المحرك. لا حاجة لإضافات stealth ولا وسيط proxy ولا كود تدوير fingerprint.
مسار MCP (بقيادة LLM، بدون كود ربط):
{
"mcpServers": {
"clawbrowser": {
"command": "clawctl",
"args": ["mcp", "serve"]مسار CDP (مبرمج، تحكم كامل):
browser = await playwright.chromium.connect_over_cdp(
"http://127.0.0.1:9222"
)كلا المسارين يتصل بنفس نسخة Clawbrowser مع نفس fingerprints وproxy routing ومكافحة الكشف. اختر الواجهة التي تناسب حالة استخدامك. استخدم كليهما في المشروع نفسه عندما تحتاج أجزاء مختلفة من سير العمل مستويات تحكم مختلفة.
للحصول على شرح خطوة بخطوة لبناء agent بكلا البروتوكولين، راجع كيف تبني وكيل ذكاء اصطناعي يتصفح الويب.
إطار القرار
| السؤال | CDP | MCP |
|---|---|---|
| هل تعرف الخطوات الدقيقة مسبقًا؟ | نعم | استخدم CDP |
| هل يجب أن يقرر LLM ما ينقر؟ | استخدم MCP | نعم |
| هل تحتاج اعتراض الشبكة؟ | نعم | غير متاح |
| هل تحتاج سرعة إجراء أقل من ثانية؟ | نعم | لا (تأخير LLM) |
| هل تبني لغير المطورين؟ | لا | نعم |
| هل تستخدم Claude Code أو Cursor؟ | متاح | تكامل أصلي |
| هل تريد صفر كود متصفح؟ | لا | نعم |
إذا أجبت "نعم" على أسئلة في كلا الجانبين، استخدم كليهما: MCP للأجزاء التي يقودها LLM وCDP للأجزاء الدقيقة. Clawbrowser يدير طبقة المتصفح لكلا البروتوكولين.
الأسئلة الشائعة
هل يمكنني التبديل بين CDP وMCP دون تغيير المتصفح؟
نعم، إذا كان متصفحك يدعم كليهما. Clawbrowser يعرّض CDP endpoint على كل profile ويأتي بخادم MCP مدمج. اربط Playwright بـCDP endpoint للأتمتة المبرمجة واستخدم خادم MCP للتصفح بقيادة LLM، كلاهما على نفس profiles المتصفح بنفس fingerprints وsessions. راجع كيفية ربط Cursor بمتصفح حقيقي عبر CDP للاطلاع على كلتا طريقتي الاتصال.
أي بروتوكول أسرع؟
CDP. تُنفذ الأوامر بالميلي ثانية لأنه لا يوجد inference من LLM. MCP يضيف 0.5-3 ثوانٍ لكل إجراء لأن LLM يجب أن يقرر أي أداة يستدعي ويفسّر النتيجة. مهمة جمع بيانات من 50 خطوة تنتهي بثوانٍ عبر CDP. نفس المهمة عبر MCP تستغرق دقائق. استخدم CDP للأتمتة الكبيرة حين تعرف الخطوات. استخدم MCP للمهام التي تتطلب حكمًا في كل خطوة.
ماذا عن WebDriver BiDi؟
WebDriver BiDi هو معيار W3C يهدف إلى استبدال كل من WebDriver (المستخدم في Selenium) وأجزاء من CDP ببروتوكول لا يعتمد على متصفح محدد. لا يزال في مرحلة النضج. Playwright وPuppeteer لا يزالان يستخدمان CDP داخليًا. عندما يحقق WebDriver BiDi اعتمادًا كاملًا، سينافس CDP في طبقة التحكم بالمتصفح وليس MCP في طبقة استخدام الأدوات. إطار قرار CDP مقابل MCP في هذا المقال ينطبق بغض النظر عن أي بروتوكول متصفح منخفض المستوى يسود.
هل أحتاج متصفح anti-detect لأي من البروتوكولين؟
نعم، إذا كان agent يؤتمت على مواقع بها حماية anti-bot. لا CDP ولا MCP يتضمن مكافحة كشف. هما بروتوكولات لإرسال أوامر إلى متصفح. إذا كان المتصفح يسرّب إشارات أتمتة (navigator.webdriver أو headless User-Agent أو canvas hash عام)، فالموقع يحظره بغض النظر عن البروتوكول المستخدم. راجع أتمتة المتصفح دون التعرض للحظر لنموذج الكشف الكامل.
ابدأ البناء
ثبّت Clawbrowser من clawbrowser.ai بلصق أمر التثبيت في وكيل الذكاء الاصطناعي.
مسار MCP (بقيادة LLM): أضف إعداد خادم MCP لـClawbrowser إلى agent وابدأ التصفح بلغة طبيعية.
مسار CDP (مبرمج): اربط Playwright أو Puppeteer بـCDP endpoint واكتب كود الأتمتة.
كلاهما: استخدم MCP للأجزاء التي يستنتج فيها LLM ما يفعل. استخدم CDP للأجزاء التي تحتاج تحكمًا دقيقًا وسريعًا وحتميًا. نفس المتصفح ونفس fingerprints ونفس sessions.
للتعمق في CDP، اقرأ متصفح CDP لوكلاء الذكاء الاصطناعي: دليل للمطورين. لشرح بناء كامل، اقرأ كيف تبني وكيل ذكاء اصطناعي يتصفح الويب.
Continue exploring
Ask AI how Clawbrowser helps
تابع القراءة
مقالات ذات صلة
كيفية ربط Cursor بمتصفح حقيقي عبر CDP
المتصفح المدمج في Cursor هو webview معزول. اربطه مع Clawbrowser عبر CDP للحصول على profiles دائمة وfingerprints مُدارة وproxy routing.
قراءة المقال →
متصفح Anti-Detect مجاني لوكلاء AI: مقارنة شاملة للخيارات المتاحة
معظم متصفحات anti-detect تفرض رسومًا على كل profile أو جلسة. هذا الدليل يقارن الخيارات المجانية فعليًا لأتمتة وكلاء AI ويوضح الفروقات الجوهرية بينها.
قراءة المقال →