curso-claude-code / Correa larga / módulo 11
Claude Code · la biblia completa

Módulo 11 — MCP: enchúfalo a tu mundo

Al terminar este módulo, vas a conectarle a Claude una mano nueva — tu navegador — y ponerlo a auditar tu propia página.

En el módulo 10 le pusiste candados a tu empleado: qué firma solo, qué no, qué queda bajo llave. Hoy, con los candados puestos, le agrandamos las manos. Hasta ahora Claude solo podía leer archivos, escribir, teclear en tu terminal y buscar en internet. Eso es mucho — pero hay aparatos de tu oficina que esas manos de fábrica no alcanzan.

11.1 — Las manos de fábrica tienen límite

Piensa en todo lo que usa tu negocio que NO es un archivo en tu compu: tu página web corriendo de verdad en un navegador, tu base de datos de clientes, tu cuenta de correo. Las manos de fábrica de Claude no llegan ahí — no porque estén incompletas, sino porque cada uno de esos mundos tiene su propia cerradura y su propio idioma.

Podrías, claro, hacerlo a mano: abrir tú la página, copiar el texto, pegárselo a Claude. Funciona una vez. La tercera vez que repites ese copy-paste, algo anda mal — y ya sabes, desde el módulo 7, qué se hace cuando algo se repite igual todas las veces.

11.2 — MCP: el multicontacto universal

Existe un estándar — acordado entre las empresas de software, no inventado por una sola — para que a Claude le crezcan manos nuevas sin que nadie programe un cable especial cada vez. Se llama Model Context Protocol (protocolo de contexto de modelo); nadie lo dice completo, todos le dicen MCP.

🧠 ANALOGÍA CLAVE

MCP es el multicontacto universal. Tu casa trae enchufes de fábrica que te alcanzan para casi todo. Pero un día llega un aparato con otra clavija, y en vez de picar la pared para cablear de nuevo, usas un multicontacto: un estándar que cualquier fabricante respeta. MCP hace eso con las manos de Claude — cualquier empresa (o tú mismo, si algún día quieres) puede fabricar un "aparato" que se enchufa sin tocar cables.

A cada uno de esos aparatos se le llama server MCP. No es el cuarto lleno de máquinas que imaginas con esa palabra — es, sencillamente, el programita que le presta a Claude una mano nueva: "yo sé manejar un navegador", "yo sé hablar con esta base de datos", "yo sé mandar mensajes a tal app".

🧠 ANALOGÍA CLAVE

Un server MCP es un empleado externo con llaves. No lo escribiste tú — lo contratas de fuera — y en el momento en que lo enchufas, le estás dando acceso a algo tuyo: tu navegador, tus datos, tu cuenta. Útil, sí. Pero es de fuera, y trae llaves. Se elige con el mismo criterio con el que elegirías a un proveedor de verdad: ¿quién lo hizo, y qué tanto acceso necesita de verdad para hacer su trabajo?

Guárdate esa idea de las llaves — vuelve en la sección 11.6.

11.3 — Instalar tu primer MCP

Se agrega con un solo comando: claude mcp add. Vamos a enchufar el primero: Chrome DevTools, que le da a Claude ojos y manos dentro de tu navegador Chrome — puede abrir una página, leerla, hacer clic, tomar capturas.

👀 LO QUE VAS A VER

Teclea (o pega) esto (en tu terminal, FUERA de una sesión de Claude):

claude mcp add --transport stdio chrome-devtools -- npx chrome-devtools-mcp@latest

Vas a ver algo así:

Added stdio MCP server chrome-devtools with command: npx chrome-devtools-mcp@latest to local config
File modified: ~/.claude.json [project: ~/Curso-Claude]

Qué significa: registraste el server — el mensaje te confirma dónde quedó guardado (tu ~/.claude.json, atado a ESTE proyecto). --transport stdio quiere decir "corre en tu propia compu" (la forma más simple de instalar); chrome-devtools es el nombre que le pusiste; todo lo que sigue al -- es el comando real que lo enciende — en este caso, bajarlo con npx, el mismo instalador que usan mil herramientas; no necesitas entenderlo más que eso.

Si en vez de eso ves un error mencionando npx o node: te falta Node.js instalado — requisito silencioso de este tipo de servers. Instálalo (busca "instalar Node.js" + tu sistema operativo) y reintenta el mismo comando.

