react-fastapi-mcp-server

ken-1200/react-fastapi-mcp-server

3.1

If you are the rightful owner of react-fastapi-mcp-server and would like to certify it and/or have it hosted online, please leave a comment on the right or send an email to henry@mcphub.com.

This project implements a Model Context Protocol (MCP) server using React for the frontend and FastAPI for the backend.

React FastAPI MCP Server

このプロジェクトは、React（フロントエンド）とFastAPI（バックエンド）を使用したMCP（Model Context Protocol）サーバーの実装です。

https://github.com/user-attachments/assets/4b54699b-64f9-4046-b27b-6d0962d9dd5c

🚀 主な機能

  • MCP Server: FastAPIベースのModel Context Protocolサーバー
  • React Frontend: Next.js + TypeScriptによるモダンなWebフロントエンド
  • OpenAI LLM統合: 自然言語でのツール自動選択・実行
  • ツール実行許可機能: セキュリティを考慮したツール実行前の許可確認
  • リアルタイム通信: Server-Sent Events (SSE) による双方向通信
  • 多様なチャット UI: シンプルなMCP通信から高度なLLM統合まで

📁 プロジェクト構造

.
├── backend/          # FastAPIバックエンドサーバー
│   ├── app/         # FastAPIアプリケーション
│   ├── tests/       # テストファイル
│   └── README.md    # バックエンド詳細説明
├── frontend/         # Next.js + React フロントエンド
│   ├── app/         # Next.js App Router
│   ├── components/  # Reactコンポーネント
│   ├── lib/         # ユーティリティ・クライアント
│   └── README.md    # フロントエンド詳細説明
├── infra/           # インフラストラクチャ設定
└── README.md        # このファイル

🛠 セットアップ

前提条件

  • Python 3.11+
  • Node.js 18+
  • pnpm (推奨) または npm

バックエンドセットアップ

# バックエンドディレクトリに移動
cd backend

# 開発環境のセットアップ
make dev

# 開発サーバーの起動
make run-dev

サーバーは http://localhost:8000 で起動します。

フロントエンドセットアップ

# フロントエンドディレクトリに移動
cd frontend

# 依存関係のインストール
pnpm install

# 環境変数の設定（必要に応じて）
cp .env.example .env.local
# .env.local を編集してOpenAI API キーなどを設定

# 開発サーバーの起動
pnpm dev

フロントエンドは http://localhost:3000 で起動します。

🎯 使用方法

1. シンプルなMCP通信

2. OpenAI LLM統合（許可機能付き）

  • URL: http://localhost:3000/llm
  • 説明: OpenAI APIを使用した自然言語処理とツール実行許可機能
  • 機能:
    • 自然言語でのツール自動選択
    • ツール実行前の許可確認ダイアログ
    • 日本語での意図解析・応答生成

3. その他のインターフェース

🔧 開発

バックエンド開発

cd backend

# テストの実行
make test

# リンターの実行
make lint

# コードフォーマット
make format

# 型チェック
make typecheck

フロントエンド開発

cd frontend

# テストの実行
pnpm test

# リンターの実行
pnpm lint

# 型チェック
pnpm type-check

# ビルド
pnpm build

🐳 Docker を使用した起動

バックエンド

cd backend

# 開発環境で起動
make docker-run-dev

# 本番環境で起動
make docker-run-prod

フロントエンド

cd frontend

# Dockerでの起動
docker build -t react-mcp-frontend .
docker run -p 3000:3000 react-mcp-frontend

📊 API ドキュメント

サーバー起動後、以下のURLでAPIドキュメントを確認できます：

🛡️ セキュリティ機能

ツール実行許可機能

/llm ページでは、MCPツールを実行する前にユーザーの明示的な許可を求めます：

  • ツール名・説明・引数の表示
  • 実行理由の説明
  • 許可/拒否の選択
  • 許可機能のON/OFF切り替え

🔗 主要技術スタック

バックエンド

  • FastAPI: モダンなPython Webフレームワーク
  • Pydantic: データ検証・設定管理
  • uvicorn: ASGIサーバー
  • pytest: テストフレームワーク

フロントエンド

  • Next.js 15: Reactフレームワーク
  • TypeScript: 型安全性
  • Tailwind CSS: ユーティリティファーストCSS
  • Lucide React: アイコンライブラリ
  • AI SDK: OpenAI API統合

📝 環境変数

フロントエンド (.env.local)

# OpenAI API設定
OPENAI_API_KEY=your_openai_api_key_here
OPENAI_MODEL=gpt-4o-mini  # 使用するモデル
OPENAI_TEMPERATURE=0.7
OPENAI_MAX_TOKENS=1000

# バックエンドURL
NEXT_PUBLIC_BACKEND_URL=http://localhost:8000

🤝 コントリビューション

  1. フォークしてください
  2. フィーチャーブランチを作成してください (git checkout -b feature/AmazingFeature)
  3. 変更をコミットしてください (git commit -m 'Add some AmazingFeature')
  4. ブランチにプッシュしてください (git push origin feature/AmazingFeature)
  5. プルリクエストを開いてください

📄 ライセンス

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

🙋‍♂️ サポート

質問や問題がある場合は、Issues を作成してください。