MCP-MESSENGER

SlashMCP

![TypeScript](https://img.shields.io/badge/TypeScript-5.3-blue.svg ![React](https://img.shields.io/badge/React-18.3-61dafb.svg ![Vite](https://img.shields.io/badge/Vite-5.4-646cff.svg

ドキュメントのインテリジェンス、マルチエージェントのオーケストレーション、MCP サーバーの動的な管理を実現する、MCP を活用した AI ワークスペースです。

ライブデモ： slashmcp.vercel.app | リポジトリ： github.com/mcpmessenger/slashmcp

• 🚀 動的な MCP サーバーレジストリ - チャットインターフェースから Model Context Protocol サーバーを管理して呼び出せます
• 📄 ドキュメントインテリジェンス - ドラッグ＆ドロップでアップロードでき、AWS Textract による OCR と GPT‑4o によるビジョン分析を利用できます
• 📊 金融データ - 統合された MCP サーバーを通じて、株価、チャート、予測市場データを利用できます
• 🤖 マルチエージェントフレームワーク - 標準化された MCP ツールアクセスを使用して、複数の AI エージェントをオーケストレーションできます
• 🔄 LLM の切り替え - 実行時に OpenAI、Anthropic、Gemini のプロバイダーをシームレスに切り替えられます

プロジェクトリポジトリ： https://github.com/mcpmessenger/slashmcp

---

概要

• フロントエンド： Vite + React + TypeScript + Tailwind + shadcn/ui
• 状態とデータ： TanStack Query、Supabase クライアント
• ワーカー／統合： Supabase Edge Functions（uploads、vision-worker、textract-worker、chat、job-status）
• クラウドサービス： AWS S3 + Textract、OpenAI GPT‑4o、Google Gemini（フォールバック）、Supabase Postgres
• ストレージ： S3 バケット arn:aws:s3:::tubbyai-products-catalog
• 環境管理： Vite 用の .env、サービスキー用の Supabase 関数シークレット

---

はじめに

前提条件

• Node.js ≥ 18.18（nvm の使用を推奨）
• npm ≥ 9、または任意で pnpm/bun（現在、このプロジェクトは npm にロックされています）
• Supabase CLI（npm install -g supabase または npx supabase）
• 上記の Textract と S3 バケットにアクセスできる AWS 認証情報
• OpenAI API キー（GPT‑4o のビジョン機能用）
• 任意：Google Generative AI キー（Gemini のフォールバック用）、今後の機能向けの Whisper／Google Cloud TTS キー

セットアップ

git clone https://github.com/mcpmessenger/slashmcp.git
cd slashmcp
npm install

.env.local を作成します（Vite は VITE_* 変数を自動的に読み込みます）。

クイックセットアップ： .env.local.example を .env.local にコピーし、値を設定します。

手動セットアップ： 次の内容で .env.local を作成します。

VITE_SUPABASE_URL=https://<your-supabase-ref>.supabase.co
VITE_SUPABASE_FUNCTIONS_URL=https://<your-supabase-ref>.supabase.co/functions/v1
VITE_SUPABASE_PUBLISHABLE_KEY=<supabase-anon-key>
VITE_ALPHA_VANTAGE_API_KEY=<alpha-vantage-key>
VITE_MCP_GATEWAY_URL=http://localhost:8989/invoke # MCP gateway proxy endpoint
VITE_SUPABASE_REDIRECT_URL=http://localhost:8080          # OAuth redirect URL (local dev)
# For production: Set VITE_SUPABASE_REDIRECT_URL to your production domain in Vercel env vars
TWELVEDATA_API_KEY=<twelve-data-key>                # optional fallback provider
ALPHAVANTAGE_CACHE_TTL_MS=300000 # optional Supabase function cache TTL (5 min)
POLYMARKET_CACHE_TTL_MS=120000   # optional cache window for Polymarket lookups

注： ファイルアップロード用の S3 CORS 設定を含む、ローカル開発環境の詳細なセットアップについては LOCAL_SETUP.md を参照してください。

Supabase Edge Function のシークレットを設定します（プロジェクトごとに一度だけ）。

npx supabase secrets set \
  --project-ref <supabase-ref> \
  PROJECT_URL=https://<your-supabase-ref>.supabase.co \
  SERVICE_ROLE_KEY=<supabase-service-role-key> \
  OPENAI_API_KEY=<openai-key> \
  GEMINI_API_KEY=<optional-gemini-key> \
  GEMINI_IMAGE_MODEL=gemini-2.5-flash-image \
  ALPHAVANTAGE_API_KEY=<alpha-vantage-key> \
  TWELVEDATA_API_KEY=<twelve-data-key> \
  ALPHAVANTAGE_CACHE_TTL_MS=300000 \
  POLYMARKET_CACHE_TTL_MS=120000 \
  GOOGLE_CLIENT_ID=<google-oauth-client-id> \
  GOOGLE_CLIENT_SECRET=<google-oauth-client-secret> \
  AWS_REGION=<aws-region> \
  AWS_ACCESS_KEY_ID=<aws-access-key> \
  AWS_SECRET_ACCESS_KEY=<aws-secret> \
  AWS_SESSION_TOKEN=<optional-session-token> \
  AWS_S3_BUCKET=tubbyai-products-catalog

Supabase 関数とともに開発アプリを起動します。

npm run dev             # Vite dev server
npx supabase functions serve --env-file supabase/.env # optional local function emulation

---

主な機能と処理の流れ

1. アップロードとジョブの追跡

   • src/components/ui/chat-input.tsx でメニュー操作（ファイルのアップロード、ドキュメント分析、画像 OCR、音声アシスタント）を実行します。
   • フロントエンドは supabase/functions/uploads を呼び出し、processing_jobs の行を作成して、S3 の署名付き PUT URL を受け取ります。
   • アップロードの進捗は UI に表示され、processing_jobs のステータスの遷移は job-status 関数を通じてポーリングされます。

2. ビジョン分析

   • vision-worker は署名付き GET を使って S3 からアップロードされたアセットを取得し、GPT‑4o に（JSON 構造化プロンプトとともに）送信して、結果を analysis_results に保存します。
   • Gemini のフォールバック用ヘルパーも用意されており、必要に応じて再び有効にできます。

3. Textract OCR

   • textract-worker は AWS Textract を使用し（画像には同期処理、PDF には非同期処理）、OCR テキストと生のレスポンスを保存します。
   • フロントエンドは Textract のエラー（例：「テキストが検出されませんでした」）を適切に処理し、ビジョンの要約にフォールバックします。

4. Supabase スキーマ

   • マイグレーション supabase/migrations/20250108120000_create_processing_jobs.sql により、以下が作成されます。
     • processing_jobs：各アップロードのメタデータ
     • analysis_results：OCR とビジョンの出力（Supabase プロジェクトでマイグレーションを実行してください）
     • onConflict: "job_id" による upsert には、一意インデックス analysis_results_job_id_unique が必要です。

5. 今後の機能のための土台

   • Whisper ASR と Google TTS のパイプライン用フックとメニュー項目が用意されています。
   • 自然言語のプロンプト（または /imagine <prompt>）は supabase/functions/image-generator に渡され、現在は Gemini 2.5 Flash Image（「Nano Banana」）モデルを使って画像を生成します。

6. 株価とチャート

   • チャット入力欄で /quote AAPL、/stock MSFT 3m、または /ticker NVDA 1y と入力すると、Alpha Vantage のデータを取得します。
   • アシスタントは、日次トレンドチャート、変動指標、主要な統計情報を含む価格カードを表示します。
   • MCP エンドポイントのサポートも用意されており、/alphavantage-mcp get_stock_chart symbol=NVDA は同じ表示パイプラインを使用します（Supabase Edge 関数 mcp）。
   • 株価データは 5 分間キャッシュされ、Alpha Vantage がプレミアム制限またはレート制限に達した場合は、（TWELVEDATA_API_KEY が設定されていれば）自動的に Twelve Data にフォールバックします。

7. 予測市場

   • /polymarket-mcp get_market_price market_id=us_election_2024 を使用すると、Supabase の mcp 関数を介して Polymarket からリアルタイムのオッズを取得できます。
   • レスポンスには最良買値／売値、インプライド確率、流動性が含まれ、2 分間キャッシュされます（POLYMARKET_CACHE_TTL_MS で設定可能）。

8. プロバイダーの切り替え

   • /model openai、/model anthropic、または /model gemini を使用すると、実行時にバックエンドの LLM を切り替えられます（デフォルトは OpenAI です）。
   • 使用する各プロバイダーに対応する環境変数と Supabase 関数のシークレット（OPENAI_API_KEY、ANTHROPIC_API_KEY、GEMINI_API_KEY）を設定する必要があります。

9. MCP スラッシュコマンドとレジストリ

   • ヘッダーのサインインボタン（Google OAuth）を使うか、フォールバックのチャットコマンド /slashmcp login [email protected] password=secret を使って認証します。
   • サインイン後は、/slashmcp list、/slashmcp add <name> <https://gateway>（必要に応じて auth=／key= パラメーターを追加）、/slashmcp remove <name|serverId> でサーバーを管理できます。
   • /gemini や /playwright などのプロバイダー用ショートカットは、事前定義されたプリセットに対応しており、必要なシークレットがあれば入力を求めます。
   • 自然言語検出機能により、一般的な株価や Polymarket に関する質問は、利用可能な場合に適切な MCP サーバーへ自動的にルーティングされます。
   • 動的レジストリのレコードは、Supabase の mcp_servers テーブルにユーザーごとに保存され、新しい Edge 関数（mcp-register、mcp-get-registry、mcp-remove、mcp-proxy）を介してプロキシされます。

利用可能なスクリプト

コマンド	説明
npm run dev	Vite 開発サーバーを起動します
npm run build	本番用にビルドします
npm run build:dev	開発モードでビルドします（ステージングに便利です）
npm run preview	ビルド済みアセットをプレビューします
npm run lint	プロジェクト全体で ESLint を実行します

Supabase Edge Functions は次の方法でデプロイできます。

npx supabase functions deploy <function-name> --project-ref <ref>

---

ディレクトリの概要

• src/components — ランディングページと UI コンポーネント（Hero、Features、Architecture、CTA）。
• src/components/ui — shadcn/ui のラッパー。
• src/lib/api.ts — フロントエンド API クライアント（アップロード、Textract、ビジョン）。
• supabase/functions/* — アップロード、ジョブのステータス、Textract、GPT ビジョン、チャット用の Edge Functions。
• supabase/functions/_shared/database.types.ts — 関数間で共有される、生成された Supabase 型定義。
• supabase/migrations — ジョブ追跡と分析結果のデータベーススキーマ。

---

デプロイに関する注意事項

• Supabase のマイグレーションが適用されていることを確認してください（analysis_results のビジョン用カラムと一意インデックス）。
• S3 CORS を設定し、開発環境／本番環境のオリジンとメソッド（GET,PUT,POST,HEAD）を許可してください。
• 新しい環境にデプロイする際は、アップロード／ビジョンワーカーを呼び出す前に、Supabase 関数のシークレットをローテーションし、設定してください。
• 音声合成（Whisper、Google TTS）には引き続き追加のシークレットが必要です。Gemini の画像生成には GEMINI_API_KEY（デフォルトの gemini-2.5-flash-image を上書きする場合は、任意で GEMINI_IMAGE_MODEL）が必要です。ファビコンとロゴのアセットは現在、public/Untitled design.svg と public/Untitled design (12/14).png にあります。
• MCP ゲートウェイは、src/lib/mcp/client.ts が出力する JSON ペイロードに対応する単一の /invoke エンドポイントを公開する必要があります。

---

セキュリティとメンテナンス

• 定期的に npm audit（または npm audit --omit=dev）を実行してください。下記の「セキュリティスキャン」セクションを参照してください。
• Supabase のサービスロールキーはサーバー側のコンテキストでのみ使用し、ブラウザーには決して公開しないでください。
• Textract と特定の S3 バケットへのアクセスには、最小権限の AWS IAM ロールを使用してください。
• マルチテナント対応が必要な場合は、Supabase Row Level Security ポリシーの設定を検討してください。

---

ロードマップ／TODO

• Supabase のエッジワーカーとキューのステータス更新を使った Whisper 文字起こしパイプラインを接続する。
• 音声応答用に Google Cloud Text-to-Speech を統合する。
• プロバイダー選択とコスト追跡を設定可能にして、Gemini のフォールバックを再び有効にする。
• アップロードと分析のフローに自動テスト（Cypress／Playwright）を追加する。
• ユーザーアカウント導入後に備えて、Supabase RLS を強化し、認証を追加する。

---

コントリビューション

コントリビューションを歓迎します！お気軽に Pull Request を送信してください。大きな変更を行う場合は、まず issue を作成し、変更内容についてご相談ください。

1. リポジトリをフォークします
2. フィーチャーブランチを作成します（git checkout -b feature/AmazingFeature）
3. 変更をコミットします（git commit -m 'Add some AmazingFeature'）
4. ブランチにプッシュします（git push origin feature/AmazingFeature）
5. Pull Request を作成します

ライセンス

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

---

SlashMCP チームが ❤️ を込めて開発