Algunos servers no corren en tu compu sino en la nube del proveedor (--transport http en vez de stdio), y la primera vez te van a pedir iniciar sesión con ese servicio — eso es OAuth: le das permiso a un servicio de compartir datos con Claude sin regalarle tu contraseña, igual que cuando entras a una app con "continuar con Google". Se abre el navegador, aceptas, y Claude Code guarda el permiso para la próxima.

🚀 NIVEL PRO

Si esto te suena a chino, bríncatelo: no lo necesitas para seguir. Un MCP se puede guardar en tres lugares (scopes): local (solo tú, solo este proyecto — el default), user (tú, en TODOS tus proyectos) y project (.mcp.json, se sube a git y lo ve todo tu equipo). Para que te acompañe a cualquier carpeta donde trabajes, agrega --scope user al comando de instalación. Confirmado en vivo: si el mismo nombre de server queda registrado en dos scopes a la vez (por ejemplo, lo instalaste suelto en un proyecto y ya lo tenías en user), Claude Code lo nota solo y te avisa "Conflicting scopes" con el comando exacto para quitar el que sobra — no falla en silencio.

11.4 — Ver lo conectado: /mcp y las herramientas nuevas

Entra a Claude Code (claude) y revisa qué quedó enchufado:

👀 LO QUE VAS A VER

Teclea (o pega) esto (dentro de Claude Code):

/mcp

Vas a ver algo así:

MCP Servers
  ⚫ chrome-devtools   connected   12 tools
  (add a server…)

Qué significa: el punto (⚫) dice que el server está vivo y respondiendo; el número son las herramientas nuevas que le crecieron a Claude — "abrir página", "hacer clic", "tomar captura", etc. Cada una se llama por dentro mcp__chrome-devtools__loquesea — no lo memorices, es solo para que la reconozcas si la ves algún día en una pregunta de permiso.

Si en vez de eso ves ✗ failed junto al nombre: cierra la sesión (/exit) y vuelve a entrar — los MCP se conectan al arrancar. Si sigue fallando, revisa tu internet y reintenta el comando de instalación.

[CAPTURA: m11-mcp-panel — el panel /mcp con chrome-devtools conectado]

Desde ahora, cuando le pidas algo que necesite esa mano nueva, Claude la va a usar sola — y te va a pedir permiso la primera vez, exactamente como cualquier otra herramienta (módulo 10).

11.5 — Los dos de la casa: Chrome DevTools y Supabase

Dos servers concretos, para que veas el rango de lo que un MCP puede prestar:

Ninguno de los dos lo programaste tú, ni falta que lo hagas: los mantiene el fabricante (el equipo de Chrome, en el primero; Supabase, en el segundo) y tú solo los enchufas.

11.6 — Antes de enchufar: revisa quién es

¿Te acuerdas de las instrucciones escondidas en el paquete, del módulo 10? Un MCP que trae contenido de fuera — una página web, un correo, un texto que no escribiste tú — puede traer exactamente ese riesgo. La documentación oficial de Anthropic lo dice sin rodeos:

"Verify you trust each server before connecting it. Servers that fetch external content can expose you to prompt injection risk."
"Verifica que confías en cada servidor antes de conectarlo. Los servidores que traen contenido externo te pueden exponer a riesgo de instrucciones escondidas."

Y la recomendación oficial es igual de directa:

"Read-only servers first. Servers from Anthropic Directory are reviewed. Custom or community servers: verify source code before connecting."
"Primero los servers de solo lectura. Los del Directorio de Anthropic ya fueron revisados. Los de terceros o comunidad: revisa el código fuente antes de conectarlos."
⚠️ REGLA QUE NUNCA DEBES OLVIDAR

Server nuevo = read-only primero. La primera vez que enchufas un MCP, dale permiso de MIRAR (leer, navegar, consultar) y nada de ESCRIBIR (editar, borrar, mandar). Si con el tiempo confías en él y de verdad necesitas que también actúe, se lo das a propósito — no de entrada.

Y la pregunta que te ahorra instalar cosas de más: si Claude ya lo puede hacer con sus manos de fábrica (leer un archivo, teclear un comando, buscar en la web), no necesitas un MCP — el multicontacto es para lo que de plano no alcanzan.

🪤 AQUÍ SE ATORA LA GENTE

Síntoma: "Instalé el MCP y cuando le pido que lo use, Claude dice que no tiene esa herramienta."

Causa: el server quedó agregado pero no conectado en ESTA sesión, o lo instalaste con scope local y ahora trabajas desde otra carpeta.

