MCP CLIENT - FRONTEND

🚀 MCP人工智能助理

*最后的演示截图*

使用MCP、Langchain、LangGraph、FastAPI和Streamlit的多服务器工具启用AI系统

使用 模型上下文协议（MCP） 架构和增强 基于LangGraph的编排.

该系统展示了 生产级AI架构 结合：

• 基于工具的LLM推理
• 多服务器MCP集成
• 本地工具执行层
• 安全的文件操作
• PDF智能工作流程
• 数据库支持的费用跟踪
• 实时流式响应（ChatGPT风格）
• 人在回路安全确认
• 模块化和可扩展的架构

该项目的设计使用 现实世界的工程原理和分层系统架构.

______________________________________________________________________

🏗️ 系统架构

🔷 高级体系结构

                ┌────────────────────────────┐
                │        Streamlit UI        │
                │     (Human-like Chat UI)   │
                └───────────────┬────────────┘
                                │ HTTP Request
                                ▼
                ┌────────────────────────────┐
                │          FastAPI           │
                │     Backend API Gateway    │
                └───────────────┬────────────┘
                                │ Async Call
                                ▼
                ┌────────────────────────────┐
                │         LangGraph          │
                │  LLM + Tool Orchestration  │
                └───────────────┬────────────┘
                                │
                ┌───────────────┴───────────────┐
                ▼                               ▼
        ┌───────────────────────┐       ┌─────────────────────────┐
        │   Local Tool Layer    │       │       MCP Servers        │
        │     (simple_tools)    │       │   External Tool Systems  │
        ├───────────────────────┤       ├─────────────────────────┤
        │ Tavily Web Search     │       │ Desktop Operations      │
        │ Utility helpers       │       │ PDF Processing          │
        │                       │       │ Expense Database        │
        └───────────────────────┘       └─────────────────────────┘

______________________________________________________________________

🔄 系统流程

1.️⃣ 用户交互

用户通过发送消息 Streamlit聊天界面.

接口支持 实时流媒体响应，允许用户在生成AI响应时观察它。

______________________________________________________________________

2.️⃣ API层

快速API 接收完整的会话对话并将其转发给 LangGraph执行层.

FastAPI充当 前端和AI编排系统之间的网关.

______________________________________________________________________

3.️⃣ LangGraph编排

LangGraph负责：

• 将MCP工具动态绑定到LLM
• 集成本地实用工具
• 自动检测工具调用
• 将执行路由到适当的工具
• 将工具结果反馈到对话状态
• 生成结构化的最终响应

这消除了手动工具循环逻辑，并启用 可扩展的多步推理.

______________________________________________________________________

4.️⃣ 工具执行

LangGraph可以执行以下工具 两个不同的来源.

______________________________________________________________________

本地工具(simple_tools)

这些是直接在项目内部实现的轻量级工具。

示例包括：

• 用于实时信息检索的Tavily网络搜索工具
• 文件发现实用程序
• 桌面文件列表
• 辅助工具
• 轻量级自动化功能

这些工具位于：

logic/simple_tools.py

______________________________________________________________________

远程MCP服务器

通过以下方式连接的外部工具系统 模型上下文协议（MCP）.

连接的MCP服务器执行特定于域的操作，例如：

• 桌面上的安全文件操作
• PDF文档分析
• 费用数据库管理

LangGraph动态确定是否调用 本地工具 或一个 MCP服务器工具.

______________________________________________________________________

5.️⃣ 响应交付

AI的最终回应是 流式传输回Streamlit UI 并以类人聊天格式显示。

______________________________________________________________________

🛡️ 人在环（HITL）安全层

考虑了某些操作 敏感或破坏性 并且在执行之前需要明确的人工确认。

示例包括：

• 删除文件
• 删除多个文档
• 创建或修改敏感数据
• 大规模文件操作

当检测到此类行为时，系统 暂停执行并请求用户确认.

这确保了：

• 破坏性行为的受控执行
• 防止意外数据丢失
• 对自动化工作流程的人工监督
• 提高系统可靠性和安全性

______________________________________________________________________

⚡ 实时流媒体响应

助理流式传输响应 逐个令牌，类似于现代会话式人工智能系统。

好处

• 更快的感知响应时间
• 更自然的对话互动
• 透明的人工智能推理
• 改善用户体验

流媒体是通过以下方式实现的：

• FastAPI流式响应
• LangGraph异步执行
• 流式增量渲染

