Mcpholder

🚀 MCPクライアントアプリケーション

これは、AI大規模モデルにサービスを提供するMCP（モデルコンテキストプロトコル）クライアントプログラム - MCPHOLDERです。このプログラムは、携帯電話上でClaude Desktopに似た機能を実現し、Cloudflare上のクラウドサービスを集約して、AI大規模モデルに外部サポートを提供します。

✨ 主な機能

• AIチャット画面：ユーザーは異なる大規模モデルを選択してチャットでき、デフォルトではClaude - 3 Sonnet 3.7が使用されます。
• MCPサービス画面：現在利用可能なMCPサービスとその状態を表示し、新しいサービスを追加するエントリーを提供します。
• MCPサービステスト画面：新しいMCPサービスの接続をテストするために使用され、サービス名、URL、ポートなどの情報を入力します。

🔧 技術詳細

• Flutter 3.x
• Dart 3.x
• font_awesome_flutter：アイコン表示に使用
• google_fonts：フォントスタイルに使用

🚀 クイックスタート

1. lib/configディレクトリ下のopenRouterApiKeyを修正してください。現在のプログラムはopenrouterのClaude Sonnet 3.7のみをサポートしています。
2. ネットワーク環境の問題で、Flutterのlibライブラリのみをアップロードできるため、以下のインストール方法は使用できない場合があります。
   1. Flutter環境がインストールされていることを確認してください。
   2. このリポジトリをクローンします。
   3. 以下のコマンドを実行して依存関係をインストールします。

      flutter pub get
      

   4. アプリを実行します。

      flutter run
      

📚 ドキュメント

プロジェクト構造

lib/
  ├── main.dart              # アプリケーションのエントリーポイント
  ├── screens/               # 画面
  │   ├── chat_screen.dart   # AIチャット画面
  │   ├── services_screen.dart  # MCPサービス画面
  │   └── test_service_screen.dart  # MCPサービステスト画面
  ├── widgets/               # 再利用可能なコンポーネント
  ├── models/                # データモデル
  └── utils/                 # ユーティリティ関数

MCPプロトコル

モデルコンテキストプロトコル（MCP）は、AIモデルが外部ツールとAPIを介して操作を実行できるようにするプロトコルです。これにより、AIアシスタントは、電子メールの送信、データの照会、またはアプリケーションの制御などの実際のタスクを実行できます。

MCPプロトコルの詳細については、CloudflareのMCPドキュメントを参照してください。

デモ

動画リンク

テストサービス画面では、以下の操作が必要です。

1. サービス名を入力：add
2. CloudflareのサービスURLを入力：https://remote - mcp.yunhaisui.workers.dev/sse
3. ポートは入力不要
4. APIキー：何かを入力する必要があり、空にすることはできません。

その後、「クライアントを登録してIDを取得」をクリックし、成功したら「接続をテスト」をクリックします。このとき、認証のOAuth承認ボタンが表示され、クリックしてOAuth承認を開始します。新しく表示されたWebView画面で「approve」をクリックします。その後、Appは自動的にMCP内のツールの数を認識します。

この時点でMCPサービス画面に戻ると、新しい足し算ツールが追加されていることがわかります。AIチャット画面で簡単な足し算の問題を入力すると、Claude Sonnetは自動的にMCPサービスを呼び出します。現在はopenrouterサービスを使用しており、速度は遅いですが、最終的に正しい結果を得ることができます。来週はCloudflare上でいくつかの面白いMCPサービスをテストする予定です。