Aunque uso Claude Code casi cada día, una de las áreas que apenas he explorado es la conexión vía MCP con otros servicios.
Hoy veremos cómo se comporta Claude Code como cliente MCP (aunque ya hablé de MCP en su día), conectando con dos de los servicios más utilizados en el mundo tech para crear un pequeño sistema de code/UI review automatizado.
¿Qué es MCP?
MCP es un protocolo (creado por la propia Anthropic) que permite conectar Claude con miles de herramientas y servicios externos. A diferencia de una API tradicional, que puede tener su propia superficie y estructura, MCP normaliza el acceso a través de una interfaz común. De esta forma puedes usar el mismo protocolo con servicios tan diferentes como Docker, GitHub o Notion.
MCP es importante porque te permite extender tu workflow con IA e incorporar herramientas reales en tiempo real, sin salir del entorno conversacional. No es una API más: es una capa de integración directa con tu stack.
¿Por qué debes aumentar tu workflow con MCP?
Porque Claude, por sí solo, no sabe hacer nada. Lo que tiene es contexto y criterio.
Pero no tiene acceso a tu base de datos, a tus errores en Sentry, a tus archivos locales, a tus deployments, ni a tus diseños en Figma. MCP le da brazos.
Usar Claude Code sin MCP es como tener un jefe de proyecto encerrado en una sala sin puertas ni ventanas. MCP rompe ese aislamiento y convierte a Claude en un auténtico orquestador.
Además:
- Es más seguro que permitir acceso directo: tú defines los servidores y su alcance.
- Es reproducible: puedes versionar tus
.mcp.jsonpor proyecto. - Es delegable: puedes encapsular comandos como prompts y slash commands [LINK] (luego te enseñaré a hacerlo).
- Es ampliable: si no existe el servidor, puedes crearlo tú mismo con el SDK.
Si subagentes cambian el “cómo piensa” Claude, MCP cambia el “con qué puede trabajar”.
Tipos de servidores MCP
Lo primero es que le eches un vistazo a su documentación, donde lo explican de maravilla. En esencia hay dos formas de “instalar” servidores MCP para que Claude pueda usarlos.
Aunque hay miles de servidores MCP disponibles, todos se agrupan en al menos estas dos categorías.
Local servers
Son los que necesitan acceso a tus archivos y procesos locales, por lo que correrán como tal en tu máquina de desarrollo. Hablando de e2e, tanto Puppeteer como Playwright necesitan acceso a tus procesos para utilizar un navegador y a tus archivos para, por ejemplo, guardar un screenshot.
Remote servers
Los servidores remotos alojan toda su infraestructura en otro lugar y ofrecen una interfaz para que tu cliente MCP (en este caso Claude Code) pueda interactuar con ellos. Aquí entran la mayoría de herramientas y servicios que todo developer conoce: Linear, JIRA, GitHub, Notion, etc.
Cómo instalar servidores MCP con Claude Code
Para esta demo usaremos dos tipos de servidores MCP:
- Uno remoto, como el de Notion, que se conecta por HTTP y requiere autenticación.
- Uno local, como Playwright, que corre en tu máquina como proceso stdio y necesita acceso al navegador.
Conectar Claude Code con Playwright (local)
Microsoft Playwright requiere que el servidor corra en tu máquina porque necesita acceso a tu navegador local para ejecutar pruebas E2E, sacar screenshots, etc.
Te recomiendo que le eches un vistazo a la documentación de su servidor MCP.
El comando se parece a esto:
claude mcp add playwright -- npx @playwright/mcp@latest
Y recibirás una confirmación parecida a esta:
# Added stdio MCP server playwright with command: npx @playwright/mcp@latest to local config
# File modified: **/Users/juan.nunez/.claude.json** [project: /Users/juan.nunez/Desktop/vue-project]
Esto es vital porque, si te fijas, indica dónde ha guardado la información del servidor MPC instalador: .claude.json de mi directorio de usuario, es decir, user scope. De esta forma podré usar Playwright en cualquier proyecto.
Por supuesto puedes modificar el scope de las conexiones MCP con Claude Code usando el flag --scope user o --scope project a la hora de realizar la instalación.
Conectar Notion con Claude Code (remoto)
En el caso de Notion, la solución no es tan simple. Tras probar lo que sugiere la documentación oficial de Claude Code acabé con una conexión muerta que era incapaz de autentificar con mi cuenta de Notion.
La propia documentación de Notion sobre MCP tampoco ayuda, ya que no incluye Claude Code como cliente MCP.
Si vas de listo/a (como yo) y piensas, “bueno, puedo usar Claude desktop y luego exportar los datos” te vas a llevar otra sorpresa: NO funciona ya que Notion MCP no deja trazas en claude_desktop_config.json:
{
"mcpServers": {}
}
¿Qué hacer entonces?. Indagando me encontré con este artículo 🙏 que sugiere una dirección diferente. Esta si funcionó.
- Ve a la página de integraciones de tu cuenta de Notion.
- Crea una nueva Internal integration.
- En Configuration asigna las capabilities que necesites.
- Importante: no olvides ir a Access y dar acceso a tu integración a, al menos, una página de workspace en Notion (o a todas).
Con todo ello tendrás un token/secret que podrás usar para autentificar todas las peticiones al servidor MCP de Notion. Cópialo, te va hacer falta para construir el comando:
claude mcp add notion \
--env 'OPENAPI_MCP_HEADERS={"Authorization":"Bearer ntn_xxx","Notion-Version":"2022-06-28"}' \
-- npx -y @notionhq/notion-mcp-server
Por supuesto, cambia ntx_xxx por tu token, y dale a Enter. Ahora deberías tener ambos servidores conectados. Claude Code puede :
- Sacar screenshots usando el navegador con Playwright.
- Escribir y guardar reportes en una base de datos viva en Notion.
Para salir de dudas accede a Claude Code y usa el comando /mcp, tu salida debería ser parecida o incluir esto:
Demo time
Esto es lo que vamos a usar para jugar con MCP y Claude Code.
graph LR
User --> A[Claude Code Command]--> B[Review Process]
B <--> |Screenshot| C[Playwright MPC]
B --> |Report| D[Notion MPC]
- Crearemos un —muy básico— sistema automatizado de UX/code review.
- A través de un custom command le daremos las instrucciones a Claude.
- Claude entonces usará Playwright para tomar una captura de nuestro trabajo (por ejemplo, una vista/componente).
- Claude lo comparará con la imagen de control.
- Continuando, Claude analizará las semejanzas/diferencias a nivel UI, así como la estructura y lógica internal.
- Para finalizar, Claude generará un reporte que guardará en la página de tu workspace de Notion que prefieras.
Creando un comando personalizado
Esta es una de mis características favoritas de Claude Code (de nuevo, ya he hablado comandos personalizos y Claude Code) y la uso extensivamente.
En esencia se trata de agrupar instrucciones en un archivo (Markdown, ./claude/commands/review-component.md) para poder enviarlas repetidas veces al modelo a través de un comando (/review-component).
Acepta argumentos a través de $ARGUMENTS e incluso puedes usar placeholders Bash-style con $1, $2, $N. La documentación es bastante buena.
Este es el comando (review-component.md):
I want you to review my component from a markup, logic and UI level.
The component is located here: $1
You can see it live if you use the Playwright MCP server to open: $2
And you can compare with the desired result using this reference image: $3
Do the following:
1. Use Playwright to take a screenshot of the live component.
2. Compare it to the reference image and assess visual accuracy.
3. Analyze the source component for:
- HTML structure and semantic correctness.
- JavaScript / TypeScript logic quality.
- UI/UX quality and adherence to modern Tailwind CSS conventions.
4. Write a succinct but professional analysis covering markup, logic and visual output.
5. Save the report as a new entry in the ScratchPad page in Notion via the Notion MCP server.
Use expert-level vocabulary. Avoid generic feedback. Output must be directly actionable.
Utilizando el comando
Una vez guardes el archivo Markdown el comando estará listo para utilizar con Claude Code. Ahora solo tienes que proveer los argumentos.
En este ejemplo lo hice correr un sobre un pequeño proyecto Vue.js.
/review-component @src/components/ProfileCard.vue http://localhost/5114 [Image]
Donde:
/review-componentes la invocación al comando personalizado que hemos creado ($1).@src/components/ProfileCard.vuees la ruta al artefacto (componente, vista, etc) que queremos validar ($2).[Image]es la imagen de control sobre la que queremos comparar nuestro artefacto ($3).
Resultado
Al ejecutar el comando verás como Claude comienza a procesar la información y a realizar su análisis. Es probable que te pida autorización en cada interacción diferente con los servidores MCP, pero ya sabes cómo modificar los permisos a la hora de trabajar con Claude Code (enlace a mi guía de Claude Code.
Al finalizar tendrás un reporte en la página de tu Notion workspace que hayas elegido. Algo parecido a esto.
Cómo expandirlo
Como has podido comprobar, este ejemplo solo es la punta del iceberg. Dicho de otra forma: se puede hacer mucho —muchísimo más— con las herramientas que ofrece Claude Code.
Todo depende de tu situación, circunstancias, objetivo y workflow, pero ahí van algunas ideas.
- Detalla mucho más el prompt (aquí tienes una pequeña guía sobre prompting AI para recibir feedback sobre áreas específicas, o usando una tecnología clave, etc
- Pide a Claude que califique el artefacto de 0 a 10 y que adjunte una imagen de comparación entre el resultado y la imagen control.
- Si quieres llevar esto un poco más allá, puedes modificar todo el proceso y hacerlo más o menos mandatory cada vez que haya incorporación de cambios en tu base de código (pre-commit hook).
- Incluso puedes darle la opción a Claude de “corregir” el artefacto para que se parezca al modelo. Se trata de una iteración entre capturar imagen → corregir. Yo mismo lo he probado y es un worfklow bastante interesante.
Conclusión
El protocolo MCP no es otra integración más: es una forma de desbloquear ejecución real desde el entorno conversacional. Claude deja de ser un observador y se convierte en parte activa de tus herramientas.
Esto, combinado con la modularidad de los subagentes y la potencia de los comandos personalizados, crea un nuevo paradigma: componer automatización inteligente desde tu prompt.