MCP 聊天应用

MCP チャットアプリケーション

Model Context Protocol に基づくインテリジェントなチャットアプリケーション。Web 環境とデスクトップ環境に対応しています。

プロジェクト紹介

MCP チャットアプリケーションは Vue.js で構築されたモダンなチャットインターフェースで、Model Context Protocol (MCP) を通じて様々なサービスとツールと対話できます。MCP は Anthropic が推出したオープンプロトコル標準で、AI モデルがデータベース、ファイルシステム、ブラウザ自動化、サードパーティの MCP サービスなどを直接呼び出すことを可能にします。

本アプリケーションは Web クライアントとデスクトップクライアント（Electron ベース）の両方に対応しており、OpenAI と Anthropic という 2 つの主流 LLM サービスを統合しています。

アプリケーション画面表示

コア機能の特徴

• シンプルでモダンなチャットインターフェース設計
• MCP プロトコル対応：外部ツールやサービスとのシームレスな対話
• マルチモデル対応：OpenAI と Anthropic の両方の API 形式に互換
• カスタマイズ可能な設定：API キー、ベース URL、モデルオプションの設定が可能
• 拡張可能なアーキテクチャ：カスタムツールとサービスの追加に対応
• デスクトップアプリ：クロスプラットフォーム（Windows/Mac/Linux）デスクトップ体験を提供
• ブラウザ自動化：AI がブラウザを制御してタスクを実行できます
• ローカルサービス：MCP バックエンドサービスを統合して強力な機能を提供

システム要件

• Node.js: v16.0.0 以上
• npm: v8.0.0 以上
• モダンブラウザ：Chrome、Firefox、Safari、Edge の最新版
• オペレーティングシステム：Windows 10 以上、macOS 10.15 以上、Ubuntu 20.04 以上（デスクトップ版）

クイックスタート

依存関係のインストール

npm install

環境変数の設定（オプション）

.env.example ファイルを .env にコピーして、必要な API キーと設定を入力してください：

cp .env.example .env

.env ファイルを編集して以下の内容を設定してください：

VITE_API_KEY=your_api_key_here
VITE_MODEL_PROVIDER=openai  # 或 anthropic
MCP_SERVER_PORT=3001        # MCP服务器端口

アプリケーションの起動

Web アプリケーション開発モード

# 启动前端开发服务器
npm run dev

# 在另一个终端启动MCP后端服务
npm run mcp:server

デスクトップアプリケーション開発モード

# 启动Electron应用
npm run electron:dev

# 在另一个终端启动MCP后端服务
npm run mcp:server

アプリケーションの実行

Web アプリケーション

npm run dev

# 在另一个终端启动MCP后端服务
npm run mcp:server

デスクトップアプリケーション

# 启动Electron应用
npm run electron:dev

# 在另一个终端启动MCP后端服务
npm run mcp:server

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

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

npm run build

デスクトップアプリケーションビルド

# 构建所有平台版本
npm run electron:build

# 构建特定平台版本
npm run electron:buildwin  # Windows
npm run electron:buildmac  # macOS
npm run electron:buildlinux  # Linux

詳細な使用方法

モデル設定の構成

1. アプリケーションを開いた後、右上隅の⚙️設定アイコンをクリックします
2. 設定パネルで以下を設定します：
   • モデルプロバイダー：OpenAI または Anthropic を選択
   • API キー：対応するサービスの API キーを入力
   • API ベース URL：オプション。カスタム API エンドポイントまたはプロキシサービスを使用する場合
   • モデル：使用する特定のモデルを選択
   • カスタムモデル：カスタムモデル設定を追加・管理

チャット機能の使用

• 下部の入力フィールドに質問またはコマンドを入力します
• 送信ボタンをクリックするか、Enter キーを押してメッセージを送信
• ツール機能を使用してリアルタイム情報を取得するか、タスクを実行します（Web ページの閲覧、データの照会など）
• Markdown 形式とコードハイライト表示に対応

MCP ツールの使用

本アプリケーションには以下の MCP ツールが統合されています：

• ブラウザ自動化：AI がブラウザを制御して Web ページにアクセスし、情報を抽出できます
• 天気クエリ：リアルタイム天気情報を取得
• ニュース検索：最新のニュースコンテンツを検索
• ファイル操作：ファイルの読み取りと書き込み（デスクトップ版）

チャットインターフェースから直接 AI にこれらのツールの使用をリクエストでき、追加の操作は不要です。

プロジェクトアーキテクチャ

ディレクトリ構造

• src/ - フロントエンドソースコード
  • components/ - Vue コンポーネント
  • services/ - API サービス
  • composables/ - Vue Composition API 関数
  • utils/ - ユーティリティ関数
  • styles/ - CSS スタイルファイル
  • assets/ - 静的資産
• electron/ - Electron デスクトップアプリケーションコード
• config/ - アプリケーション設定ファイル
• mcp_server.js - MCP バックエンドサービス
• public/ - 静的資産ディレクトリ

主要技術スタック

• フロントエンド：Vue 3、TypeScript、Vite
• API 統合：OpenAI API、Anthropic API
• MCP プロトコル：@modelcontextprotocol/sdk
• デスクトップアプリケーション：Electron
• サーバーサイド：Express、Node.js

開発ガイド

新しい MCP ツールの追加

1. mcp_server.js のツール定義部分に新しいツール説明を追加
2. 対応するツール処理ロジックを実装
3. MCP サーバーを再起動して変更を適用

例：

// 添加新工具定义
const tools = [
  {
    name: "my_new_tool",
    description: "这是一个新工具的描述",
    parameters: {
      type: "object",
      properties: {
        param1: { type: "string", description: "参数1的描述" }
      },
      required: ["param1"]
    }
  },
  // 其他工具...
];

// 实现工具处理逻辑
app.post('/mcp/tools/call', async (req, res) => {
  // ...
  if (toolName === "my_new_tool") {
    const result = await handleMyNewTool(arguments);
    return res.json({ result });
  }
  // ...
});

UI コンポーネントのカスタマイズ

src/components/ ディレクトリ内の Vue コンポーネントを編集または作成して UI をカスタマイズしてください。

デプロイメントガイド

Web アプリケーションのデプロイ

1. npm run build を実行して本番環境コードを生成
2. dist ディレクトリを任意の静的 Web サーバーにデプロイ
3. MCP バックエンドサービスが正しく設定され実行されていることを確認

デスクトップアプリケーションの配布

1. 対応するプラットフォームのビルドコマンドを実行
2. dist_electron ディレクトリからビルド済みのインストールパッケージを確認
3. インストールパッケージをユーザーに配布

トラブルシューティング

• API 接続問題：API キーとネットワーク接続を確認
• MCP サービス障害：サーバーログを確認し、関連する依存関係がインストールされていることを確認
• UI 表示異常：ブラウザキャッシュをクリアし、コンソールエラーを確認
• ツール呼び出し失敗：MCP バックエンドログを確認し、ツールが正しく設定されていることを確認

関連リソース

• Model Context Protocol ドキュメント
• OpenAI API ドキュメント
• Anthropic Claude API
• Vue.js ドキュメント
• Electron ドキュメント

コントリビューションガイド

このプロジェクトの改善に向けて、Pull Request または Issue の提出を歓迎します。コントリビュートする前に、既存の Issue とプロジェクトロードマップを確認してください。

ライセンス

MIT