Qlcube
Módulo 9 · MCP servers e integraciones
8 horas9 / 13
Progreso del curso
69% · Módulo 9 de 13
Módulo 9 · 8 horas

MCP servers e integraciones

Hasta ahora, Claude Code trabaja con tu repo local: ficheros, git, shell. Pero el trabajo real se cruza con sistemas externos: GitHub para PRs, Chrome para verificar UI, bases de datos para diagnosticar, Slack para coordinar. MCP (Model Context Protocol) es el estándar abierto que permite a Claude Code hablar con todos esos sistemas de forma uniforme.

Objetivos

  • Entender qué es MCP y por qué Anthropic lo diseñó.
  • Conocer los MCP servers oficiales más usados.
  • Configurar e instalar un MCP server local.
  • Autenticar correctamente (OAuth vs API key).
  • Saber cuándo escribir tu propio MCP server.

7.1 ¿Qué es MCP?

Model Context Protocol es una especificación abierta publicada por Anthropic en 2024. Define cómo un agente de IA — cualquiera, no solo Claude — puede consumir herramientas y recursos de un servicio externo.

Un MCP server es un proceso que:

  • Expone una lista de herramientas (tools).
  • Cada tool tiene nombre, descripción y schema JSON de parámetros.
  • Cuando el agente decide llamarla, el server la ejecuta y devuelve el resultado.

El agente ve esas tools como si fueran nativas. Para Claude Code, no hay diferencia entre Read (interna) y mcp__github__create_pr (de un servidor externo): ambas son tools que invoca cuando lo necesita.

Por qué importa MCP a una empresa

  • Estándar abierto. No quedas atado a Anthropic. ChatGPT, Cursor y Gemini también soportan MCP.
  • Reusable. Un MCP de tu CRM sirve para Claude, ChatGPT, agentes propios.
  • Auditable. Las tools y sus llamadas se registran. Útil para compliance.
  • Aislamiento. El MCP server corre en su propio proceso (local o remoto). Si falla, el agente no se cae.

7.2 Anatomía de una llamada MCP

Cuando Claude Code llama una tool de un MCP server, el flujo es:

  1. Modelo decide invocar mcp__<servidor>__<tool> con argumentos JSON.
  2. Claude Code envía la llamada al server por stdio (proceso local) o HTTP (remoto).
  3. El server ejecuta la tool (puede llamar a una API externa, leer un fichero, lo que sea).
  4. El server devuelve el resultado en JSON.
  5. Claude Code mete el resultado en el contexto del modelo.

El nombre canónico de las tools MCP en Claude Code sigue el patrón mcp__<servidor>__<tool>. Por ejemplo:

  • mcp__chrome__navigate — abre una URL en Chrome.
  • mcp__chrome__screenshot — captura la pantalla actual.
  • mcp__github__create_pull_request — abre un PR en GitHub.
  • mcp__slack__send_message — manda un mensaje a Slack.

Esta convención es importante para los permisos: en settings.json puedes hacer allow: ["mcp__chrome__*"] para permitir todas las del Chrome MCP a la vez.

7.3 MCP servers oficiales

Anthropic mantiene un registro de servers oficiales y de la comunidad. Los más útiles en empresa:

ServerPara quéAuth
ChromeControlar el navegador. Verificar UI tras un cambio.Extensión de Chrome
computer-useControlar el escritorio macOS (apps nativas).Permiso por app
GitHubIssues, PRs, reviews, releases.OAuth o PAT
Linear / Jira / AsanaTickets, sprints, asignaciones.OAuth
Notion / ConfluenceDocumentación interna.OAuth
SlackMensajes, búsqueda, hilos.OAuth
Postgres / BigQueryQueries de solo lectura sobre tu DB.Connection string
SentryLectura de errores y traces.API key
FigmaInspeccionar diseños, leer specs.OAuth

Lista completa y descubrimiento dinámico: /mcp registry dentro de Claude Code.

Practica · empareja cada MCP server con su caso de uso

Selecciona un server a la izquierda y luego el caso de uso que mejor lo justifica.

  • Chrome
  • GitHub
  • Postgres
  • Sentry
  • Linear
  • Figma
  • Verificar visualmente que un cambio de UI se renderiza bien tras un refactor.
  • Listar PRs abiertos, leer comentarios de revisión y abrir issues.
  • Ejecutar consultas de solo lectura sobre la BD para diagnosticar un bug.
  • Leer la lista de errores recientes y sus traces para encontrar el origen.
  • Consultar tickets, sprints y asignaciones del backlog del equipo.
  • Inspeccionar un diseño y leer specs (medidas, colores, tokens).

