Conectarse a un servidor MCP con JavaScript y AI SDK

Introducción

Model Context Protocol (MCP) proporciona una forma estandarizada para que los modelos de inteligencia artificial (IA) interactúen con herramientas y sistemas externos. En mi introducción a MCP encontrarás más información sobre este protocolo revolucionario.

Al conectarse a un servidor MCP, tus aplicaciones de JavaScript pueden aprovechar los Modelos de Lenguaje Grande (LLMs) con la capacidad adicional de ejecutar comandos, recuperar datos e interactuar con varios sistemas. Vercel AI SDK tiene una creciente lista de proveedores de modelos compatibles que pueden conectarse a un servidor MCP. Esto lo convierte en una excelente alternativa a la librería LangChain.js.

En este artículo, te mostraré cómo conectar tus aplicaciones JavaScript a un servidor MCP utilizando Vercel AI SDK. Te explicaré cómo configurar el cliente MCP, configurar el proveedor de AI SDK y hacer prompts al modelo utilizando la función generateText. Al final de este artículo, serás capaz de integrar tus aplicaciones JavaScript con un servidor MCP y aprovechar la potencia de los LLMs para interactuar con el mundo real.

Configuración de clientes MCP

Para interactuar con un servidor MCP, primero necesitamos crear un cliente MCP. AI SDK proporciona una función llamada experimental_createMCPClient que nos permite establecer esta conexión.

Veamos cómo crear dos tipos diferentes de clientes MCP: uno utilizando el transporte STDIO y otro utilizando el transporte SSE.

Configuración de un cliente de transporte STDIO

El método de transporte STDIO nos permite crear un cliente MCP que se comunica con un servidor MCP a través de los flujos de entrada y salida estándar. Esto es útil para ejecutar servidores o procesos MCP locales que exponen las capacidades del sistema local.

El siguiente fragmento de código muestra como configurar un cliente de transporte STDIO para el servidor MCP de Kubernetes:

import {
  experimental_createMCPClient as createMcpClient
} from 'ai';
import {
  Experimental_StdioMCPTransport as StdioClientTransport
} from 'ai/mcp-stdio';

const initStdioClient = async () => {
  const transport = new StdioClientTransport({
    command: 'npx',
    args: ['-y', 'kubernetes-mcp-server@latest']
  });
  return createMcpClient({name: 'blog.marcnuri.com', transport});
};

En este fragmento, estamos creando un cliente MCP que ejecuta Kubernetes MCP server utilizando el comando npx.

Estos son los pasos clave para configurar el cliente de transporte STDIO:

1. Importar los módulos necesarios de los paquetes ai y ai/mcp-stdio.
2. Crear una nueva instancia de StdioClientTransport, pasando el comando y los argumentos para ejecutar el servidor MCP.
3. Llamar a createMcpClient con la instancia de transporte para crear el cliente MCP y establecer la conexión.

Configuración de un cliente de transporte SSE

El método de transporte Server-Sent Events (SSE) nos permite conectarnos a un servidor MCP remoto a través de HTTP. Esto es útil cuando tienes un servidor MCP que ya está ejecutándose como un servicio al que deseas conectarte.

El siguiente fragmento de código muestra cómo configurar un cliente de transporte SSE:

import {
  experimental_createMCPClient as createMcpClient
} from 'ai';

const initSseClient = async () => {
  return createMcpClient({
    name: 'blog.marcnuri.com',
    transport: {
      type: 'sse',
      url: `http://localhost:8080/sse`
    }
  });
};

En este fragmento, estamos creando un cliente MCP que se conecta a un servidor local que se ejecuta en el puerto 8080 utilizando el protocolo SSE. Este enfoque es más adecuado para entornos de producción o cuando tienes un servidor MCP dedicado en ejecución.

Estos son los pasos clave para configurar el cliente de transporte SSE:

1. Importar el módulo necesario del paquete ai.
2. Llamar a createMcpClient con la configuración de transporte, especificando el tipo como sse y proporcionando la URL del servidor MCP.
3. La función devuelve una instancia de cliente MCP que se puede utilizar para interactuar con el servidor remoto.

Es importante resaltar como el cliente de transporte SSE es más sencillo de configurar que el cliente de transporte STDIO.

Configuración del provider y modelo de AI SDK

