mcp-ui: una interfaz de chat de inteligencia artificial basada en el protocolo MCP

Introducción general

mcp-ui es un proyecto de código abierto creado por el desarrollador machaojin1917939763, construido sobre el protocolo Model Context Protocol (MCP), es una aplicación de chat inteligente que soporta tanto entornos Web como de escritorio. mcp es Antrópico mcp-ui es un protocolo abierto que permite a los modelos de IA llamar a herramientas y servicios externos. mcp-ui integra API de OpenAI y Anthropic, y ofrece una interfaz de diálogo limpia y moderna. Los usuarios pueden utilizarla para dialogar con la IA e invocar funciones como el navegador y la manipulación de archivos. Construido con Vue.js y Electron, el proyecto soporta despliegue multiplataforma y es adecuado para desarrolladores o entusiastas de la IA.

Lista de funciones

• Proporciona una interfaz de chat limpia y moderna con soporte para Markdown y resaltado de código.
• adyuvante MCP la IA puede invocar herramientas externas como la automatización del navegador y la manipulación de archivos.
• Compatible con las API de OpenAI y Anthropic, con modelos seleccionables por el usuario.
• Permite configuraciones personalizadas, incluidas claves API, URL base y opciones de modelo.
• Soporte para añadir herramientas personalizadas para ampliar la funcionalidad.
• Existe una versión de escritorio de la aplicación, compatible con Windows, Mac y Linux.
• Integración de los servicios de back-end de MCP para apoyar el funcionamiento local.

Utilizar la ayuda

mcp-ui es una herramienta de chat de código abierto que los usuarios deben instalar a través del código fuente. A continuación encontrará una guía detallada de instalación y uso que le ayudará a empezar rápidamente.

Proceso de instalación

1. Preparar el entorno
   Antes de empezar, asegúrese de que su ordenador cumple los siguientes requisitos:
   • Node.js(versión 16.0.0 o superior).
   • npm(versión 8.0.0 o superior).
   • Git (para descargar código).
   • Navegadores modernos (por ejemplo, las últimas versiones de Chrome, Firefox, Safari y Edge).
   • Sistemas compatibles para escritorio: Windows 10+, macOS 10.15+ o Ubuntu 20.04+.
     Compruebe que el entorno está listo para funcionar:

   node -v
   npm -v
   git --version

2. Descargar código fuente
   Clona el código localmente introduciendo el siguiente comando en el terminal:

   git clone https://github.com/machaojin1917939763/mcp-ui.git
   

   A continuación, vaya al directorio del proyecto:

   cd mcp-ui
   

3. Instalación de dependencias
   Ejecutar en el directorio del proyecto:

   npm install
   

   Esto instalará los componentes necesarios como Vue.js, Electron, etc. El proceso puede tardar unos minutos.

4. Configuración de variables de entorno
   Copie el archivo de configuración de ejemplo y edítelo:

   cp .env.example .env
   

   Abrir con un editor de texto .envRellene lo siguiente:

   VITE_API_KEY=your_api_key_here        # 你的 OpenAI 或 Anthropic API 密钥
   VITE_MODEL_PROVIDER=openai            # 或 anthropic
   MCP_SERVER_PORT=3001                  # MCP 服务端口，默认 3001
   

   Guarde y cierre el archivo.

5. lanzar una aplicación
   • Versión web::
     Ejecute el front-end en un terminal:

     npm run dev
     

     Ejecute el backend MCP en otro terminal:

     npm run mcp:server
     

     Abra http://localhost:5173 en su navegador (los puertos pueden variar, consulte las indicaciones del terminal).

   • versión de escritorio::
     Ejecute el siguiente comando para iniciar el modo de desarrollo de Electron:

     npm run electron:dev
     

     La ventana de la aplicación de escritorio se abre automáticamente.

6. Crear versión de producción (opcional)
   • Versión web:

     npm run build
     

     Los archivos generados se encuentran en la carpeta dist que puede desplegarse en un servidor estático.

   • Versión de sobremesa:

     npm run electron:build          # 构建所有平台
     npm run electron:buildwin       # Windows
     npm run electron:buildmac       # macOS
     npm run electron:buildlinux     # Linux
     

     Los resultados de la compilación están disponibles en dist_electron Carpeta.

