Las 3 MCPs que le faltan a tu Claude Code (si hiciste tu web con IA)
Si hiciste tu web con inteligencia artificial, lo más probable es que a tu Claude Code le falten tres MCPs. Y sin ellas está programando a ciegas: escribe código y reza. No ve tu web, no la prueba y no sabe si la función que está usando existe en la versión que tú tienes instalada. Estas tres lo arreglan, son gratis y se instalan en un minuto. Al final tienes el prompt listo para copiar y pegar, para que Claude Code se las instale solo.
¿Qué es una MCP y por qué le cambia la vida a Claude Code?
Una MCP (Model Context Protocol) es un conector que le da a la IA acceso a herramientas reales. No es un plugin de adorno: es la diferencia entre un modelo que solo escribe texto y uno que puede leer documentación actualizada, abrir un navegador, medir el rendimiento de tu web o rellenar un formulario para comprobar que de verdad funciona.
Sin MCPs, Claude Code trabaja con lo que tiene en la cabeza: su entrenamiento, que tiene fecha de caducidad, y los archivos de tu proyecto. Con MCPs, trabaja con el mundo real.
Y ojo con esto, porque es el fallo que más veo en webs hechas con IA: el código puede estar escrito y aun así no funcionar. Escribir no es funcionar. Estas tres MCPs cubren justo ese hueco.
1. Context7: para que la IA deje de inventarse funciones
Context7 le mete a Claude Code la documentación oficial y actualizada de cada librería que uses. Se acabó que se invente una función que no existe o que te escriba código de una versión de hace dos años.
¿Te ha pasado que la IA te propone un import que no existe? ¿O que usa una sintaxis que estaba bien en la versión 3, pero tú tienes la 5 instalada? Eso es alucinación, y no es que la IA sea tonta: es que está tirando de memoria en lugar de mirar la documentación. Como un mecánico que arregla tu coche de memoria en vez de abrir el manual de tu modelo concreto.
Context7 consulta la documentación real en el momento en que hace falta. El resultado en la práctica:
- Menos código que se rompe en la primera ejecución.
- Menos ciclos de «esto falla» → «perdón, prueba así» → «también falla».
- Configuraciones correctas para tu versión, no para una genérica.
Es la MCP más aburrida de las tres y probablemente la que más tiempo te ahorra.
2. Chrome DevTools: para que vea tu web de verdad
Chrome DevTools abre tu web en un navegador real y deja que Claude Code vea por qué va lenta, qué error sale en consola y qué petición está fallando. No adivina el problema: lo mide.
Esta es la que te salva cuando algo funciona en teoría y en la pantalla no. Con esta MCP, Claude Code puede:
- Leer los errores de consola en vivo, en vez de que se los copies tú a mano.
- Ver las peticiones de red: cuál devuelve 404, cuál 500, cuál tarda tres segundos.
- Medir el rendimiento real y las Core Web Vitals, que es justo donde suelen morir las webs generadas con IA (te lo conté en detalle en por qué tu web hecha con IA carga lenta).
- Inspeccionar el DOM y los estilos que se están aplicando de verdad, no los que «deberían» aplicarse.
Es el mecánico que abre el capó y mira el motor por dentro, en lugar de opinar desde fuera escuchando el ruido.
3. Playwright: para que pruebe tu web como un usuario
Playwright deja que Claude Code recorra tu web entera como lo haría una persona: navega, hace clic, rellena formularios y comprueba que el resultado es el que esperabas.
Le puedes decir literalmente: «rellena el formulario de contacto con datos de prueba, envíalo y comprueba que sale la página de gracias». Y lo hace. Solo. Sin que tú abras el navegador.
Lo que cubre bien:
- Flujos completos: registro, login, checkout, formulario de contacto.
- Regresiones: comprobar que lo que funcionaba la semana pasada sigue funcionando después del último cambio.
- Comportamiento en distintos tamaños de pantalla, que es donde se cae media web hecha a prisa.
Aquí está el punto que casi nadie entiende: si la IA te montó la web pero nadie ha probado el formulario de contacto de punta a punta, no sabes si te están llegando los mensajes. Y un formulario roto en silencio es la forma más cara de perder clientes.
¿Cuál es la diferencia entre Chrome DevTools y Playwright?
Se confunden mucho porque las dos abren un navegador, pero hacen cosas distintas y se complementan:
- Chrome DevTools te dice por qué falla. Es diagnóstico: consola, red, rendimiento, estilos. La usas cuando algo va mal y quieres la causa.
- Playwright comprueba que todo funciona. Es verificación: recorre el flujo como un usuario y confirma el resultado. La usas para asegurarte de que nada se ha roto.
Una mide, la otra prueba. Con las dos, Claude Code deja de suponer.
Cómo instalar las tres MCPs en Claude Code
Tres comandos en tu terminal. El flag -s user las instala a nivel de usuario, así las tienes disponibles en todos tus proyectos y no solo en el que tengas abierto ahora:
claude mcp add context7 -s user -- npx -y @upstash/context7-mcp
claude mcp add chrome-devtools -s user -- npx chrome-devtools-mcp@latest
claude mcp add playwright -s user -- npx @playwright/mcp@latest
Para comprobar que han quedado bien instaladas:
claude mcp list
Deberías ver las tres en la lista. Si alguna aparece como fallida, lo más habitual es tener Node desactualizado: actualiza a la última versión LTS y vuelve a lanzarla.
El prompt para que Claude Code te las instale solo
Si no quieres tocar la terminal tú, abre Claude Code y pégale esto tal cual:
Instálame estas tres MCPs a nivel de usuario y verifica que funcionan:
1. Context7 (documentación actualizada de librerías):
claude mcp add context7 -s user -- npx -y @upstash/context7-mcp
2. Chrome DevTools (consola, red y rendimiento en un navegador real):
claude mcp add chrome-devtools -s user -- npx chrome-devtools-mcp@latest
3. Playwright (recorrer y probar la web como un usuario):
claude mcp add playwright -s user -- npx @playwright/mcp@latest
Después ejecuta `claude mcp list` y dime el estado de cada una.
Si alguna falla, diagnostica el motivo y arréglalo.
Cuando terminen de instalarse, reinicia Claude Code para que las cargue. A partir de ahí cambia la forma de trabajar: en vez de pedirle «hazme esta sección», puedes pedirle «abre la web, mira por qué el botón no responde y arréglalo». Y lo hace de principio a fin.
Conclusión
La IA escribe rápido, pero escribir no es funcionar. Sin estas tres MCPs, Claude Code produce código a ciegas y tú acabas haciendo de tester sin cobrarlo. Con ellas, consulta la documentación real, ve tu web en un navegador de verdad y comprueba que los flujos funcionan antes de decirte que ha terminado.
Context7 para que no alucine, Chrome DevTools para que diagnostique, Playwright para que verifique. Tres comandos, cero euros y un salto enorme en la calidad de lo que sale.
Esa es la diferencia entre el vibe coding y construir de verdad. Si vas en serio con tu proyecto, es el mínimo con el que deberías estar trabajando.
¿Prefieres que tu web la monte y la pruebe alguien que ya trabaja así? Calcula tu presupuesto orientativo o escríbenos directamente.
Artículos relacionados: