MCP Based Web App

基于mcp的web应用程序

由Anthropic提供支持的全栈web应用程序 模型上下文协议（MCP） 用于人工智能辅助的Python代码分析。通过干净的React前端提交Python代码，并接收由Claude通过MCP驱动的智能反馈——风格建议、错误检测和改进建议。

______________________________________________________________________

建筑

┌─────────────┐       ┌──────────────────┐       ┌────────────────┐
│  React/TS   │──REST──▶  FastAPI Server  │──MCP──▶  MCP Server    │
│  Frontend   │◀──────│  (Auth + Proxy)   │◀──────│  (FastMCP)     │
└─────────────┘       └──────────────────┘       └────────────────┘
                              │
                         ┌────┴────┐
                         │ SQLite  │
                         │   DB    │
                         └─────────┘

双服务器设计：

• FastAPI REST服务器 (server.py)--处理用户身份验证（注册/登录）、JWT令牌管理以及向MCP服务器代理代码分析请求。
• MCP服务器 (mcp_server.py)--使用FastMCP通过模型上下文协议公开AI驱动的代码分析工具。

______________________________________________________________________

特性

• AI代码分析 -提交Python代码，并通过Claude（Anthropic API）获得关于风格、bug和改进的详细反馈
• JWT身份验证 --使用密码哈希（bcrypt）安全访问和刷新令牌流
• 用户管理 --SQLite备份的注册/登录，防止重复用户
• MCP集成 -协议驱动的AI工具调用，而不是特定的API调用
• 基础设施即代码 --AWS配置平台（EC2、Route 53、NLB）
• 自动设置 --EC2 SSH登录、Apache2配置到服务器前端构建文件的Ansible脚本，包括后端路由、服务器配置和Certbot HTTPS
• 容器化 --Docker化以实现一致的部署
• CI/CD --GitHub Actions管道，用于自动地形基础设施验证、规划和创建，并执行ansible剧本

______________________________________________________________________

技术栈

______________________________________________________________________

先决条件

• Python 3.10+
• Node.js 18+
• Docker（可选，用于容器化部署）
• OpenAI API/Anthropic（可选）键
• AWS帐户（用于基础设施配置）

______________________________________________________________________

入门指南

1.克隆存储库

git clone https://github.com/huzaifa678/mcp-based-web-app.git
cd mcp-based-web-app

2.后端设置

# Create a virtual environment
python -m venv venv
source venv/bin/activate  # Windows: venv\Scripts\activate

# Install dependencies
pip install -r requirements.txt

# Set environment variables
export OPENAI_API_KEY="your-api-key"
export SECRET_KEY="your-jwt-secret"

3.启动MCP服务器

python mcp_server.py

4.启动FastAPI服务器

uvicorn server:app --reload --port 8000

5.前端设置

cd frontend  # or wherever the React app lives
npm install
npm run dev

______________________________________________________________________

API终点

认证

代码分析

全部 /analyze 请求中需要有效的JWT访问令牌 Authorization 头球

______________________________________________________________________

基础设施和部署

地形图（AWS）

规定：

• EC2实例 用于托管应用程序
• 53号公路 DNS记录
• 网络负载均衡器 用于交通分配

cd terraform
terraform init
terraform plan
terraform apply

安塞波

自动设置服务器：

• Docker安装
• 应用程序部署
• Certbot HTTPS证书配置

ansible-playbook -i inventory playbook.yml

码头工人

docker build -t mcp-web-app .
docker run -p 8000:8000 \
  -e ANTHROPIC_API_KEY="your-key" \
  -e SECRET_KEY="your-secret" \
  mcp-web-app

GitHub 操作

CI/CD配置为自动构建和部署到主分支的推送。看 .github/workflows/ 用于管道配置。

______________________________________________________________________

项目结构

mcp-based-web-app/
├── server.py            # FastAPI REST server (auth + proxy)
├── mcp_server.py        # MCP server (AI code analysis tools)
├── requirements.txt     # Python dependencies
├── Dockerfile           # Container configuration
├── terraform/           # AWS infrastructure as code
├── ansible/             # Server provisioning playbooks
├── frontend/            # React/TypeScript UI
├── .github/workflows/   # CI/CD pipelines
└── README.md

______________________________________________________________________

运作原理

1. 用户通过React前端注册/登录→ 接收JWT令牌
2. 用户通过UI提交Python代码
3. FastAPI服务器验证令牌并将请求转发给MCP服务器
4. MCP服务器通过模型上下文协议调用Open AI
5. AI分析代码的样式问题、潜在错误和改进
6. 结果返回到前端并显示给用户

______________________________________________________________________

许可证

这个项目是开源的。有关许可证的详细信息，请参阅存储库。

______________________________________________________________________

作者

法院 —