Funciones principales

modelo de configuración

• Abra la aplicación y haga clic en el icono Ajustes de la esquina superior derecha (⚙️).
• Seleccione en el panel de Ajustes:
  • Proveedores de modelos (OpenAI o Anthropic).
  • Introduce la clave API (consíguela en la web oficial de OpenAI o Anthropic).
  • Establece la URL base de la API (opcional, por defecto está bien).
  • Seleccione el modelo específico (por ejemplo, GPT-4 o Claude).
• Haga clic en Guardar para que la configuración surta efecto.

Utilizar la función de chat

• Introduzca una pregunta o un comando en el cuadro de entrada de la parte inferior.
• Pulsa Intro o haz clic en el botón Enviar y la IA responderá.
• Se admite el formato Markdown y se resalta el código.
• Ejemplo: Introduzca "Ayúdame a comprobar el tiempo que hace hoy en Pekín", la IA llamará a la herramienta meteorológica para devolver el resultado.

Llamada a la herramienta MCP

• mcp-ui incorpora las siguientes herramientas:
  • Automatización del navegador: Escriba "abrir Google search xAI" y la IA controlará la ejecución del navegador.
  • Tiempo: Introduzca "Qué tiempo hace en Shanghai" y obtendrá datos en tiempo real.
  • Búsqueda de noticias: introduzca "noticias recientes sobre tecnología" para obtener los contenidos más recientes.
  • Operaciones con archivos (versión de escritorio): Introduce "read desktop/test.txt" y la IA te devolverá el contenido del archivo.
• No es necesario realizar ninguna acción adicional, basta con solicitarlo directamente en el cuadro de chat.

Función destacada Operación

Experiencia de escritorio

• La versión de escritorio se ejecuta a través de Electron y puede ejecutarse sin navegador tras su instalación.
• En la versión de escritorio, la manipulación de archivos es más sencilla gracias al acceso directo al sistema de archivos local.
• El método de funcionamiento es el mismo que el de la versión Web, y la interfaz se carga automáticamente tras el inicio.

Herramientas de personalización

• compilador mcp_server.jsañadiendo nuevas herramientas.
• Ejemplo: Añadir una herramienta de cálculo:

  const tools = [
  {
  name: "calculator",
  description: "简单计算器",
  parameters: {
  type: "object",
  properties: {
  expression: { type: "string", description: "计算表达式，如 2+3" }
  },
  required: ["expression"]
  }
  }
  ];
  

• Reinicie el servicio MCP (npm run mcp:server), puede utilizarse en el chat.

advertencia

• Las claves API deben almacenarse adecuadamente para evitar fugas.
• Si el arranque falla, compruebe que los puertos (5173 y 3001 por defecto) no están ocupados.
• Las versiones de sobremesa pueden requerir más espacio en disco para garantizar unos recursos del sistema adecuados.

Con estos pasos, puede implementar y utilizar mcp-ui fácilmente para interactuar con la IA e invocar herramientas externas.

escenario de aplicación

1. Asistente personal
   Utilice mcp-ui para consultar el tiempo, buscar noticias o gestionar archivos para mejorar su eficacia diaria.
2. Pruebas para desarrolladores
   Los desarrolladores pueden utilizarla para probar protocolos MCP y modelos de IA y verificar rápidamente la eficacia de las llamadas a herramientas.
3. Aprendizaje educativo
   Los estudiantes o investigadores aprenden cómo interactúa la IA con servicios externos a través de mcp-ui, con una interfaz intuitiva y fácil de entender.

CONTROL DE CALIDAD

1. ¿Qué modelos admite mcp-ui?
   Se admiten todos los modelos compatibles con la API de OpenAI y Anthropic, y los usuarios pueden seleccionar modelos específicos en los ajustes.
2. ¿Cuál es la diferencia entre las versiones Desktop y Web?
   La versión de escritorio no requiere navegador y admite operaciones con archivos locales; la versión web es más ligera y adecuada para su uso en línea.
3. ¿Cómo añado una nueva herramienta?
   modificaciones mcp_server.jsdefina el nombre y los parámetros de la herramienta y reinicie el servicio para que surta efecto.