Lesson completed!
-

MCP: Model Context Protocol

Model Context Protocol (MCP)

MCP (Model Context Protocol) es el estandar abierto de Anthropic que permite a Claude Code conectarse a cualquier herramienta externa. Es como darle superpoderes especificos a Claude.

Que Es MCP

MCP es un protocolo que permite:

  • Conectar Claude con servicios externos
  • Darle acceso a APIs especificas
  • Extender sus capacidades mas alla del codigo

MCPs Que Uso Todos los Dias

1. Playwright - Testing Browser Automatizado

claude mcp add playwright -s project -- npx @modelcontextprotocol/server-playwright

Uso real: Claude navega la app, corre tests E2E completos, toma screenshots cuando algo falla. Essential para debugging de UI.

Ejemplo de uso:

Claude, navega a /login, ingresa credenciales invalidas, y verificar que muestra el mensaje de error correcto

2. MailerLite - Newsletter Automation

claude mcp add mailerlite -s project

Uso real: "Claude, agrega estos 50 emails a la lista de la comunidad" o "crea una campana con este contenido para enviar manana". Todo desde la terminal, sin abrir el navegador.

3. Linear/Jira - Project Management

Uso real: "Claude, crea un ticket de este bug con estos detalles" y se crea automaticamente. Cero context switching.

4. Notion - Documentation Sync

Uso real: Claude puede leer documentacion de Notion y actualizar bases de datos. Mantengo la single source of truth sincronizada.

5. Brave Search - Info en Tiempo Real

claude mcp add brave-search -s project -- npx @modelcontextprotocol/server-brave-search

Uso real: "Claude, busca las ultimas best practices de [tecnologia X] 2025 e implementalas en este codigo".

Tutorial Paso a Paso: Configurar Playwright MCP

Vamos a configurar Playwright MCP desde cero. Este es el MCP mas util para testing.

Paso 1: Instalar Playwright en tu Proyecto

# En tu proyecto
npm install -D @playwright/test
npx playwright install

Paso 2: Agregar el MCP

claude mcp add playwright -s project -- npx @modelcontextprotocol/server-playwright

Paso 3: Verificar que Funciona

# En Claude Code
/mcp list

Deberias ver playwright en la lista.

Paso 4: Tu Primer Test con MCP

En Claude Code, escribe:

Usa playwright para:
1. Navegar a http://localhost:3000
2. Tomar un screenshot de la pagina principal
3. Verificar que el titulo contiene "Mi App"

Claude va a:

  1. Abrir un browser headless
  2. Navegar a tu app
  3. Tomar el screenshot
  4. Reportar si paso o fallo

Cuando Falla: Debugging de MCPs

Si el MCP no responde:

# Verificar que el MCP esta corriendo
/mcp status
 
# Reiniciar el MCP
/mcp restart playwright
 
# Ver logs del MCP
/mcp logs playwright

Error comun: "Browser not installed"

# Solucion
npx playwright install chromium

Error comun: "Connection refused"

# Tu app no esta corriendo en localhost:3000
# Solucion: Inicia tu dev server primero
npm run dev

Como Agregar Otros MCPs

El comando basico es:

claude mcp add [nombre] -s project

Algunos MCPs requieren configuracion adicional:

claude mcp add playwright -s project -- npx @modelcontextprotocol/server-playwright

Usar un MCP en el Chat

Una vez agregado, simplemente pedile a Claude que use esa integracion. El sabe como.

Ejemplos:

Usa playwright para testear el flujo de login
Agrega este email a la lista de newsletter
Crea un ticket en Linear con este bug

MCPs Populares

MCPUso
PlaywrightTesting E2E, screenshots
MailerLiteEmail marketing
Linear/JiraProject management
NotionDocumentation
Brave SearchBusqueda en tiempo real
GitHubIssues, PRs
SlackNotificaciones
PostgreSQLDatabase queries directas

Crear Tu Propio MCP

Si tenes una API especifica que queres que Claude use, podes crear tu propio MCP.

La estructura basica es:

  1. Un servidor que expone la API
  2. Configuracion que describe las herramientas disponibles
  3. Handlers para cada operacion

Chequea la documentacion oficial de Anthropic para mas detalles.

Workflow con MCPs

Un workflow tipico usando MCPs:

  1. Desarrollas una feature con Claude
  2. Usas Playwright MCP para testear E2E
  3. Si hay bugs, Claude los documenta en Linear
  4. Cuando todo pasa, Claude actualiza la documentacion en Notion
  5. Finalmente, envia update por Slack

Todo sin salir de la terminal.

Seguridad con MCPs

IMPORTANTE: Los MCPs tienen acceso a servicios externos con tus credenciales.

Checklist de Seguridad para MCPs

Antes de instalar cualquier MCP:

  • Fuente confiable: Es del repo oficial de Anthropic o autor conocido?
  • Permisos minimos: El token/API key tiene solo los permisos necesarios?
  • Scope correcto: Es -s project o -s user? (Prefiere project)
  • Audit log: Sabes que operaciones puede hacer?

Tokens de Minimo Privilegio

MALO:

# Token con acceso a todo
MAILERLITE_API_KEY=full_admin_token

BUENO:

# Token solo para leer y agregar subscribers
MAILERLITE_API_KEY=subscriber_management_only_token

MCPs Peligrosos: Cuidado Extra

MCPRiesgoMitigacion
PostgreSQLPuede borrar datosUsar usuario read-only
GitHubPuede pushear codigoToken solo para issues/PRs
SlackPuede enviar como vosLimitar a canales especificos
AWSAcceso a infraestructuraIAM role minimo

Para Equipos: Governance de MCPs

Si lideras un equipo, establece una lista de MCPs aprobados:

# MCPs Aprobados - [Tu Empresa]
 
## Aprobados (uso libre)
- Playwright (testing)
- Brave Search (investigacion)
- Context7 (documentacion)
 
## Aprobados con Restricciones
- GitHub: Solo tokens con scope `repo:read`, `issues:write`
- Linear: Solo lectura + creacion de tickets
 
## Requiere Aprobacion
- PostgreSQL: Requiere aprobacion de DBA
- AWS: Requiere aprobacion de SRE
- Cualquier MCP que acceda a datos de usuarios
 
## Prohibidos
- MCPs de terceros no auditados
- MCPs que pidan acceso admin

Auditoria de MCPs Activos

Periodicamente revisa que MCPs estan instalados:

# Ver todos los MCPs
/mcp list
 
# Ver config de un MCP especifico
/mcp config playwright

Errores Comunes con MCPs

Error 1: MCP con Token Vencido

Sintoma: MCP deja de funcionar de repente

Solucion:

# Verificar estado
/mcp status mailerlite
 
# Actualizar credenciales en .env
# Reiniciar MCP
/mcp restart mailerlite

Error 2: MCP Conflictos entre Proyectos

Sintoma: MCP funciona en un proyecto pero no en otro

Causa: MCPs globales vs por proyecto

Solucion: Usa siempre -s project para evitar conflictos

Error 3: Rate Limiting

Sintoma: "Too many requests" errors

Solucion: Agrega delays o usa Claude menos agresivamente con ese MCP

Desafio: Configura Tu Primer MCP

  • Instala Playwright en tu proyecto
  • Agrega el MCP con claude mcp add
  • Verifica con /mcp list
  • Corre un test simple: "Navega a google.com y toma screenshot"
  • (Equipos) Documenta que MCPs estan aprobados

Tiempo estimado: 15 minutos

Siguiente Paso

Ahora que podes conectar Claude con cualquier herramienta, vamos a ver hooks para automatizar acciones.