Open MCP Client: cliente MCP basado en web para conectarse rápidamente a cualquier servicio MCP.

Introducción general

Abrir MCP Client es una herramienta de código abierto, lo más destacado de la cual es que proporciona un cliente MCP (Model Context Protocol) basado en web que permite a los usuarios conectarse a cualquier servidor MCP para chatear sin tener que instalarlo. También permite integrar funciones de chat en las propias aplicaciones. Desarrollado por el equipo de CopilotKit, combina la tecnología de LangChain LangGraph el proyecto está desplegado en la plataforma Vercel, el código está alojado en GitHub y se actualizó por última vez el 10 de marzo de 2025. Tanto si se trata de un servidor de pruebas rápido como de desarrollar interacciones de IA personalizadas, esta herramienta es sencilla y útil, especialmente para los usuarios y desarrolladores a los que les gusta una experiencia cómoda.

Lista de funciones

• Proporciona un cliente MCP basado en web para conectarse directamente a cualquier servidor MCP y chatear en tiempo real.
• No requiere instalación y la versión web de la función puede utilizarse a través del navegador.
• Soporte para integrar la función de chat en la propia aplicación del usuario.
• Utilice la tecnología LangGraph para crear agentes inteligentes que se conecten a herramientas de servidor.
• El código fuente abierto está alojado en GitHub y permite su visualización y modificación.
• El front-end se basa en CopilotKit, lo que garantiza la sincronización de la interfaz y el estado.

Utilizar la ayuda

Cómo empezar a utilizar Open MCP Client

Open MCP Client puede utilizarse de dos maneras: mediante una experiencia rápida con el Cliente MCP basado en web, o desplegándolo localmente e integrándolo en su aplicación. A continuación se detallan los pasos para ayudarle a empezar.

1. Uso del cliente MCP basado en web

La versión web es la característica principal de Open MCP Client y es adecuada para una conexión rápida a servidores MCP sin necesidad de instalación.

• Paso 1: Visite la versión web
  Abra su navegador e introduzca la dirección:open-mcp-client.vercel.app. Esta es la versión web oficial del cliente MCP desplegada por el equipo CopilotKit en Vercel, lista para funcionar.
• Paso 2: Obtener la URL del servidor MCP
  Necesitará una URL de servidor MCP válida, a la que se puede acceder a través de la opción Composición y otras plataformas para conseguirlo. Acceda al sitio web de Composio, cree o seleccione un servidor MCP y copie su URL (normalmente con el formato https://example.com/mcp).
• Paso 3: Conectarse al servidor
  En la versión web de la interfaz, localiza el cuadro de entrada de URL (normalmente en una posición destacada de la página) y pega la URL del servidor MCP que has copiado; pulsa el botón "Conectar" y el sistema intentará establecer una conexión. Una vez establecida, la pantalla de chat se cargará en unos segundos.
• Paso 4: Empezar a chatear
  Una vez conectado, escribe un mensaje en el cuadro de entrada, como "¿Qué tiempo hace hoy?" o "Ayúdame a escribir código", y envíalo. o "Escríbeme código", y envíalo. El servidor devolverá la respuesta en tiempo real, y la interfaz mostrará el contenido del diálogo, el funcionamiento es sencillo e intuitivo.

2. Despliegue local e integración

Si necesita ejecutarlo localmente o integrar la funcionalidad en su proyecto, puede seguir los pasos de desarrollo que se indican a continuación.

• Paso 1: Clonar el repositorio de GitHub
  Ejecute el siguiente comando en el terminal para descargar el proyecto localmente:

git clone https://github.com/CopilotKit/open-mcp-client.git

A continuación, vaya al directorio del proyecto:

cd open-mcp-client

• Paso 2: Configurar las variables de entorno del directorio raíz
  En el directorio raíz del proyecto, cree el archivo .env Documentación:

touch .env

Abra el archivo y añada lo siguiente (sustituyéndolo por su clave de API real):

LANGSMITH_API_KEY=lsv2_...

Esta clave se utiliza para conectarse al servicio LangSmith y puede obtenerse registrándose en el sitio web de LangSmith.

• Paso 3: Configurar las variables de entorno del agente
  entrar en agent Carpeta:

cd agent
touch .env

existe agent/.env se añade el archivo:

OPENAI_API_KEY=sk-...
LANGSMITH_API_KEY=lsv2_...

OPENAI_API_KEY se obtiene de la página web de OpenAI y se utiliza para soportar la función del agente LangGraph.

• Paso 4: Instalar dependencias
  Vuelva al directorio raíz y ejecútelo:

npm install

o utilice pnpm (recomendado):

pnpm install

Instale dependencias como CopilotKit y LangGraph. Asegúrese de que Node.js está instalado localmente (se recomienda la versión 18 o superior).

• Paso 5: Activar el modo de desarrollo
  El proyecto se divide en front-end (/app) y agentes (/agent) dos partes, se recomienda ejecutarlas en dos terminales separados:
• Terminal 1 (frontal):

  pnpm run dev-frontend
  

• Terminal 2 (Agente):

  pnpm run dev-agent
  

o iniciar ambos con un solo comando:

pnpm run dev

Tras el arranque, acceda a http://localhost:3000Puede ver la interfaz local.

• Paso 6: Probar la conexión y el chat
  Introduzca la URL del servidor MCP en la interfaz local (del mismo modo que en la versión web) y haga clic en Conectar. Una vez realizada la conexión con éxito, puede introducir mensajes para probar la función de chat.
• Paso 7: Integración en su aplicación
  El código del front-end se encuentra en /app utilizando la interfaz de gestión CopilotKit y la sincronización de estados. El código del agente se encuentra en la carpeta /agent para conectar con el servidor basado en LangGraph. Puedes reutilizar este código o consultar el README.md de GitHub para modificar la integración.

Funcionamiento detallado de las principales funciones

• Cliente MCP basado en web
  La versión web es la mejor función, basta con introducir la URL para conectarse. Cuando la conexión falla, comprueba si la URL es correcta o si el servidor está en línea. La interfaz está controlada por CopilotKit para un funcionamiento sin problemas.
• Chat en directo
  La interfaz de chat admite la introducción y visualización de respuestas en tiempo real, tanto en la versión web como en la local. Tras enviar un mensaje, el agente LangGraph procesa la solicitud e invoca las herramientas del servidor, y los resultados se muestran automáticamente.
• Depuración y personalización
  Tiempo de ejecución local , disponible herramientas de desarrollador de navegador (F12) para ver los registros y las solicitudes de red . Código abierto, modificable /app en el estilo del front-end, o ajuste la opción /agent La lógica del proxy en el

advertencia

• La versión web depende de Internet, y la capacidad de respuesta del servidor puede verse afectada por Internet.
• Los despliegues locales requieren que la clave API esté configurada correctamente, de lo contrario el agente no funcionará.
• El proyecto se actualiza con frecuencia y se recomienda utilizar regularmente el git pull Consigue la última versión.

Siguiendo estos pasos, podrá aprovechar al máximo la comodidad del MCP basado en web o desarrollar integraciones más profundas.