7.4 Instalar un MCP server local

Vamos a instalar el MCP server de Chrome, uno de los más útiles para verificar cambios de UI.

Paso 1 · Instalar la extensión de Chrome

Ve al Chrome Web Store y busca "Claude in Chrome" (extensión oficial de Anthropic). Instálala. Se añade un icono de Anthropic a tu barra.

Paso 2 · Configurar Claude Code

Edita ~/.claude/settings.json (o .claude/settings.json del proyecto):

{
  "mcpServers": {
    "chrome": {
      "command": "npx",
      "args": ["-y", "@anthropic-ai/mcp-server-chrome"]
    }
  }
}

Paso 3 · Reinicia Claude Code

Salir y volver a entrar. Verifica:

> /mcp

Debes ver "chrome ✓ connected".

Paso 4 · Probar

> Abre https://qlcube.com en Chrome y hazme una captura.

Claude Code llamará a mcp__chrome__navigate y luego a mcp__chrome__screenshot. La captura aparece en tu transcript.

Combo poderoso: tras un cambio de UI, pides al agente que arranque tu dev server (npm run dev), abra la URL en Chrome y verifique que el cambio se ve correcto. La verificación visual cierra el ciclo de Read→Plan→Edit→Verify para frontend.

7.5 MCP server remoto vs local

Dos modos de despliegue:

Local (stdio)

El server corre en tu máquina, hablando con Claude Code por stdin/stdout. Configurado en mcpServers con command y args.

{
  "mcpServers": {
    "postgres": {
      "command": "npx",
      "args": ["@modelcontextprotocol/server-postgres", "postgresql://..."]
    }
  }
}

Pros: latencia mínima, sin red, ideal para devs.

Contras: cada usuario debe instalar y configurar.

Remoto (HTTP)

El server corre en un host accesible. Claude Code se conecta vía HTTP. Configurado con url:

{
  "mcpServers": {
    "qlc-internal": {
      "url": "https://mcp.internal.qlcube.com",
      "auth": { "type": "oauth", "clientId": "..." }
    }
  }
}

Pros: configurado una vez por la organización, todos lo usan. Útil para datos centralizados (CRM, BI, RGPD audit).

Contras: latencia, gestión de auth, requiere infra.

7.6 Autenticación

Cada server escoge su mecanismo. Tres comunes:

API key

Sencillo. Pones la key en una variable de entorno. Ejemplo Sentry:

{
  "mcpServers": {
    "sentry": {
      "command": "npx",
      "args": ["@modelcontextprotocol/server-sentry"],
      "env": { "SENTRY_AUTH_TOKEN": "${SENTRY_AUTH_TOKEN}" }
    }
  }
}

OAuth

Para servicios que requieren consentimiento del usuario (GitHub, Notion, Slack). El primer uso lanza el flujo:

> /mcp authenticate github

Se abre el navegador, autorizas, devuelve token a Claude Code que lo guarda cifrado en ~/.claude/auth/.

Connection string

Para bases de datos. Pasas el DSN como argumento:

{
  "mcpServers": {
    "postgres": {
      "command": "npx",
      "args": ["@modelcontextprotocol/server-postgres",
               "postgres://readonly:pwd@db.internal/myapp"]
    }
  }
}

Regla de oro: NUNCA pongas la base de datos de producción en read-write. Crea un usuario read-only específico para el MCP. Mejor aún: una réplica con datos anonimizados. Si Claude Code puede borrar tu producción, lo borrará algún día.

7.7 Permisos en MCP

Las tools de un MCP heredan el sistema de permisos de Claude Code. Tres patrones útiles:

{
  "permissions": {
    "allow": [
      "mcp__chrome__navigate",
      "mcp__chrome__screenshot",
      "mcp__github__list_pulls",
      "mcp__github__get_pull",
      "mcp__postgres__query"
    ],
    "deny": [
      "mcp__github__delete_repository",
      "mcp__github__transfer_repository",
      "mcp__slack__send_message"
    ]
  }
}

Recomendaciones:

  • Read antes que write. Pon en allow las tools de lectura. Las de escritura, en ask (para que pregunte) o deny específicas (para bloquear las peligrosas).
  • Slack y email: SIEMPRE ask. Mensajes que se envían al exterior nunca en allow. Compliance + sentido común.
  • DB writes en deny. Si tu MCP de Postgres expone mcp__postgres__execute (write), pásalo a deny por defecto. Solo activar para sesiones específicas.

7.8 Cuándo escribir tu propio MCP

