Playwright, Notion y Linear como MCPs en Claude Code

Contenido del curso

No sé dónde empezar

Módulo 1: Discovery-Análisis-Planning

Módulo 2: Implementación Backend

Módulo 3: Gestión de Contexto y Comandos

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:0013:39

Playwright, Notion y Linear como MCPs en Claude Code

Curso de Claude Code

Clase 14 de 18

Clase 14 / 18

Recursos

Trabajar con un agente de codificación como Claude Code rinde mucho más cuando le das contexto adecuado. Los servidores MCP (Model Context Protocol) son el estándar creado por Anthropic para extender las capacidades de un modelo de lenguaje y conectarlo con herramientas reales como navegadores, documentación o gestores de tareas.

En la práctica, esto significa que tu flujo como desarrollador deja de ser solo escribir código y se convierte en orquestar contexto: leer un brief en Notion, validar el resultado en el navegador con Playwright y crear tickets en Linear, todo desde la misma conversación.

¿Qué es un servidor MCP? Es un componente que provee al modelo de tools, resources y prompts para que pueda ejecutar acciones más allá de su entrenamiento, como abrir un navegador o leer un documento.

Cómo se gestionan los servidores MCP en Claude Code

La gestión se hace desde la línea de comandos con claude mcp. Si ejecutas claude mcp --help verás las opciones disponibles para agregar, listar, remover y servir servidores [1:00].

Existen dos rutas para sumar un MCP a Claude Code:

Importarlos desde la aplicación de escritorio de Claude si ya los tienes configurados ahí.
Instalarlos directamente con el comando add, indicando el tipo de transporte.

Los servidores MCP funcionan con tres tipos de transporte: HTTP, Server-Sent Events (SSE) y el estándar Input/Output (stdio). Cada servidor define cuál usa, y tú solo copias el comando que ofrece su documentación [2:05].

Cómo verifico que un MCP quedó instalado

Después de agregarlo, ejecuta claude mcp list. Ese comando hace un checking del estatus de cada servidor y te dice si está conectado o si necesita autenticación.

Dentro de la conversación con Claude también puedes escribir /mcp para ver la lista activa, reautenticar sesiones o limpiar credenciales.

Cómo usar el MCP de Playwright para automatizar el navegador

El primer servidor recomendado es Playwright, que le da al modelo la capacidad de abrir un navegador y navegar sitios web reales [3:30]. Es ideal para validar lo que estás construyendo en localhost.

Para instalarlo, copia el comando que aparece en la sección de Claude Code de la documentación de Playwright y pégalo en tu terminal. Una vez conectado, puedes pedirle cosas como: "Utilizando el MCP de Playwright, visita este sitio".

La primera vez que ejecuta una acción, Claude te pedirá permiso para usar la tool correspondiente (por ejemplo, navegar a una URL o tomar un screenshot). Puedes autorizarlo solo para esa sesión.

Qué puede hacer el modelo con Playwright

Las capacidades cubren un flujo completo de QA visual:

Navegar a URLs específicas y esperar a que cargue el contenido.
Hacer scroll y validar que el comportamiento sea correcto.
Tomar capturas de pantalla y usarlas como contexto visual.
Grabar videos del flujo de navegación.
Leer la consola del navegador y detectar errores, como imágenes que no cargan [5:10].

Esto convierte a Playwright en una herramienta de testing funcional asistida por IA, donde el modelo describe lo que ve y propone mejoras sin que tú coordines el navegador.

Cómo conectar Notion y Linear como fuentes de contexto

Los otros dos servidores que completan el flujo profesional son Notion y Linear. Ambos requieren autenticación, a diferencia de Playwright.

¿Para qué sirve el MCP de Notion? Permite que Claude Code lea documentación del equipo (briefs de producto, specs de diseño) y la use como contexto antes de escribir código.

Cómo instalo el MCP de Notion

En la documentación de Claude Code hay una lista oficial de servidores MCP con sus comandos. Para Notion, el transporte es HTTP [7:45]. Pega el comando en la terminal y, al ejecutar /mcp dentro de Claude, aparecerá la opción de autenticar.

Al hacer clic, se abre una ventana del navegador donde eliges el workspace de Notion al que quieres dar acceso. Confirmas la URL que monta Claude Code y autorizas la conexión.

Una vez autenticado, puedes pasarle el link de un documento compartido y pedirle: "Utiliza el MCP de Notion para traer la documentación de este link". El modelo devolverá un objeto JSON con el título y el contenido, listo para usarse como referencia [9:30].

Cómo instalo el MCP de Linear

Linear es la herramienta de gestión de tareas, y su servidor MCP usa transporte Server-Sent Events (SSE). Esto demuestra que Claude Code soporta los tres transportes sin diferencias en la experiencia [10:50].

El proceso es similar: copias el comando desde la documentación de Linear, lo pegas en la terminal y luego autenticas desde dentro de la conversación. Con eso habilitado, puedes pedir: "Revisa usando el MCP de Linear cuáles son las tareas que tengo asignadas".

¿Qué ventaja da combinar Notion, Playwright y Linear? Te permite leer el brief, validar la implementación visual y crear o actualizar tickets sin salir de Claude Code. Es un ciclo cerrado de contexto, ejecución y seguimiento.

Cómo se ve un flujo de trabajo profesional con MCP

El escenario ideal funciona así: tomas la documentación de Notion, la traes como contexto a Claude Code, generas un plan de implementación con user agents, validas el resultado en el navegador con Playwright y creas los tickets en Linear para gestionar la entrega [12:40].

Los MCP fueron diseñados precisamente para esto: ampliar las capacidades del modelo más allá del código y cubrir el análisis previo, la validación posterior y la coordinación con el equipo.

¿Qué servidores MCP conoces tú y en qué casos te han funcionado? Déjalo en los comentarios.

Daniel Alfredo García Serna

Hace 6 meses

📚 Nombre de la clase

Instalación de servidores MCP en Claude Code

🎯 Idea principal

Los servidores MCP permiten extender las capacidades de Claude Code conectándolo con herramientas externas. Instalarlos correctamente significa habilitar un sistema donde la IA no solo responde, sino que interactúa con el entorno real (archivos, APIs, servicios).

⚡ Síntesis en 10 segundos

MCP = conexión con herramientas externas
Amplía lo que la IA puede hacer
Requiere instalación + configuración
Convierte IA en sistema operativo de tareas
Más integración = más poder

🔑 Puntos clave

MCP (Model Context Protocol):
- protocolo para conectar IA con herramientas
- permite acceso a recursos externos
Servidores MCP permiten:
- trabajar con archivos
- ejecutar acciones
- conectarse a APIs
Proceso general:
- instalar servidor MCP
- configurarlo
- conectarlo con Claude Code
Requisitos:
- entorno configurado
- permisos adecuados
Errores comunes:
- mala configuración
- permisos incorrectos
- no validar conexión