Flutter + dart_mcp + AI Desktop App Demo

Flutter + dart_mcp + AI デスクトップアプリ デモ

このFlutterベースのプロジェクトは、MCP（Multi-Connection Protocol）サーバーを管理・設定するために設計されています。このアプリケーションは、APIキーの管理、サーバー設定の構成、カスタム環境変数の処理のためのユーザーフレンドリーなインターフェースを提供します。アプリケーションはmcp_dartパッケージを使用してMCP サーバーとの通信を実現しています。

スクリーンショット

機能

• APIキー管理: SharedPreferencesを使用してAPIキーを安全に保存、クリア、管理します。
• MCP サーバー管理:
  • MCP サーバー設定の追加、編集、削除。
  • サーバー接続状態のトグル。
  • サーバー接続を同期するための変更の適用。
• カスタム環境変数: 各サーバーのカスタム環境変数を定義・管理します。
• 表示設定: チャットメッセージ内のコードブロックの表示を切り替えます。

インストール

このプロジェクトを実行するには、マシンにFlutter SDKがインストールされていることを確認してください。ガイドラインに従ってください。

1. リポジトリをクローンします:

   git clone [email protected]:leehack/flutter-mcp-ai-chat.git
   cd flutter-mcp-ai-chat
   

2. 依存関係をインストールします:

   flutter pub get
   

3. アプリケーションを実行します:

   flutter run
   

使い方

APIキー管理

APIキーはGeminiモデルと通信するために必要です。設定画面でAPIキーを管理できます。キーはGoogle AI Studioから作成できます。

1. 設定画面に移動します。
2. 提供されたテキストフィールドにAPIキーを入力します。
3. キーを保存をクリックしてキーをローカルに保存します。
4. キーをクリアボタンを使用して保存されたキーを削除します。

MCP サーバー管理

MCP サーバー管理機能を使用すると、サーバー設定を追加、編集、削除できます。各サーバーの接続状態もトグルできます。現在のところ、このアプリケーションはstdioベースのサーバーのみをサポートしています。MCP サーバーの例はhttps://github.com/modelcontextprotocol/serversで見つけることができます。

1. 新しいMCP サーバーを追加ボタンをクリックして新しいサーバーを追加します。
2. 名前、コマンド、引数、カスタム環境変数を含むサーバーの詳細を入力します。
3. サーバー設定を保存します。
4. サーバーリストのスイッチを使用してサーバーの接続状態をトグルします。
5. サーバー接続を同期するために変更を適用します。

カスタム環境変数

1. サーバーを追加または編集する際に、カスタム環境変数セクションを使用してキーと値のペアを定義します。
2. 変数を追加ボタンを使用して新しい変数を追加します。
3. 各変数の横の削除アイコンを使用して変数を削除します。

貢献

貢献を歓迎します。以下の手順に従ってください:

1. リポジトリをフォークします。
2. 機能やバグ修正のための新しいブランチを作成します。
3. 変更をコミットしてフォークにプッシュします。
4. 変更の詳細な説明と共にプルリクエストを提出します。

ライセンス

このプロジェクトはMITライセンスの下でライセンスされています。詳細はLICENSEファイルを参照してください。