Vibe Coder MCP

🚀 振動 Vibe

このプロジェクトは、JavaScript や Python などの技術を用いて、様々な開発タスクを支援するツールです。研究、開発ガイドラインの生成、コードの生成やリファクタリングなど、幅広い機能を提供します。

🚀 クイックスタート

このセクションでは、Vibe の基本的な使い方を説明します。まずはインストールから始めましょう。

✨ 主な機能

• 研究：現代の JavaScript フレームワークについて調査します。
• 生成規則：モバイル銀行アプリの開発ガイドラインを作成します。
• 製品要件文書（PRD）の生成：タスク管理アプリの PRD を作成します。
• ユーザーストーリーの生成：電子商取引サイトのユーザーストーリーを作成します。
• タスクリストの生成：ユーザーストーリーに基づいて、天気アプリのタスクリストを生成します。
• 順序思考：マイクロサービスアーキテクチャの電子商取引プラットフォームを構想します。
• フルスタックスタートキット：ユーザー認証機能を備えた React/Node.js ブログアプリのスタートキットを作成します。
• コードスニペットの生成：calculate_discount という名前の Python 関数のスタブを作成し、価格と割引率を入力します。
• コードのリファクタリング：コードを async/await 形式にリファクタリングします。
• 依存関係の分析：package.json の依存関係を確認します。
• 未コミットの変更の表示：Git の未コミットの変更を確認します。
• ワークフローの実行：newProjectSetup ワークフローを実行し、"projectName": "my-new-app" と "description": "A simple task manager" を入力パラメータとして渡します。

📦 インストール

前提条件

1. Node.js：Node.js 14 以上のバージョンをインストールする必要があります。
2. npm：npm が正しくインストールされていることを確認してください。

インストール手順

1. リポジトリをクローンする

   git clone https://github.com/yourusername/yourrepo.git
   cd yourrepo
   

2. 依存関係をインストールする

   npm install
   

3. プロジェクトをビルドする

   npm run build
   

4. サービスを起動する
   • 本番モード：

     npm start
     

   • 開発モード：

     npm run dev
     

📚 ドキュメント

設定ガイド

環境変数

1. API キー
   • OpenRouter API Key：.env ファイルに OPENROUTER_API_KEY を設定し、キーが有効で十分なクォータがあることを確認してください。
2. ログレベル
   • .env に LOG_LEVEL=debug を追加して、デバッグモードを有効にします。

ワークフロー設定

1. ワークフローファイルを作成する：workflows/ ディレクトリに新しい JSON ファイルを作成し、ワークフローの手順とパラメータを定義します。
2. ワークフローを登録する：

   {
     "id": "newProjectSetup",
     "name": "新项目设置",
     "description": "初始化新项目的必需工具",
     "steps": [
       { "tool": "projectName", "input": "{ \"projectName\": \"my-new-app\" }" },
       { "tool": "description", "input": "{ \"description\": \"A simple task manager\" }" }
     ]
   }
   

実行モード

標準入力（AI エージェント）

• 本番モード：

  npm start
  

  • ログは標準エラー出力に出力され、AI エージェントの起動をシミュレートします。
  • NODE_ENV=production 環境変数を使用します。

• 開発モード：

  npm run dev
  

  • ログはカラー形式で出力され、デバッグが容易になります。
  • nodemon と pino-pretty をインストールする必要があります。

HTTP インターフェース（SSE モード）

• 本番モード：

  npm run start:sse
  

• 開発モード：

  npm run dev:sse
  

  • HTTP プロトコルを使用して通信し、デフォルトでポート 3000 を監視します。
  • アクセス先：http://localhost:3000

トラブルシューティング

接続問題

MCP サーバーが AI エージェントによって認識されない場合

1. 設定パスを確認する：
   • args 配列の絶対パスが正しいことを確認してください。
   • Windows でも全スラッシュ / を使用します。
   • node <path-to-build/index.js> を直接実行して、Node がパスを見つけられるかテストします。
2. 設定形式を確認する：
   • JSON 構文が正しく、構文エラーがないことを確認してください。
   • mcpServers オブジェクトのサーバー設定が完全であることを確認してください。
