Dos protocolos dominan el control de navegador con IA: CDP (Chrome DevTools Protocol) y MCP (Model Context Protocol). Resuelven problemas distintos en capas distintas, pero los desarrolladores que construyen agentes de navegador a menudo los confunden o eligen el incorrecto para su caso de uso. Esta guía desglosa qué hace cada protocolo, cuándo usar cuál y cómo funcionan juntos en un stack de agentes en producción.
TL;DR: CDP da a tu agente control directo de bajo nivel sobre un navegador a través de una conexión WebSocket. MCP da a tu LLM herramientas de navegador de alto nivel a través de una interfaz estandarizada de tool-use. CDP es el motor; MCP es el volante. La mayoría de los agentes AI en producción necesitan ambos: MCP para que el LLM decida las acciones y CDP por debajo para que el navegador funcione. Clawbrowser soporta ambos de forma nativa.
Nota: "CDP" en este artículo se refiere a Chrome DevTools Protocol, el estándar de control de navegador.
Qué son realmente CDP y MCP
CDP: Chrome DevTools Protocol
CDP es un protocolo basado en WebSocket para controlar navegadores Chromium de forma programática. Google lo creó para Chrome DevTools (el inspector que abres con F12), pero se convirtió en el estándar para automatización de navegador. Playwright, Puppeteer y todas las bibliotecas de automatización importantes usan CDP internamente.
Cuando llamas a page.goto() en Playwright, envía un comando CDP por WebSocket al navegador. CDP ofrece control granular: navegar páginas, ejecutar JavaScript, interceptar peticiones de red, manipular cookies y capturar 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")Para la guía completa de CDP, consulta Navegador CDP para agentes AI: guía para desarrolladores.
MCP: Model Context Protocol
MCP es un protocolo que estandariza cómo los LLMs se conectan a herramientas externas. En vez de escribir definiciones de function-call personalizadas para cada herramienta, el LLM descubre las herramientas disponibles a través de un MCP server y las llama usando una interfaz estándar.
Para el control de navegador, un MCP server expone acciones como navigate, click, type, screenshot y extract como herramientas que el LLM puede invocar. El LLM decide qué herramienta llamar según la tarea. Sin código Playwright, sin selectores CSS, sin definiciones de herramientas personalizadas en tu agente.
{
"mcpServers": {
"clawbrowser": {
"command": "clawctl",
"args": ["mcp", "serve"]Añade esa configuración a Claude Code, Cursor, Gemini CLI o cualquier agente compatible con MCP. El LLM obtiene herramientas de navegador al instante.
Por qué se confunden
Ambos protocolos conectan un agente AI a un navegador. Ambos usan la palabra "protocolo". Ambos aparecen en las mismas conversaciones sobre infraestructura de agentes AI. Pero operan en capas diferentes:
- CDP es un protocolo a nivel de navegador. Habla con Chromium.
- MCP es un protocolo a nivel de aplicación. Habla con LLMs.
Un MCP server de navegador usa CDP internamente para controlar el navegador. No son alternativas. Son capas del mismo stack.
Comparación directa
| CDP (Chrome DevTools Protocol) | MCP (Model Context Protocol) | |
|---|---|---|
| Creado por | Google (equipo de Chrome) | Anthropic |
| Tipo de protocolo | Control de navegador (WebSocket) | Uso de herramientas (stdio/SSE) |
| Quién lo llama | Tu código (Playwright, Puppeteer, WebSocket directo) | Un LLM (Claude, GPT, Gemini) |
| Nivel de control | Bajo nivel: DOM, red, ejecución JavaScript, cookies | Alto nivel: navigate, click, type, screenshot, extract |
| Configuración | Conectar al puerto de depuración del navegador | Configurar un MCP server en tu agente |
| Flexibilidad | Total: todo lo que el navegador puede hacer | Limitada a las herramientas que el server expone |
| Velocidad por acción | Milisegundos (sin inferencia) | 0,5–3 segundos (el LLM decide cada paso) |
| Manejo de errores | Tu código gestiona los errores | El LLM razona sobre los errores |
| Anti-detection | No incluido (depende del navegador) | No incluido (depende del navegador) |
| Ideal para | Automatización con scripts, control fino, desarrollo de frameworks | Navegación guiada por LLM, tareas abiertas, prototipado rápido |
Ninguno de los protocolos incluye anti-detection. Eso es un problema a nivel de navegador, no de protocolo. Una instancia de Chrome estándar conectada vía CDP o a través de un MCP server filtra las mismas señales de automatización. La anti-detection requiere una solución a nivel de engine como Clawbrowser: fingerprints gestionados en más de 20 superficies, proxy routing integrado y supresión de señales CDP a nivel del código fuente de Chromium.
Cuándo usar CDP
Usa CDP cuando necesites control preciso y programático sobre el navegador y conozcas los pasos exactos de antemano.
Escenarios donde CDP gana:
- Scraping estructurado. Sabes qué selectores apuntar, qué datos extraer y cómo manejar la paginación. Tu código ejecuta los mismos pasos cada vez.
- Intercepción de red. Necesitas bloquear recursos, modificar headers de petición, capturar respuestas de API o inyectar JavaScript antes de que cargue la página.
- Condiciones de espera complejas. Necesitas esperar a elementos DOM específicos, estados de red idle o cambios en variables JavaScript antes de actuar.
- Automatización crítica en rendimiento. Los comandos CDP se ejecutan en milisegundos. Sin delay de inferencia LLM por acción. Un trabajo de scraping de 50 pasos que tarda segundos con CDP tardaría minutos con razonamiento LLM por paso.
- Desarrollo de frameworks. Estás construyendo un framework de agentes, un test harness o una biblioteca de automatización que otros usarán.
# 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")El compromiso: tú escribes y mantienes todo el código de integración con el navegador. Cada selector, cada condición de espera, cada manejador de errores. Cuando la estructura de la página cambia, tu código se rompe.
Cuándo usar MCP
Usa MCP cuando el LLM deba decidir qué hacer a continuación basándose en lo que ve en la página.
Escenarios donde MCP gana:
- Navegación abierta. "Encuentra la página de precios y extrae los detalles de los planes." El agente navega, lee la página y decide dónde hacer clic sin selectores hardcodeados.
- Workflows de varios pasos con criterio. "Inicia sesión, comprueba si hay una factura nueva, descárgala si el importe supera los 500 $." El LLM maneja la lógica condicional leyendo el contenido de la página en cada paso.
- Prototipado rápido. Quieres un agente de navegador en cinco minutos sin escribir código Playwright. Añades la configuración MCP, describes la tarea y listo.
- Usuarios no técnicos. El operador del agente describe tareas en lenguaje natural. No se necesita código.
- Entornos nativos para agentes. Claude Code, Cursor y Gemini CLI ya hablan MCP. Añadir un navegador es un solo bloque de configuración.
# 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()El compromiso: menos precisión. El LLM puede hacer clic en el elemento equivocado, dar pasos de más o leer mal el contenido de la página. Cada acción conlleva latencia de inferencia LLM. No puedes interceptar peticiones de red ni inyectar JavaScript a través de herramientas MCP estándar de navegador.
Cuándo usar ambos juntos
Aquí es donde terminan la mayoría de los agentes AI en producción. MCP gestiona la interfaz LLM-a-agente. CDP gestiona la interfaz agente-a-navegador. El MCP server se sitúa entre ambos, traduciendo llamadas de herramientas de alto nivel en comandos de navegador de bajo nivel.
LLM ← MCP → MCP Server ← CDP → Browser
(clawctl) (Clawbrowser)El LLM envía llamadas de herramientas MCP ("navega a esta URL", "haz clic en el botón de login"). El MCP server las traduce en comandos CDP y los envía al navegador. Los resultados fluyen de vuelta por la cadena.
Por qué importa la capa del navegador
La mayoría de los MCP servers de navegador se conectan a una instancia estándar de Chrome vía CDP. El navegador no tiene gestión de fingerprint, proxy routing ni anti-detection. Tu agente funciona en sitios de demo pero se bloquea en webs de producción detrás de Cloudflare, DataDome o Akamai.
El MCP server integrado de Clawbrowser se conecta a su propio motor Chromium. Cuando el LLM llama a navigate, el MCP server envía un comando CDP a un navegador que ya tiene fingerprints gestionados, proxy routing geo-alineado y supresión de señales CDP a nivel de engine. Sin plugins stealth, sin middleware de proxy, sin código de rotación de fingerprints.
Ruta MCP (guiada por LLM, sin código de integración):
{
"mcpServers": {
"clawbrowser": {
"command": "clawctl",
"args": ["mcp", "serve"]Ruta CDP (con scripts, control total):
browser = await playwright.chromium.connect_over_cdp(
"http://127.0.0.1:9222"
)Ambas rutas se conectan a la misma instancia de Clawbrowser con los mismos fingerprints, proxy routing y anti-detection. Elige la interfaz que se ajuste a tu caso de uso. Usa ambas en el mismo proyecto cuando diferentes partes del workflow necesiten diferentes niveles de control.
Para un tutorial paso a paso construyendo un agente con ambos protocolos, consulta Cómo construir un agente AI que navega la web.
Framework de decisión
| Pregunta | CDP | MCP |
|---|---|---|
| ¿Conoces los pasos exactos de antemano? | Sí | Usa CDP |
| ¿Debe el LLM decidir dónde hacer clic? | Usa MCP | Sí |
| ¿Necesitas intercepción de red? | Sí | No disponible |
| ¿Necesitas velocidad de acción inferior a un segundo? | Sí | No (latencia LLM) |
| ¿Estás construyendo para no desarrolladores? | No | Sí |
| ¿Usas Claude Code o Cursor? | Disponible | Integración nativa |
| ¿Quieres cero código de navegador? | No | Sí |
Si respondiste "sí" a preguntas de ambos lados, usa ambos: MCP para las partes guiadas por LLM y CDP para las partes de precisión. Clawbrowser gestiona la capa de navegador para cualquiera de los protocolos.
FAQ
¿Puedo cambiar entre CDP y MCP sin cambiar de navegador?
Sí, si tu navegador soporta ambos. Clawbrowser expone un endpoint CDP en cada perfil e incluye un MCP server integrado. Conecta Playwright al endpoint CDP para automatización con scripts y usa el MCP server para navegación guiada por LLM, ambos contra los mismos perfiles de navegador con los mismos fingerprints y sesiones. Consulta Cómo conectar Cursor a un navegador real vía CDP para una guía de ambos métodos de conexión.
¿Qué protocolo es más rápido?
CDP. Los comandos se ejecutan en milisegundos porque no hay inferencia LLM involucrada. MCP añade 0,5–3 segundos por acción porque el LLM debe decidir qué herramienta llamar e interpretar el resultado. En un trabajo de scraping de 50 pasos, CDP termina en segundos. El mismo trabajo por MCP tarda minutos. Usa CDP para automatización masiva donde conoces los pasos. Usa MCP para tareas que requieren criterio en cada paso.
¿Qué pasa con WebDriver BiDi?
WebDriver BiDi es un estándar W3C que busca reemplazar tanto WebDriver (usado por Selenium) como partes de CDP con un protocolo agnóstico al navegador. Todavía está madurando. Playwright y Puppeteer siguen usando CDP internamente. Cuando WebDriver BiDi alcance adopción plena, competirá con CDP en la capa de control de navegador, no con MCP en la capa de tool-use. El framework de decisión CDP-vs-MCP de este artículo aplica independientemente de qué protocolo de navegador de bajo nivel prevalezca.
¿Necesito un navegador anti-detect para cualquiera de los protocolos?
Sí, si tu agente automatiza en sitios con protección anti-bot. Ni CDP ni MCP incluyen anti-detection. Son protocolos para enviar comandos a un navegador. Si el navegador filtra señales de automatización (navigator.webdriver, User-Agent headless, hash de canvas genérico), el sitio lo bloquea sin importar qué protocolo uses. Consulta Automatización de navegador sin ser bloqueado para el modelo de detección completo.
Empieza a construir
Instala Clawbrowser desde clawbrowser.ai pegando el prompt de instalación en tu agente AI.
Ruta MCP (guiada por LLM): añade la configuración del MCP server de Clawbrowser a tu agente y empieza a navegar en lenguaje natural.
Ruta CDP (con scripts): conecta Playwright o Puppeteer al endpoint CDP y escribe tu código de automatización.
Ambas: usa MCP para las partes donde el LLM razona sobre qué hacer. Usa CDP para las partes donde necesitas control preciso, rápido y determinista. Mismo navegador, mismos fingerprints, mismas sesiones.
Para la guía completa de CDP, lee Navegador CDP para agentes AI: guía para desarrolladores. Para un tutorial completo, lee Cómo construir un agente AI que navega la web.
Continue exploring
Ask AI how Clawbrowser helps
Sigue leyendo
Artículos relacionados
Cómo conectar Cursor a un navegador real vía CDP
El navegador integrado de Cursor es un webview aislado. Conecta Cursor a Clawbrowser vía CDP para usar perfiles persistentes, fingerprints gestionados y proxy routing.
Leer artículo →
Navegador CDP para agentes de IA: Una guía para desarrolladores
Chrome DevTools Protocol es la forma estándar de los agentes de inteligencia artificial control de los navegadores. Chrome estándar se detecta. Aquí es cómo conectar su agente a un navegador CDP que no se bloquea.
Leer artículo →