MCP Chat Desktop App

Una aplicación de escritorio multiplataforma para interactuar con varios Modelos de Lenguaje Grande (LLMs) a través del Protocolo de Contexto de Modelo (MCP).

Documentación

MCP Chat Desktop App

Una Interfaz Multiplataforma para LLMs

Esta aplicación de escritorio utiliza el MCP (Protocolo de Contexto de Modelos) para conectarse e interactuar de manera fluida con varios Modelos de Lenguaje de Gran Escala (LLMs). Construida sobre Electron, la aplicación garantiza total compatibilidad multiplataforma, permitiendo una operación fluida en diferentes sistemas operativos.

El objetivo principal de este proyecto es ofrecer un código limpio y minimalista que simplifique la comprensión de los principios fundamentales del MCP. Además, proporciona una forma rápida y eficiente de probar múltiples servidores y LLMs, convirtiéndolo en una herramienta ideal tanto para desarrolladores como para investigadores.

Novedades

Este proyecto se originó como una versión modificada de Chat-UI, adoptando inicialmente un enfoque de código minimalista para implementar la funcionalidad principal del MCP con fines educativos.

A través de actualizaciones iterativas del MCP, recibí comentarios de la comunidad que abogaban por una arquitectura completamente nueva, una que eliminara las dependencias de CDN de terceros y estableciera una estructura modular más clara para respaldar mejor el desarrollo derivado y los flujos de depuración.

Esto llevó a la creación de Tool Unitary User Interface, una aplicación de escritorio reestructurada y optimizada para el desarrollo impulsado por IA. Basándose en la base original, TUUI sirve como un paradigma práctico de desarrollo asistido por IA; si te interesa, también puedes aprovechar la IA para desarrollar nuevas funciones para TUUI. La plataforma emplea un sistema estricto de linting y formato para garantizar que el código generado por IA cumpla con los estándares de codificación.

📢 Actualización: junio de 2025 La refactorización del proyecto actual se ha completado en gran medida, y ya está disponible una versión preliminar. Consulta la siguiente documentación para más detalles:

Características

  • Compatibilidad multiplataforma: compatible con Linux, macOS y Windows.

  • Licencia flexible Apache-2.0: permite modificar y crear fácilmente tus propias aplicaciones de escritorio.

  • Configuración dinámica de LLM: compatible con todos los LLMs que admiten el SDK de OpenAI, lo que permite probar rápidamente múltiples backends mediante configuraciones manuales o predefinidas.

  • Gestión de múltiples clientes: configura y gestiona varios clientes para conectarte a múltiples servidores usando la configuración de MCP.

  • Adaptabilidad de la interfaz: la interfaz se puede extraer directamente para uso web, garantizando un ecosistema y una lógica de interacción consistentes entre las versiones web y de escritorio.

Arquitectura

Se adoptó una arquitectura sencilla y coherente con la documentación del MCP para facilitar una comprensión clara de los principios del MCP mediante:

DeepWiki

Cómo usar

Después de clonar o descargar este repositorio:

  1. Modifica el archivo config.json ubicado en src/main. Asegúrate de que command y path especificados en args sean válidos.

  2. Asegúrate de que Node.js esté instalado en tu sistema. Puedes verificarlo ejecutando node -v y npm -v en tu terminal para comprobar sus respectivas versiones.

  3. npm install

  4. npm start

Configuración

Crea un archivo .json y pega el siguiente contenido en él. Este archivo se puede proporcionar como la configuración de interfaz para la interfaz de chat.

  • gtp-api.json

    {
        "chatbotStore": {
            "apiKey": "",
            "url": "https://api.aiql.com",
            "path": "/v1/chat/completions",
            "model": "gpt-4o-mini",
            "max_tokens_value": "",
            "mcp": true
        },
        "defaultChoiceStore": {
            "model": [
                "gpt-4o-mini",
                "gpt-4o",
                "gpt-4",
                "gpt-4-turbo"
            ]
        }
    }
    

Puedes reemplazar la 'url' si tienes acceso directo a la API de OpenAI.

