Claude Agentic Workflow：基于React与Python的MCP智能体架构实践

本项目展示了如何构建一个现代化的Claude MCP智能体工作流系统，采用React前端与FastAPI后端的分离架构，支持会话上下文管理和实时对话交互。

随着Anthropic推出的Model Context Protocol（MCP）逐渐成为AI助手与外部工具交互的标准协议，开发者社区开始探索如何构建更加灵活、可扩展的智能体工作流系统。传统的单一界面模式正在被前后端分离的现代架构所取代，而Claude-Agentic-Workflow项目正是这一趋势的典型代表。

该项目采用清晰的分层架构，将用户交互层与智能体逻辑层解耦：

后端基于Python的FastAPI框架构建，核心模块app/api.py封装了MCPAgent的业务逻辑。与早期的Streamlit原型相比，这一架构带来了显著的优势：

• API标准化：通过RESTful接口暴露智能体能力，便于第三方集成
• 会话状态管理：每个对话会话拥有独立的上下文存储，确保多轮对话的连贯性
• 异步处理能力：FastAPI原生支持异步操作，能够高效处理并发请求

后端提供三个核心端点：

• GET /health：服务健康检查
• POST /api/chat：对话消息处理
• POST /api/reset：会话上下文重置

前端采用React 18配合Vite构建工具，取代了传统Python Web应用常用的Streamlit或Gradio。这一选择带来了更流畅的用户体验和更丰富的交互可能性：

• 组件化架构：聊天界面、消息气泡、输入框等元素均可独立开发和复用
• 状态管理：React的Hooks机制让前端状态与后端会话状态保持同步
• 实时反馈：支持打字机效果、消息流式渲染等现代聊天体验

该项目的核心价值在于对MCP（Model Context Protocol）协议的完整实现。MCP定义了AI助手与外部工具、数据源、执行环境之间的通信规范，使得Claude等模型能够：

通过MCP，系统能够动态发现可用的工具集合（如文件操作、API调用、代码执行等），并根据对话上下文智能选择合适的工具。MCPAgent.run_agent()方法封装了这一决策过程，每次用户输入都会触发一次完整的

• 意图理解
• 工具选择
• 参数填充
• 执行调用
• 结果整合

多轮对话中的上下文保持是智能体系统的关键挑战。该项目通过后端会话存储解决了这一问题：

• 每条消息都关联到特定的会话ID
• 历史消息按时间序列组织，支持滑动窗口截断
• 上下文重置功能让用户可以随时开启新的对话线程