MCP: el protocolo que falta en tu flujo Frontend

Nota preliminar

A lo largo de este artículo verás que me refiero principalmente a Claude y Claude Code (si no lo conoces, echa un vistazo) como ejemplos de clientes MCP. Pero lo que describo aquí es válido para cualquier modelo de lenguaje grande (LLM) que se pueda integrar en flujos reales de trabajo: ya sea ChatGPT, Gemini, Mistral o cualquier otro.

El concepto tratado aquí y su arquitectura no dependen del modelo, sino del protocolo MCP y su implementación.

Introducción

Existe una clara limitación en la interacción “estándar” con cualquier LLM: puede leer tu código, pero no puede interactuar directamente con el resto tus herramientas.

Por ejemplo, lees especificaciones en Notion, gestionas tareas en Linear, haces despliegues en Vercel… pero Claude sigue confinado en una ventana de chat.

¿El resultado?: copiar, pegar, repetir.

**MCP** (Model Context Protocol) soluciona ese cuello de botella.

¿Qué es MCP?

MCP no es una herramienta nueva. Es el protocolo que permite que un LLM (como Claude) deje de ser un espectador pasivo y pase a formar parte activa de tu flujo de trabajo.

Se trata de un protocolo estándar que permite a aplicaciones de IA conectarse con herramientas externas de forma estructurada, segura y modular.

Arquitectura simplificada

graph LR
  Cliente[Cliente MCP]
  Servidor[Servidor MCP]
  Herramienta[Herramienta externa]

  Cliente --> Servidor --> Herramienta

Componentes

Cliente MCP: la aplicación que desea acceder a datos o ejecutar funciones externas (Claude Desktop, Claude Code, Cursor, etc.).
Servidor MCP: el intermediario que traduce las peticiones del cliente a acciones concretas sobre una herramienta.

Tipos de capacidades

Recursos: permiten leer información (archivos, documentos, respuestas de APIs).
Herramientas: permiten ejecutar acciones (crear issues, enviar correos, consultar bases de datos).
Plantillas: instrucciones predefinidas convertidas en comandos reutilizables.

Por supuesto hay muchísimo más que aprender sobre MCP, así que te recomiendo que revises sus conceptos esenciales.

MCP vs APIs: la diferencia que importa

Esta es la confusión más habitual y una duda que yo mismo he tenido. Para dejarlo claro: MCP no es una API. Es un protocolo que estandariza cómo un LLM interactúa con múltiples APIs sin aprenderlas una a una.

Te pongo un ejemplo para que veas las diferencias.

Sin MCP

flowchart LR
    Claude[LLM]
    Linear[Linear API Token + JSON propio]
    GitHub[GitHub API Token + paginación]
    Notion[Notion API OAuth + estructuras anidadas]

    Claude --> Linear
    Claude --> GitHub
    Claude --> Notion

    subgraph Resultado
      direction TB
      Error[Caos de integraciones específicas]
    end

    Linear --> Error
    GitHub --> Error
    Notion --> Error

Cada API tiene su propia autenticación, formato y estructura, así que el LLM está obligado a conocer los detalles de de implementación en cada caso. Esto, potencialmente, supone un contexto diferente cada vez que interactúas con servicios:

Linear → token + JSON propio.
GitHub → token + paginación.
Notion → OAuth + estructuras anidadas.

Resultado: integraciones específicas que son complicadas de mantener y que pueden acabar en caos.

Con MCP

flowchart LR
    Claude[LLM]
    MCPServidor[Servidor MCP como adaptador]
    API1[API de Linear]
    API2[API de Jira]
    API3[API de Notion]

    Claude --> MCPServidor
    MCPServidor --> API1
    MCPServidor --> API2
    MCPServidor --> API3

    subgraph Resultado
      direction TB
      Uniformidad[Mismo protocolo Integración reutilizable]
    end

    API1 --> Uniformidad
    API2 --> Uniformidad
    API3 --> Uniformidad

El LLM le habla al MCP.
El servidor MCP traduce entre MCP y la API concreta.
Cambias de Linear a Jira → mismo protocolo, servidor distinto.

Resultado: MCP actúa como un adaptador universal.

Dónde encontrar servidores MCP