Alternativamente, también puedes usar otro endpoint de API que admita llamadas a funciones:

  • qwen-api.json

    {
        "chatbotStore": {
            "apiKey": "",
            "url": "https://dashscope.aliyuncs.com/compatible-mode",
            "path": "/v1/chat/completions",
            "model": "qwen-turbo",
            "max_tokens_value": "",
            "mcp": true
        },
        "defaultChoiceStore": {
            "model": [
                "qwen-turbo",
                "qwen-plus",
                "qwen-max"
            ]
        }
    }
    
  • deepinfra.json

    {
        "chatbotStore": {
            "apiKey": "",
            "url": "https://api.deepinfra.com",
            "path": "/v1/openai/chat/completions",
            "model": "meta-llama/Meta-Llama-3.1-70B-Instruct",
            "max_tokens_value": "32000",
            "mcp": true
        },
        "defaultChoiceStore": {
            "model": [
                "meta-llama/Meta-Llama-3.1-70B-Instruct",
                "meta-llama/Meta-Llama-3.1-405B-Instruct",
                "meta-llama/Meta-Llama-3.1-8B-Instruct"
            ]
        }
    }
    

Crear la aplicación

Puedes crear tu propia aplicación de escritorio mediante:

npm run build-app

Esta CLI te ayuda a compilar y empaquetar tu aplicación para tu sistema operativo actual, con los artefactos almacenados en el directorio /artifacts.

Para usuarios de Debian/Ubuntu que experimenten problemas de compilación de RPM, prueba una de las siguientes soluciones:

  • Edita package.json para omitir el paso de compilación de RPM. O

  • Instala rpm usando sudo apt-get install rpm (puede que necesites ejecutar sudo apt update para asegurarte de que tu lista de paquetes esté actualizada)

Solución de problemas

Error: spawn npx ENOENT - ISSUE 40

Modifica el config.json en src/main

En Windows, npx puede no funcionar; consulta mi solución alternativa: ISSUE 101

  • O puedes usar node en config.json:
    {
        "mcpServers": {
            "filesystem": {
            "command": "node",
            "args": [
                "node_modules/@modelcontextprotocol/server-filesystem/dist/index.js",
                "D:/Github/mcp-test"
            ]
            }
        }
    }
    

Asegúrate de que la ruta proporcionada sea válida, especialmente si usas una ruta relativa. Se recomienda encarecidamente proporcionar una ruta absoluta para mayor claridad y precisión.

Por defecto, instalaré server-everything, server-filesystem y server-puppeteer con fines de prueba. Sin embargo, puedes instalar bibliotecas de servidor adicionales o usar npx para utilizar otras bibliotecas de servidor según sea necesario.

Tiempo de espera de instalación agotado

Generalmente, después de ejecutar npm install para todo el proyecto, el tamaño total de los archivos en el directorio node_modules suele superar los 500 MB.

Si el proceso de instalación se detiene en menos de 300 MB y la barra de progreso permanece estática, es probable que se deba a un tiempo de espera agotado durante la instalación de la última parte, específicamente Electron.

Este problema suele surgir porque la velocidad de descarga del servidor predeterminado de Electron es excesivamente lenta o incluso inaccesible en ciertas regiones. Para resolverlo, puedes modificar la variable de entorno o global ELECTRON_MIRROR para cambiar a un sitio espejo de Electron que sea accesible desde tu ubicación.

Tiempo de espera de electron-builder agotado

Al usar electron-builder para empaquetar archivos, descarga automáticamente varios paquetes de lanzamiento grandes desde GitHub. Si la conexión de red es inestable, este proceso puede interrumpirse o agotar el tiempo de espera.

En Windows, es posible que debas borrar la caché ubicada en los directorios electron y electron-builder dentro de C:\Users\YOURUSERNAME\AppData\Local antes de intentar reintentar.

Debido a posibles problemas de permisos en la terminal, se recomienda usar la terminal de shell predeterminada en lugar de la terminal integrada de VSCode.

Demo

Soporte multimodal

Soporte de razonamiento y LaTeX

Visualización de herramientas MCP

Descripción general del proceso de llamada a herramientas MCP

Plantilla de prompts MCP

Configuración dinámica de LLM

Solución de problemas con DevTool