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🤝 分发
- 请用叉子
- 创建特征分支（请参见
git checkout -b feature/AmazingFeature) - 请提交更改（
git commit -m 'Add some AmazingFeature') - 请按到分支（
git push origin feature/AmazingFeature) - 请打开拉式请求
📄 许可证
这个项目MIT在许可证下公开。了解更多信息 许可证 请参见文件。
🙋♂️ 支持
如果有问题或问题问题 中所述修改相应参数的值。