React Fastapi MCP Server

React FastAPI MCP服务器

此项目包括：React（前端）和FastAPI（后端）MCP（Model Context Protocol）服务器实施。

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

🚀 主要功能

• MCP服务器: FastAPI基本Model Context Protocol服务器
• 反应前端: 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通讯

• 统一资源定位符: http://localhost:3000/mcp
• 说明：基本MCP通信功能

2. OpenAI LLM统合（许可机能付き）

• 统一资源定位符: http://localhost:3000/llm
• 说明: OpenAI API使用的自然语言处理和工具执行许可功能
• 机能:

- 在自然语言中自动选择工具 - 工具执行前的许可确认对话框 - 日语意图解析・应答生成

3.其他接口

• Claude风: http://localhost:3000/claude
• SSE通信: http://localhost:3000/sse
• 最适化版: http://localhost:3000/llm-优化

🔧 开発

后端开发

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查看文档：

• Swagger用户界面: http://localhost:8000/docs
• ReDoc: http://localhost:8000/redoc

🛡️ 安全功能

工具执行许可功能

/llm 在页面上，单击MCP在运行工具之前请求用户显式许可：

• 显示工具名称、说明和参数
• 执行原因说明
• 选择允许/拒绝
• 允许功能ON/OFF切换

🔗 主要技术栈

后端

• 快速 API：时髦的Python Web框架结构
• 派丹蒂克：数据验证和设置管理
• 优维康: ASGI服务器
• pytest：测试框架

前端

• Next.js 15: React框架结构
• TypeScript: 型安全性
• 顺风CSS：实用程序优先CSS
• Lucide反应：图标库
• 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在许可证下公开。了解更多信息 许可证 请参见文件。

🙋‍♂️ 支持

如果有问题或问题问题 中所述修改相应参数的值。