Awesome MCP (https://mcpservers.org/)

Este es un un directorio más o menos global de servidores MCP de todos los tipos y colores.
Cada servidor te da acceso a un repositorio donde están todas las opciones para integrar el servidor en cualquier cliente MCP como Claude, Cline, ChatGPT, Cursor, Windsurf, etc.

Claude MCP (https://www.claudemcp.com/)

Un directorio de servidores (para cualquier cliente MCP, no solo Claude) creados por la comunidad.
- Bases de datos: PostgreSQL, MongoDB, SQLite.
- Desarrollo: GitHub, Git, Docker.
- Productividad: Notion, Obsidian, Gmail.
- Automatización: Puppeteer, navegadores web.
Las instrucciones de instalación son todas muy similares.
Por ejemplo, para user el servidor MCP de GitHub con Claude Code:

claude mcp add github /path/to/server -e GITHUB_TOKEN=tu_token
claude mcp add postgres /path/to/server -e DATABASE_URL=tu_conexion

VSCode MCP (https://code.visualstudio.com/mcp)

Instalación directa desde la interfaz de VS Code.
Una vez instalados, son accesibles desde la ventana de agente.
Tienes toda la información sobre su uso en esta página.

Caso real: servidor MCP para FrontendLeap

No hay nada equiparable a la práctica para asegurarte de que has entendido un concepto. Con algo tan aparentemente abstracto como el protocolo MPC, se trata de casi una obligación.

Por otro lado, creo totalmente en la teoría del “scratch your own itch” a la hora de resolver problemas, es decir, resuelve los tuyos primero.

El problema

Como formador de developers Frontend, me enfrento habitualmente a esto:

Alumno: "No entiendo Array.reduce" —es un ejemplo.
Resultado: buscar ejemplos (casi siempre genéricos) que no conectan con su contexto.

Así que comencé a divagar hasta que la idea se presentó.

¿Y si Claude pudiera generar ejercicios personalizados en base al contexto específico del usuario?.

Para ponerla a prueba necesitaba:

Conexión con la API de desafíos de FrontendLeap.
Generación de contenido adaptado al usuario (a través de un LLM).
Devolver una URL con el reto creado, listo para resolver.

La solución

Un —muy simple— servidor MCP con un comando expuesto: create_challenge, creado con el SDK de TypeScript:

const server = new McpServer({ name: "frontendleap-challenges", version: "1.0.0" });

server.addTool({
  name: "create_challenge",
  description: "Crea un desafío personalizado de FrontendLeap",
  handler: async (params) => {
    const challenge = await createCustomChallenge(params);
    return `Desafío creado: ${challenge.url}`;
  }
});

Esta es la morfología de la entidad challenge:

tools: [
  {
    name: "create_challenge",
    description:
      "Create a complete coding challenge with all content generated by Claude and save it to FrontendLeap",
    inputSchema: {
      type: "object",
      properties: {
        title: {
          type: "string",
          description:
            "The challenge title (e.g., 'Advanced CSS Flexbox Centering Challenge')",
        },
        description: {
          type: "string",
          description: "Brief description of what the challenge teaches",
        },
        explanation: {
          type: "string",
          description:
            "Detailed markdown explanation of the concept, including examples and learning objectives",
        },
        starter_code: {
          type: "string",
          description:
            "The initial code template that users start with - should be relevant to the challenge",
        },
        test_code: {
          type: "string",
          description:
            "JavaScript test code (using Jasmine) that validates the user's solution",
        },
        solution: {
          type: "string",
          description:
            "Optional markdown explanation of the solution approach and key concepts",
        },
        language: {
          type: "string",
          enum: ["javascript", "html", "css", "typescript"],
          description: "Programming language for the challenge",
        },
        difficulty: {
          type: "string",
          enum: ["beginner", "intermediate", "advanced"],
          description: "Challenge difficulty level",
        },
      },
      required: [
        "title",
        "description",
        "explanation",
        "starter_code",
        "test_code",
        "language",
        "difficulty",
      ],
    },
  },
];

Si quieres echarle un vistazo al código, aquí tienes el repo.

Qué hace este servidor MCP

Recibe contexto del usuario de forma conversacional (se acabaron los ejercicios estáticos).
Con el contexto, genera código, tests unitarios, explicaciones y la solución.
Consulta la API de challenges en FrontendLeap.
Publica el challenge y devuelve la URL al usuario.

Ejemplo real

Soy un junior Frontend y me cuesta entender los genéricos TypeScript. ¿Puedes generar un desafío para eso?.

Claude interpreta el contexto, llama al servidor MCP y devuelve algo como:

https://fl.test/desafios/custom-hooks-uselocalstorage-hook-challenge (como ves se trata de una URL local ya que esta feature no está en producción).

¿Cuándo crear tu propio servidor MCP?

No todas las automatizaciones requieren un servidor MCP. Pero cuando el modelo necesita interactuar con sistemas externos de forma estructurada, la diferencia, como puedes comprobar, es radical.

Cuándo sí vale la pena

Cuando necesitas gestionar autenticación segura (tokens, OAuth, permisos por usuario).
Cuando hay lógica no trivial: múltiples pasos, condiciones, transformaciones, cálculos.
Cuando se requiere escribir o modificar recursos externos (crear archivos, subir contenido, actualizar registros).
Cuando el flujo exige respuestas adaptadas al usuario o al contexto actual.

Cuándo probablemente no

Si basta con leer archivos locales o consultar JSON estáticos.
Si la tarea es tan simple que se resuelve con un custom command, como vimos con Claude Code.
Si la lógica es tan específica que no se va a reutilizar en otros contextos.

El test decisivo

¿Tu modelo necesita salir del entorno local para actuar en un sistema externo con criterio propio?.

Si la respuesta es sí, entonces necesitas MCP.

Conclusión

MCP es el pegamento que faltaba

Transforma a un modelo pasivo en un agente operativo dentro de tu stack. Sin integraciones repetitivas ni hacks manuales.

El ecosistema ya está maduro

Antes de construir desde cero, explora. Existen servidores MCP para la mayoría de los casos habituales.

No siempre hace falta construir

La clave está en discernir: ¿lo que vas a hacer justifica el esfuerzo de implementación y mantenimiento?.

MCP no sustituye APIs, las abstrae

Es el puente entre tu LLM y cualquier servicio, sin forzar al modelo a aprender cada API al detalle.

El futuro es integración

La IA útil no vive en una pestaña aislada. Vive en tu entorno real, ejecutando tareas con contexto. MCP lo hace posible.