Salida: corre /mcp y revisa el estatus; si no dice connected, sal (/exit) y vuelve a entrar. Si trabajas desde varias carpetas, reinstálalo con --scope user (caja NIVEL PRO de la sección 11.3).

🪤 AQUÍ SE ATORA LA GENTE

Síntoma: "Cada vez que usa la herramienta del navegador me pregunta permiso, hasta para lo mismo."

Causa: todavía no está en tu lista de permitidos — normal la primera vez que usas un server nuevo.

Salida: cuando te pregunte, elige "don't ask again" si confías en esa acción específica, o dile "agrega esa herramienta a mi allowlist" — mismo mecanismo del módulo 10, solo que ahora la regla empieza con mcp__.

ASÍ LO USAMOS EN SPAI

🫘 ASÍ LO USAMOS EN SPAI

En SmartProcess, Chrome DevTools y Supabase son los dos MCP de uso diario, no un experimento. Cuando un skill de la casa termina de construir una página o una app, usa Chrome DevTools para ABRIRLA de verdad y revisar que se vea bien y que la consola no marque errores — en vez de confiar en "debería funcionar". Y Supabase MCP es la forma en que se consulta o ajusta una base de datos de un proyecto sin salir de la terminal ni abrir un panel aparte. Mismo patrón que hoy instalaste tú, a escala de agencia.

HAZLO TÚ — Tu empleado ya tiene navegador

🔧 HAZLO TÚ

Qué vas a lograr: una auditoría real de una página web, hecha por Claude viendo la página de verdad — no adivinando por el nombre.

Qué necesitas: el MCP de Chrome DevTools instalado (11.3) y el seed ejercicios/m11/README.md (trae la URL de una página demo de la casa por si no quieres usar la tuya todavía).

Pasos:

  1. Si no lo hiciste en 11.3, instala el MCP (mismo comando de esa sección) y confirma con /mcp que diga connected.
  1. Decide qué página auditar: la tuya, la de un conocido, o la demo pública de la casa — https://smartprocess-guia-claude.pages.dev.
  1. Pídeselo en español normal:
Abre [tu URL o la demo], recórrela completa, y dame un archivo auditoria-web.md con: textos que no se entienden a la primera, ligas rotas si las hay, qué mejorarías de la estructura, y cómo se ve en pantalla chica (móvil). Es una auditoría de SOLO LECTURA: no llenes formularios ni des clics de compra.
  1. Claude va a pedirte permiso para usar el navegador — la primera vez, por cada acción nueva (abrir, navegar, capturar). Lee y firma.
  1. Cuando termine, abre auditoria-web.md y entra TÚ a la página a comprobar al menos un hallazgo con tus propios ojos.

¿LO LOGRASTE?

  • Existe auditoria-web.md con al menos 3 hallazgos concretos (no genéricos).
  • Comprobaste al menos 1 hallazgo abriendo la página tú mismo.
  • Viste a Claude usar la herramienta del navegador (no solo describir la página de memoria).
✓ ¿TE LO LLEVAS?
  1. ¿Qué diferencia hay entre las manos de fábrica de Claude y las que le da un MCP?
  2. Antes de enchufar un server nuevo, ¿qué dos preguntas te tienes que hacer?
  3. ¿Cuándo NO te conviene instalar un MCP, aunque exista uno para lo que quieres?
📖 GLOSARIO

MCP — el multicontacto: el estándar que le enchufa a Claude manos nuevas (navegador, bases de datos) sin programar.

server (MCP) — el empleado externo con llaves que le presta esa mano nueva a Claude; lo hace un tercero, tú lo enchufas.

OAuth — darle permiso a un servicio de compartir tus datos con Claude sin regalarle tu contraseña.

🎓 CÓMO LO ENSEÑAS

La demo de 5 minutos: instala Chrome DevTools EN VIVO, pídele a Claude que abra la página del propio curso (o la demo) y que señale UN error real frente al grupo — nada convence más que ver a Claude "mirar" una página como persona.

El error que el alumno VA a cometer: olvidar cerrar y reabrir la sesión después de instalar el MCP, y asustarse porque "no tiene la herramienta". Provócalo a propósito: instala, sin reiniciar pide que la use, deja que falle, muestra el /exit + reentrar como solución.

La pregunta de arranque: "¿qué parte de tu chamba vive FUERA de archivos y carpetas — en una página, una base de datos, una app — que hoy tienes que revisar a mano?"


Verificado contra documentación oficial el 2026-07-12.