Una vez que tenemos el cliente MCP configurado, necesitamos configurar el proveedor de AI SDK y el modelo que aprovechará las herramientas del servidor MCP. El AI SDK tiene una lista de proveedores compatibles en constante crecimiento, en este caso, utilizaremos el proveedor de Google Generative AI.

El siguiente fragmento de código muestra cómo configurar el proveedor de Google Generative AI con el modelo Gemini:

import {createGoogleGenerativeAI} from '@ai-sdk/google';

const google = createGoogleGenerativeAI({
  apiKey: process.env['GOOGLE_API_KEY']
});
const model = google('gemini-2.0-flash');

En este fragmento, estamos creando una instancia del proveedor de Google Generative AI y especificando el modelo que queremos utilizar.

• createGoogleGenerativeAI es una función que inicializa el proveedor con la clave API necesaria.
• La función google se llama con el nombre del modelo para crear una instancia del modelo que se puede utilizar para generar texto.

Haciendo prompts al modelo con generateText

Una vez que tenemos el cliente MCP y el proveedor de AI SDK configurados, podemos hacer prompts al modelo utilizando la función generateText.

En este ejemplo, vamos a generar texto pidiendo al modelo que liste todos los pods de Kubernetes en formato de tabla Markdown.

El siguiente fragmento de código muestra las partes relevantes del pipeline:

import {
  generateText,
} from 'ai';
import {createGoogleGenerativeAI} from '@ai-sdk/google';

const assistant = async () => {
  console.log('Starting kubernetes-mcp-server in STDIO mode');
  const stdioClient = await initStdioClient();
  const google = createGoogleGenerativeAI({
    apiKey: process.env['GOOGLE_API_KEY']
  });
  const model = google('gemini-2.0-flash');
  const listPods = await generateText({
    model,
    tools,
    maxSteps: 10,
    messages: [{
      role: 'user',
      content: 'List all pods in my cluster and output as Markdown table'
    }]
  });
  console.log(listPods.text);
  await stdioClient.close();
};

assistant()
  .then(() => {
    console.log('done');
  })
  .catch(err => {
    console.error('Error:', err);
  });

En este fragmento, estamos creando un asistente que conecta el modelo gemini-2.0-flash al servidor MCP de Kubernetes y realiza un prompt sencillo.

Estos son los componentes clave de este ejemplo:

• Primero inicializamos el cliente STDIO y el proveedor de Google Generative AI.
• Luego llamamos a la función generateText con los siguientes parámetros:
  • model: La instancia del modelo que creamos anteriormente.
  • tools: Las herramientas disponibles desde el servidor MCP.
  • maxSteps: El número máximo de pasos que el modelo puede tomar para generar la respuesta.
    Queremos establecer esto en más de 1 para poder realizar el prompt inicial y un prompt posterior con el resultado de la ejecución de las herramientas.
  • messages: Un array de mensajes que representan el historial de la conversación. En este caso, proporcionamos un solo mensaje del usuario pidiendo al modelo que liste todos los pods en el clúster y formatee la salida como una tabla Markdown.
• Por último, registramos el texto generado en la consola.

El resultado del ejemplo será similar a esto:

| Name | Namespace |
|---|---|
| vibe-code-game-65c6fdd6d7-lp47m | default |
| yakd-dashboard-66cf44d6db-qv4gz | yakd-dashboard |

Además, la variable listPods contendrá el historial completo de la conversación, incluyendo el razonamiento del modelo y el resultado de la ejecución de la herramienta.

Conclusión

En este artículo, os he mostrado cómo conectar un servidor MCP desde JavaScript utilizando Vercel AI SDK. Hemos visto cómo configurar tanto clientes de transporte STDIO como SSE, configurar el proveedor y el modelo de AI SDK de Google, y hacer prompts al modelo utilizando la función generateText para generar resultados útiles.

Este enfoque modular no solo ilustra la flexibilidad del SDK, sino que también muestra cómo fragmentos de código simples pueden combinarse para construir aplicaciones complejas. Al seguir estos pasos, puedes integrar fácilmente tus aplicaciones JavaScript con un servidor MCP y aprovechar la potencia de los LLMs para interactuar con herramientas y sistemas externos.

A medida que el ecosistema MCP madura, los desarrolladores de JavaScript están bien posicionados para aprovechar el creciente catálogo de herramientas de IA estandarizadas.

Puedes encontrar el código fuente de este artículo en GitHub.