MCP Chat Desktop App

MCP Chat Desktop App

LLM 向けクロスプラットフォームインターフェース

このデスクトップアプリケーションは MCP（Model Context Protocol）を利用して、さまざまな大規模言語モデル（LLM）にシームレスに接続し、対話できます。Electron を基盤としており、完全なクロスプラットフォーム互換性を備えているため、さまざまなオペレーティングシステムでスムーズに動作します。

このプロジェクトの主な目的は、MCP の基本原則を理解しやすくする、シンプルで最小限のコードベースを提供することです。また、複数のサーバーや LLM をすばやく効率的にテストできるため、開発者や研究者に最適なツールとなっています。

ニュース

このプロジェクトは、教育目的で MCP の中核機能を実装するため、当初は最小限のコードを採用した Chat-UI の改変版として始まりました。

MCP の反復的な更新を通じて、コミュニティから、サードパーティの CDN 依存をなくし、派生開発やデバッグのワークフローをより適切にサポートする、モジュール構造が明確な完全新規のアーキテクチャを求めるフィードバックを受けました。

これを受けて、AI を活用した開発に最適化された再構築版のデスクトップアプリケーション、Tool Unitary User Interface が誕生しました。元の基盤を発展させた TUUI は、実用的な AI 支援開発のパラダイムとして機能します。興味があれば、AI を活用して TUUI の新機能を開発することもできます。このプラットフォームでは、厳格な lint とフォーマットのシステムを採用しており、AI が生成したコードがコーディング規約に準拠するようにしています。

📢 更新：2025年6月
現在進めているプロジェクトのリファクタリングはほぼ完了し、プレリリース版を利用できるようになりました。詳細については、以下のドキュメントを参照してください。

• TUUI GitHub リポジトリ
• TUUI アーキテクチャ
• TUUI 公式ウェブサイト

特長

• クロスプラットフォーム互換性：Linux、macOS、Windows に対応しています。

• 柔軟な Apache-2.0 ライセンス：デスクトップアプリケーションを簡単に改変、構築できます。

• 動的な LLM 設定：OpenAI SDK がサポートするすべての LLM と互換性があり、手動またはプリセットの設定を使って複数のバックエンドをすばやくテストできます。

• 複数クライアントの管理：MCP 設定を使用して、複数のサーバーに接続する複数のクライアントを設定、管理できます。

• UI の適応性：UI を直接抽出してウェブで使用できるため、ウェブ版とデスクトップ版で一貫したエコシステムと操作ロジックを維持できます。

アーキテクチャ

MCP の原則を明確に理解できるよう、MCP ドキュメントに沿ったシンプルなアーキテクチャを採用しています。

DeepWiki

使用方法

このリポジトリをクローンまたはダウンロードした後、以下の手順に従ってください。

1. src/main にある config.json ファイルを変更してください。
   args に指定された command と path が有効であることを確認してください。

2. お使いのシステムに Node.js がインストールされていることを確認してください。
   ターミナルで node -v と npm -v を実行すると、それぞれのバージョンを確認できます。

3. npm install

4. npm start

設定

.json ファイルを作成し、以下のコンテンツをペーストしてください。このファイルは 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"
          ]
      }
  }
  

OpenAI API に直接アクセスできる場合は、「url」を置き換えることができます。

または、関数呼び出しをサポートする別の API エンドポイントを使用することもできます。

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

アプリケーションのビルド

以下の方法で独自のデスクトップアプリを構築できます。

npm run build-app

このコマンドラインツールは現在の OS 用にアプリケーションをビルドしてパッケージ化するのに役立ち、成果物は /artifacts ディレクトリに保存されます。

Debian/Ubuntu ユーザーが RPM ビルドの問題を経験している場合は、以下のいずれかの解決策を試してください。

• package.json を編集して RPM ビルドステップをスキップします。または

• sudo apt-get install rpm を使用して rpm をインストールします（パッケージリストが最新であることを確認するために sudo apt update を実行する必要があるかもしれません）。

トラブルシューティング

エラー: spawn npx ENOENT - ISSUE 40

src/main 内の config.json を修正してください。

Windows では npx が機能しないため、以下の回避策を参照してください。ISSUE 101

• または config.json で node を使用できます。

  {
      "mcpServers": {
          "filesystem": {
          "command": "node",
          "args": [
              "node_modules/@modelcontextprotocol/server-filesystem/dist/index.js",
              "D:/Github/mcp-test"
          ]
          }
      }
  }
  

提供されたパスが有効であることを確認してください。特に相対パスを使用している場合は注意が必要です。より明確性と精度を確保するために、絶対パスの提供を強く推奨します。

デフォルトでは、テスト目的で server-everything、server-filesystem、server-puppeteer をインストールします。ただし、追加のサーバーライブラリをインストールするか、npx を使用して必要に応じて他のサーバーライブラリを利用できます。

インストールタイムアウト

一般的に、プロジェクト全体に対して npm install を実行した後、node_modules ディレクトリ内のファイルの合計サイズは通常 500MB を超えます。

インストール処理が 300MB 未満で停止し、進捗バーが動かないままの場合、おそらくインストール後半、特に Electron のインストール中にタイムアウトが発生しています。

この問題は、Electron のデフォルトサーバーからのダウンロード速度が非常に遅い、または特定の地域ではアクセスできないことが原因で発生することがあります。これを解決するには、環境変数またはグローバル変数 ELECTRON_MIRROR を変更して、お使いの場所からアクセス可能な Electron ミラーサイトに切り替えることができます。

Electron builder タイムアウト

electron-builder を使用してファイルをパッケージ化する場合、GitHub から複数の大規模なリリースパッケージが自動的にダウンロードされます。ネットワーク接続が不安定な場合、このプロセスが中断またはタイムアウトする可能性があります。

Windows では、再試行する前に C:\Users\YOURUSERNAME\AppData\Local 内の electron および electron-builder ディレクトリにあるキャッシュをクリアする必要があります。

潜在的なターミナルのアクセス許可の問題があるため、VSCode の組み込みターミナルではなく、デフォルトのシェルターミナルを使用することをお勧めします。

デモ

マルチモーダル対応

推論および Latex 対応

MCP ツール可視化

MCP ツールコールプロセス概要

MCP プロンプトテンプレート

動的 LLM 設定

DevTool トラブルシューティング