______________________________________________________________________

🧠 LangGraph

核心智能和编排层

LangGraph充当 推理引擎将LLM与本地工具和MCP服务器连接起来.

职责

• 刀具调用检测
• 条件路由
• 异步工具执行
• 对话状态管理
• 多步推理
• 上下文感知交互

关键特性

• 用途 异步/等待架构
• 动态绑定工具
• 两者结合 本地和远程工具
• 发送完整的会话历史记录以进行上下文推理
• 消除了手动工具执行循环

______________________________________________________________________

🔧 本地工具层

该系统包括 轻量级局部工具层 直接在项目内部实施。

位置

logic/simple_tools.py

这些工具提供 无需外部MCP服务器即可快速运行公用事业.

示例包括：

• 文件发现工具
• 桌面文件列表
• 辅助工具
• 轻量级自动化功能

本地工具改进 系统响应性 并减少对远程服务的依赖。

______________________________________________________________________

🛠️ 已连接的MCP服务器

1.️⃣ 桌面MCP服务器

手柄 安全文件操作，包括：

• read_file
• write_file
• delete_file
• list_files

其他保护措施包括：

• 路径验证
• 安全目录解析

用于：

• 管理自动化文件
• 安全的桌面操作
• 受控文件管理

______________________________________________________________________

2.️⃣ PDF处理MCP服务器

献给 基于文档的工作流，包括：

• 从PDF文件中读取和提取内容
• 分析文档信息
• 支持结构化数据提取
• 执行文档驱动的自动化

用于：

• 文档情报
• 知识抽取
• AI驱动的文档分析

______________________________________________________________________

3.️⃣ 费用数据库MCP服务器

手柄 财务记录管理，包括：

• 增加费用
• 查看费用
• 删除费用
• 管理结构化费用数据库

用于：

• 记录人工智能估计成本
• 财务跟踪自动化
• 结构化费用管理

______________________________________________________________________

💬 前端（Streamlit）

前端提供：

• 人性化聊天界面
• 持久会话内存
• 流媒体响应
• 实时交互
• 简洁明了的用户界面

______________________________________________________________________

⚡ 后端（FastAPI）

FastAPI的作用是：

• API网关
• UI和LangGraph之间的异步桥梁
• 无状态请求处理程序
• 上下文转发器

______________________________________________________________________

📂 项目结构

MCP_CLIENT_-_FRONTEND/
│
├── fastapi_backend.py          # FastAPI backend API layer
├── fastapi_frontend.py         # Streamlit chat UI
│
├── logic/
│   ├── app.py                  # LangGraph orchestration layer
│   └── simple_tools.py         # Local utility tools
│
├── .env
├── .gitignore
└── README.md

______________________________________________________________________

🖼️ 演示截图

示例提示

AI响应

文件创建和数据库日志记录

人在循环确认

______________________________________________________________________

🔐 安全措施

• 桌面路径分辨率保护
• 防止路径遍历攻击
• 严格删除确认
• 受控文件扩展名处理
• 环境变量隔离
• 工具级验证

______________________________________________________________________

🏢 使用的工程原理

• 关注点分离
• 异步架构
• 基于工具的AI编排
• 模块化MCP服务器设计
• 无状态API网关
• 上下文感知LLM使用
• 生产就绪的分层架构

______________________________________________________________________

📈 可扩展性设计

该架构支持：

• 添加新的MCP服务器
• 无需前端修改即可添加新工具
• 集成其他本地工具模块
• 轻松更换LLM型号
• 分别部署API和UI
• 多用户会话扩展
• 数据库支持的内存集成

______________________________________________________________________

🧪 示例用例

• 桌面文件自动化
• AI驱动的PDF分析
• 个人AI助理
• 财务跟踪系统
• 基于工具的LLM实验
• MCP协议实验平台

______________________________________________________________________

👨‍💻 作者

乌默·拉菲克 BTech CSE

______________________________________________________________________

🌟 摘要

该项目展示了 基于MCP的全功能多服务器人工智能系统，通过LangGraph编排增强.

✔ 干净的建筑 ✔ 异步工具执行 ✔ 混合 本地+MCP工具系统 ✔ 真实世界的文件和数据库操作 ✔ 结构化LLM推理 ✔ 人在环安全控制 ✔ 实时流媒体响应 ✔ 生产就绪设计

______________________________________________________________________

🔗 相关存储库

🛠️ MCP服务器（工具）