mcp-desk

アプリケーションのインターフェースギャラリー

以下のスクリーンショットで、MCP Desk のビジュアルデザインと機能をご覧ください。

mcp-desk アプリケーションのスクリーンショットをご紹介します。

(トップに戻る)

目次

1. アプリケーションのインターフェースギャラリー
2. プロジェクトについて
   • 主な機能
   • 使用技術
3. はじめに
   • 前提条件
   • インストール
   • 開発
   • ビルド
   • ビルド済みアプリケーションのダウンロード
4. 使い方
5. コントリビューション
6. お問い合わせ

プロジェクトについて

mcp-desk は、Multi-Capability Platform（MCP）サーバーとやり取りするためのクライアントとして設計されたデスクトップアプリケーションです。Electron フレームワーク上で最新のウェブ技術を用いて構築されており、MCP の設定を管理し、Langchain 経由で OpenRouter のモデルなどを活用したツール利用を含む、AI エージェントの機能を利用するための使いやすいインターフェースを提供します。

このアプリケーションには、AI エージェントとやり取りするためのチャットインターフェース、MCP サーバー設定を管理する機能、アプリケーション設定をインポート／エクスポートする機能が備わっています。

(トップに戻る)

### 主な機能

• Electron デスクトップアプリケーション：Windows、macOS、Linux に対応しています。
• React フロントエンド：React と TypeScript で構築されたモダンな UI です。
• Shadcn UI と Tailwind CSS：Shadcn UI コンポーネントと Tailwind CSS（v3）を使用し、一貫性のあるユーティリティファーストなスタイルを実現しています。
• MCP クライアント：easy-mcp-use を使用して、MCP サーバーに接続し、やり取りできます。
• AI エージェントチャット：Langchain と OpenRouter のモデルを利用したチャットインターフェースを統合しています。
• ツールの使用：ツール呼び出しに対応した AI モデルをサポートしています。
• モデル選択：ユーザーはさまざまな LLM モデルを選択できます。
• 設定管理：MCP サーバーの詳細を設定し、アプリケーションの設定を管理できます。
• インポート／エクスポート：JSON ファイルを使用して、アプリケーションの設定（localStorage に保存）をバックアップおよび復元できます。
• Markdown サポート：チャット UI 内でアシスタントのメッセージを Markdown 形式で表示します。
• IPC 通信：メインプロセスとレンダラープロセス間で効率的に通信します。

(トップに戻る)

使用技術

• Electron - クロスプラットフォーム対応のデスクトップアプリフレームワーク
• Electron Vite - Electron 用ビルドツールチェーン
• React - UI ライブラリ
• TypeScript - 静的型付けに対応した JavaScript
• Tailwind CSS (v3) - ユーティリティファーストの CSS フレームワーク
• Shadcn UI - 再利用可能な UI コンポーネント
• Langchain - 言語モデルを活用したアプリケーション開発用フレームワーク
• OpenRouter - AI モデルと API
• easy-mcp-use - MCP サーバーとやり取りするためのライブラリ

(トップに戻る)

はじめに

開発またはコントリビューションのために、mcp-desk のローカルコピーを起動するには、以下の手順に従ってください。アプリケーションを利用するだけの場合は、下記のビルド済みアプリケーションのダウンロードセクションをご覧ください。

(トップに戻る)

ビルド済みアプリケーションのダウンロード

開発環境をセットアップせずに mcp-desk を利用する場合は、GitHub Releases ページから、お使いのオペレーティングシステム向けの最新ビルド済みバージョンを直接ダウンロードできます。

• 最新リリースをダウンロード（v1.0.0）

お使いのシステムに適したファイル（macOS は .dmg、Windows は .exe）をダウンロードし、ほかのアプリケーションと同様にインストールしてください。

Linux ユーザーへの注意：現在、リリースに Linux 用のビルド済みパッケージはありません。Linux ユーザーは、プロジェクトをローカルにセットアップするためにインストールとビルドの手順に従い、その後 pnpm build:linux を実行して Linux 用の配布ファイルを生成してください。

(トップに戻る)

前提条件（開発用）

• Node.js（特定のバージョンについては、package.json の engines またはプロジェクト要件を確認してください）
• pnpm パッケージマネージャー

  npm install -g pnpm
  

インストール

1. リポジトリをクローンします（必要に応じて URL を更新してください）

   git clone https://github.com/debsouryadatta/mcp-desk.git
   cd mcp-desk
   

2. pnpm を使用して依存関係をインストールします

   pnpm install
   

(トップに戻る)

開発

ホットリロードを有効にして、開発モードでアプリケーションを実行するには、次のコマンドを実行します。

pnpm run dev

(トップに戻る)

ビルド

配布用にアプリケーションをビルドするには、次のコマンドを実行します。

# For Windows
pnpm run build:win

# For macOS
pnpm run build:mac

# For Linux
pnpm run build:linux

ビルドされたアプリケーションのパッケージは、dist または electron-builder で指定された該当の出力ディレクトリに保存されます。

(トップに戻る)

## 使用方法

アプリケーションを起動した後（pnpm run devを実行するか、ビルド済みの実行ファイルを実行します）：

1. MCP サーバーを設定：設定セクションに移動し、MCP サーバーの設定情報を入力します。
2. LLM モデルを選択：利用可能な選択肢から、お好みの言語モデルを選びます。
3. チャットでやり取り：チャットインターフェースを使って、設定したAIエージェントにリクエストを送信します。
4. 設定を管理：設定のインポート／エクスポート機能を使って、設定をバックアップまたは復元します。

詳しい使用方法については、アプリケーションのUIをご確認ください。

(トップに戻る)

コントリビューション

コントリビューションを歓迎します！mcp-deskの改善に関するご提案がありましたら、ぜひコントリビューションをお寄せください。

1. プロジェクトをフォークします
2. フィーチャーブランチを作成します（git checkout -b feature/AmazingFeature）
3. 変更をコミットします（git commit -m 'Add some AmazingFeature'）
4. ブランチにプッシュします（git push origin feature/AmazingFeature）
5. プルリクエストを作成します

(トップに戻る)

お問い合わせ

Debsourya Datta - X プロフィール @debsourya005 - メール [email protected]

プロジェクトのリンク：https://github.com/debsouryadatta/mcp-desk

(トップに戻る)