Feedback Loop MCP

🚀 Feedback Loop MCP

CursorなどのAI支援開発ツールで、人間がループ内に含まれるワークフローを可能にするシンプルなMCPサーバーです。このサーバーを使用すると、コマンドを実行し、その出力を表示し、AIに直接テキストフィードバックを提供できます。また、ClineやWindsurfとも互換性があります。

インスピレーション: このプロジェクトは、Fábio Ferreira (@fabiomlferreira)によるinteractive-feedback-mcpに触発されています。

✨ 主な機能

• クロスプラットフォーム対応: macOS、Windows、Linuxで動作します。
• インタラクティブなUI: 最新のレスポンシブなインターフェイスで、フィードバックを収集します。
• 設定の永続化: プロジェクトごとにUIの設定を保存し、復元できます。
• MCP統合: MCP互換のAIアシスタントとシームレスに統合されます。
• macOSオーバーレイ対応: macOSではネイティブのオーバーレイウィンドウをサポートしています。
• 動的なクイックフィードバック: MCPツール呼び出しを通じて、カスタムのクリック可能なクイックフィードバックオプションを直接提供し、コンテキスト固有の提案を可能にします。

スクリーンショット

macOSのバイブランシーエフェクトを持つフィードバック収集インターフェイス

📦 インストール

npxを使用したクイックスタート（推奨）

このMCPサーバーを使用する最も簡単な方法は、npxを介することです。

npx feedback-loop-mcp

グローバルインストール

頻繁に使用する場合は、グローバルにインストールします。

npm install -g feedback-loop-mcp
feedback-loop-mcp

ローカル開発環境のセットアップ

開発やカスタマイズのためには、以下の手順を実行します。

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

   git clone <repository-url>
   cd feedback-loop-mcp
   

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

   npm install
   

3. 開発モードで実行します。

   npm run dev
   

MCPサーバーの設定

Cursor IDE

Cursorの設定ファイル（mcp.json）に以下の設定を追加します。

{
  "mcpServers": {
    "feedback-loop-mcp": {
      "command": "npx",
      "args": ["feedback-loop-mcp"],
      "timeout": 600,
      "autoApprove": [
        "feedback_loop"
      ]
    }
  }
}

Cline / Windsurf

同様の設定原則が適用されます。MCP設定でサーバーコマンドを設定します。

{
  "mcpServers": {
    "feedback-loop-mcp": {
      "command": "npx",
      "args": ["feedback-loop-mcp"]
    }
  }
}

Claude Desktop

Claude Desktopの設定に以下を追加します。

{
  "mcpServers": {
    "feedback-loop-mcp": {
      "command": "npx",
      "args": ["feedback-loop-mcp"]
    }
  }
}

💻 使用例

基本的な使用法

feedback_loopツールは以下の引数を受け付けます。

• project_directory（文字列、必須）: プロジェクトディレクトリの完全パス。
• prompt（文字列、必須）: 行ったことの要約と質問を組み合わせたもので、何を行ったかを説明し、具体的なフィードバックを求めます。
• quickFeedbackOptions（文字列の配列、オプション）: UIにクリック可能なオプションとして表示される、事前定義されたフィードバック文字列のリストで、より迅速なフィードバックを可能にします。

AIアシスタントからのツール呼び出しの例:

feedback_loop_mcp({
  project_directory: "/path/to/your/project",
  prompt: "I implemented the new user authentication flow with JWT. Does this approach meet your requirements?",
  quickFeedbackOptions: [
    "Yes, looks good!",
    "Needs minor changes to the error handling.",
    "Please try a different approach."
  ]
});

サーバーの実行

npxを使用する場合（推奨）

npx feedback-loop-mcp

グローバルインストールを使用する場合

feedback-loop-mcp

ローカル開発の場合

npm start

コマンドライン引数

アプリケーションは以下のコマンドライン引数を受け付けます。

• --project-directory <path>: プロジェクトディレクトリを設定します。
• --prompt <text>: 初期のプロンプト/要約テキストを設定します。

例:

npm start -- --project-directory "/path/to/project" --prompt "Please review this code"

利用可能なツール

MCPサーバーは以下のツールを提供します。

• feedback_loop: ユーザーフィードバックを収集するUIを表示し、その応答を返します。

AIアシスタントでの使用例:

{
  "tool_name": "feedback_loop",
  "arguments": {
    "project_directory": "/path/to/your/project",
    "summary": "I've implemented the changes you requested and refactored the main module."
  }
}