Crea un MCP propio cuando:

  • Tienes una API interna que el agente necesita (CRM propio, sistema de tickets propio).
  • Quieres exponer datos con políticas de acceso específicas (RGPD, anonimización, audit).
  • Tu equipo va a usarlo intensivamente y quieres centralizarlo.

El SDK oficial está en TypeScript y Python. Skeleton mínimo en TS:

import { Server } from "@modelcontextprotocol/sdk/server/index.js";
import { StdioServerTransport } from "@modelcontextprotocol/sdk/server/stdio.js";

const server = new Server({ name: "qlc-fundae", version: "1.0.0" });

server.tool({
  name: "validate_nif",
  description: "Valida un NIF/CIF español. Devuelve { valid: boolean, type: string, reason?: string }",
  inputSchema: {
    type: "object",
    properties: { nif: { type: "string" } },
    required: ["nif"]
  },
  handler: async ({ nif }) => {
    const result = validateSpanishNIF(nif);
    return { content: [{ type: "text", text: JSON.stringify(result) }] };
  }
});

await server.connect(new StdioServerTransport());

El equivalente en Python (con mcp SDK):

from mcp.server.fastmcp import FastMCP

server = FastMCP("qlc-fundae")

@server.tool()
def validate_nif(nif: str) -> dict:
    """Valida un NIF/CIF español."""
    return validate_spanish_nif(nif)

if __name__ == "__main__":
    server.run()

Empaquetas el script con npm o pip, lo distribuyes en tu organización, y cada miembro lo añade a su settings.json.

Práctica

Ejercicio 7.1 · Chrome MCP

  1. Instala la extensión Claude in Chrome.
  2. Configura el server en ~/.claude/settings.json.
  3. Verifica con /mcp.
  4. Pide al agente: "abre qlcube.com, captura la pantalla y dime los 3 títulos principales que ves".

Ejercicio 7.2 · GitHub MCP

Conecta el MCP de GitHub (OAuth) y prueba:

  1. Listar tus PRs abiertos.
  2. Pedir un resumen de los comentarios de uno de ellos.
  3. Asegurar que la creación de PR (write) está en ask, no allow.

Ejercicio 7.3 · Diseña tu MCP interno

Sin código todavía: escribe en pseudo-spec las 5 tools que pondrías en un MCP server interno de tu empresa. Para cada tool:

  • Nombre.
  • Descripción (de cara al modelo).
  • Parámetros.
  • ¿Read o write? ¿Auditable?

Comparte con tu tutor para feedback.

Test de comprensión

1. ¿Qué es MCP?

  1. Un modelo de Anthropic.
  2. Un protocolo abierto para que agentes consuman herramientas externas.
  3. Un editor.
  4. Un sistema de pago.

Respuesta correcta: B. Model Context Protocol estandariza la comunicación agente ↔ servicio externo.

2. Tienes un MCP de Postgres con tu DB de producción. ¿Qué pones en allow?

  1. Todas las tools.
  2. Solo las de lectura.
  3. Solo las de escritura.
  4. Ninguna — siempre ask.

Respuesta correcta: B. Lecturas en allow para fluidez. Escrituras en ask o deny por seguridad. Y siempre con un usuario read-only en la DB, no admin.

3. ¿Qué patrón de auth elige el MCP de GitHub?

  1. API key estática.
  2. OAuth.
  3. SSH key.
  4. Sin auth.

Respuesta correcta: B · OAuth. La primera vez se lanza el flujo, autorizas en navegador, Claude Code guarda el token cifrado.

4. ¿Cuándo merece la pena escribir tu propio MCP server?

  1. Siempre.
  2. Cuando tienes una API/datos internos que tu equipo va a usar repetidamente.
  3. Solo si Anthropic no tiene uno oficial.
  4. Nunca, son legacy.

Respuesta correcta: B. La regla práctica es: si vas a usar la integración intensivamente y/o quieres aplicar tus políticas de acceso, escribe MCP propio. Para usos puntuales, un script o curl es suficiente.

Resumen

  • MCP = protocolo abierto para conectar agentes a sistemas externos.
  • Tools MCP usan el patrón mcp__<server>__<tool>.
  • Servers oficiales: Chrome, computer-use, GitHub, Linear, Notion, Slack, Postgres, Sentry…
  • Permisos: lectura en allow, escritura en ask. DB de producción siempre read-only.
  • SDK oficial en TS y Python para escribir MCP propios.

El siguiente módulo: hooks para automatizar tu flujo (pre-commit, post-edit, validate-on-stop) y memoria persistente con CLAUDE.md.

0 / 0Respondidas
0 / 0Aciertos
% de acierto