MCP Chat Desktop App

A Cross-Platform Interface for LLMs

This desktop application leverages the Model Context Protocol (MCP) to facilitate seamless interaction with various Large Language Models (LLMs). Built with Electron, it ensures cross-platform compatibility across Linux, macOS, and Windows.

The project aims to provide a clean, minimalistic codebase for understanding MCP principles and efficiently testing multiple servers and LLMs, making it ideal for developers and researchers.

Features

• Cross-Platform Compatibility: Supports Linux, macOS, and Windows.
• Flexible Apache-2.0 License: Allows easy modification and building of your own desktop applications.
• Dynamic LLM Configuration: Compatible with all OpenAI SDK-supported LLMs, enabling quick testing of multiple backends through manual or preset configurations.
• Multi-Client Management: Configure and manage multiple clients to connect to multiple servers using MCP config.
• UI Adaptability: The UI can be directly extracted for web use, ensuring consistent ecosystem and interaction logic across web and desktop versions.

Architecture

The architecture, consistent with MCP documentation, includes Renderer, APP, Client, and Server components, communicating via IPC and Stdio. Key files are main.ts, client.ts, and preload.ts.

How to use

1. Modify config.json in src/main with valid command and path in args.
2. Ensure Node.js is installed (node -v, npm -v).
3. npm install
4. npm start

Configuration

Create a .json file and paste the following content into it. This file can then be provided as the interface configuration for the Chat UI.

• 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"
          ]
      }
  }

You can replace the 'url' if you have direct access to the OpenAI API.

Alternatively, you can also use another API endpoint that supports function calls:

• 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"
          ]
      }
  }

Build Application

npm run build-app

Builds and packages the application for the current OS, storing artifacts in /artifacts. Debian/Ubuntu users may need to install rpm or skip the RPM build step.

Troubleshooting

Addresses common issues like spawn npx ENOENT (ISSUE 40) and installation/Electron builder timeouts, providing workarounds and solutions.

Demo

Presents visual demonstrations of multimodal support, reasoning with LaTeX, MCP tools visualization, toolcall process overview, prompts template, dynamic LLM config, and DevTool troubleshooting.