3. エージェントプログラムを再起動する：
   • アプリを完全に閉じ（最小化ではなく）、再度開きます。

サーバーが実行中だがツールが使用できない場合

1. 無効化フラグを確認する：
   • "disabled": false 設定が正しいことを確認してください。
   • この値が true になる可能性のある要因をすべて削除します。
2. ワークフローの登録を確認する：
   • すべてのカスタムワークフローが正しく読み込まれていることを確認してください。特に newProjectSetup を確認します。

ツールリスト

1. プロジェクト名
   • 説明：新しいプロジェクトの名前を入力します。
   • 例："my-new-app"
2. プロジェクトの説明
   • 説明：プロジェクトの用途や目標を簡単に説明します。
   • 例："A simple task manager"
3. 研究ツール
   • 技術トレンドやフレームワークの特性などのクエリをサポートします。
4. 生成規則ツール
   • 入力に基づいて具体的な開発規範ドキュメントを生成します。
5. PRD 生成ツール
   • 構造化されたプロジェクト要件文書を出力します。
6. ユーザーストーリー生成ツール
   • ユーザーロールと対応する要件を定義します。
7. タスクリスト生成ツール
   • プロジェクト関連のタスクリストを生成し、並べ替えや優先度の設定が可能です。
8. 順序思考ツール
   • システムアーキテクチャ設計や技術選択を支援します。
9. フルスタックスタートキットツール
   • 依存関係管理、設定ファイルなどを含む基本的なプロジェクト構築テンプレートを提供します。
10. コードスニペット生成ツール
    • 入力パラメータに基づいて対応するコードロジックを生成します。
11. コードリファクタリングツール
    • 既存のコードを非同期処理形式に変換します。
12. 依存関係分析ツール
    • プロジェクトの依存関係を確認し、潜在的なリスクや最適化の機会を特定します。
13. 未コミットの変更表示ツール
    • Git リポジトリの未コミットの変更を表示します。

サンプルワークフロー

新しいプロジェクトの初期化

{
  "id": "newProjectSetup",
  "name": "新项目设置",
  "description": "初始化新项目的必需配置和依赖",
  "steps": [
    { "tool": "projectName", "input": "{ \"projectName\": \"my-new-app\" }" },
    { "tool": "description", "input": "{ \"description\": \"A simple task manager\" }" }
  ]
}

開発規範の生成

{
  "id": "generateDevelopmentGuidelines",
  "name": "生成开发准则",
  "description": "为项目制定详细的技术规范和最佳实践",
  "steps": [
    { "tool": "generateRules", "input": "{ \"project\": \"my-new-app\" }" }
  ]
}

ログと監視

1. ログレベル
   • デバッグモード：DEBUG=true
   • 情報モード：デフォルト
   • エラーモード：NODE_ENV=production
2. 監視ツール
   • pm2 または他のプロセスマネージャーを使用して、サービスが安定して実行されるようにします。
   • ログファイルを設定して、問題のトラブルシューティングを容易にします。

セキュリティに関する注意事項

1. 環境変数のセキュリティ：
   • API キーなどの機密情報がバージョン管理システムに書き込まれないようにしてください。
2. 入力検証：
   • すべての外部入力を厳密に検証し、サニタイズして、注入攻撃やその他のセキュリティホールを防止します。
3. ログ管理：
   • ログに機密情報を記録しないようにし、コンプライアンスを確保します。

アップグレードガイド

1. 依存関係のアップグレード

   npm update
   

2. ワークフローの更新
   • workflows/ ディレクトリのすべての JSON ファイルを確認して更新します。
   • 新しく追加または変更されたワークフローが既存のシステムと互換性があることを確認します。
3. 設定の調整
   • .env ファイルのパラメータを更新し、新しいキーやログレベルを設定します。
   • サービスを再起動して変更を適用します。

コントリビュートガイド

1. コードの貢献
   • リポジトリを Fork してから Pull Request を送信してください。
   • プロジェクトのコーディング規約とコミットガイドラインに従ってください。