プロンプトエンジニアリング

最適な結果を得るために、AIアシスタントのカスタムプロンプトに以下を追加します。

Whenever you want to ask a question, always call the MCP feedback_loop tool.
Whenever you're about to complete a user request, call the MCP feedback_loop tool instead of simply ending the process.
Keep calling the feedback_loop tool until the user's feedback is empty, then end the request.

これにより、AIアシスタントがタスクを完了とマークする前に、このMCPサーバーを使用してユーザーフィードバックを要求するようになります。

利点

このモジュールは、アシスタントがユーザーに確認を求めるように誘導することで、投機的でコストの高いツール呼び出しに分岐するのではなく、Cursorなどのプラットフォームでの高額なリクエスト（例: OpenAIツールの呼び出し）の数を大幅に削減できます。場合によっては、最大25回のツール呼び出しを1回のフィードバック対応型のリクエストに統合することができ、リソースを節約し、パフォーマンスを向上させます。

ビルドされたアプリケーションはdistディレクトリに配置されます。

プロジェクト構造

feedback-loop-mcp/
├── main.js              # メインのElectronプロセス
├── preload.js           # 安全なIPCのためのプリロードスクリプト
├── package.json         # プロジェクトの設定
├── README.md           # このファイル
├── assets/             # 静的アセット
│   └── feedback.png    # アプリケーションアイコン
├── renderer/           # レンダラープロセスのファイル
│   ├── index.html      # メインのUI
│   ├── styles.css      # スタイリング
│   └── renderer.js     # UIのロジック
└── server/             # MCPサーバー
    └── mcp-server.js   # Node.jsのMCPサーバー

設定

アプリケーションはElectronの組み込みストレージを使用して設定を自動的に保存します。

• 一般設定: ウィンドウのサイズ、位置、およびUIの設定。
• プロジェクト固有の設定: コマンド履歴とプロジェクト固有の設定。

設定は各プラットフォームの標準的なアプリケーションデータディレクトリに保存されます。

機能の概要

フィードバック収集

• リッチテキストのフィードバック入力
• フィードバックの自動保存
• 簡単な統合のためのJSON出力形式
• タイムスタンプとプロジェクト情報の含まれた出力

プロンプトエンジニアリング

有用なフィードバックを得るためには、効果的なプロンプトを作成することが重要です。promptパラメータを使用する際には、以下のことを目指しましょう。

1. 簡潔で完全な表現: 行ったことと必要なフィードバックを、1つの明確な文で説明します。
2. コンテキストの提供: フィードバックを求める際に影響する重要な実装詳細や選択肢を記載します。
3. 具体的な質問の提出: ユーザーに必要なフィードバックを提供するように導く明確な質問で終えます。
4. 適切な質問の構築: 「これは良いですか？」ではなく、「この実装はXに対するあなたの要件を満たしていますか？」のように質問します。

効果的なプロンプトの例:

I've implemented user authentication using JWT with a 24-hour expiration and refresh tokens. Does this approach provide the security level you need for this application?

クイックフィードバックオプション

quickFeedbackOptionsを定義する際には、以下の点を考慮します。

• 最高で3 - 5つのオプションを提供し、最適なユーザー体験を実現します。
• 肯定的なフィードバックと建設的なフィードバックのオプションを含めます。
• オプションをコンテキスト固有のものにし、汎用的なものにしないようにします。
• オプションを最も肯定的なものから最も批判的なものの順に並べます。

設計の良いクイックフィードバックオプションの例:

quickFeedbackOptions: [
  "Perfect, exactly what I needed",
  "Good approach, but please add more validation",
  "I'd prefer a different authentication method",
  "Let's discuss alternatives in more detail"
]

開発

開発とビルドに関する情報は、DEVELOPMENT.mdを参照してください。

トラブルシューティング

一般的な問題

1. MCPサーバーが接続できない場合: サーバーが実行中であり、設定が正しいことを確認します。
2. npxコマンドが見つからない場合: Node.jsとnpmが正しくインストールされていることを確認します。
3. 権限エラーが発生する場合: Unixシステムでは、バイナリを実行可能にする必要がある場合があります。

デバッグモード

デバッグ出力を伴って実行するには、以下のコマンドを使用します。

DEBUG=* npx feedback-loop-mcp

📄 ライセンス

MITライセンス - 詳細はpackage.jsonを参照してください。