这个作业属于哪个课程 | 软件工程 |
---|---|
这个作业要求在哪里 | 作业要求 |
这个作业的目标 | 构建一个AI智能体,不仅能通过自然语言交流(会说), 更能理解指令意图,并自动调用工具、访问数据或执行代码来完成任务(会做), 最终在一个自选的具体场景中(如办公、学习、电商等)能够完成完整工作流程。 |
学号 | 组长:102301304,组员:052301103、102301107、102301301、102301302、 102301305、102301307、102301309、102301405、102301406、102301607 |
WeaTrip说明
需求描述
版本:1.0.0 日期:2025-10-20
1. 项目概述
1.1. 项目背景
随着个性化旅游需求的增长,传统的静态旅游攻略已无法满足用户。天气是影响旅游体验的关键变量,但用户在制定计划时往往需要手动查询天气,并将其与行程规划分开考虑。本项目旨在开发一款智能Agent,通过自动化整合目的地天气信息与旅游景点/活动,为用户生成动态、合理、个性化的旅游计划,提升旅行规划效率与体验。
1.2. 问题陈述
用户在为旅行做规划时,面临以下痛点:
- 信息割裂: 需要分别在旅游网站、天气APP等多个平台获取信息,并进行人工整合,过程繁琐。
- 计划僵化: 静态计划无法应对天气突变,可能导致户外活动因恶劣天气而取消,影响行程。
- 决策困难: 在众多景点和活动中,难以根据实时环境条件(如温度、降水、紫外线)做出最优选择。
1.3. 解决方案
开发一款智能Agent,用户只需输入目标旅游城市/地点,Agent将:
- 自动获取该地点的近期(例如,未来1-3天)精准天气预报。
- 基于天气数据,智能推荐最适合的景点、活动和安排。
- 生成一份结构清晰、考虑天气因素的个性化旅游计划。
1.4. 核心价值主张
- 对用户: 一站式、智能化规划,获得更舒适、更安全的旅行体验。
- 对团队: 打造一款具有市场差异化的AI产品,展示团队在AI应用层的能力。
2. 用户角色与画像
(1)自由行爱好者(张伟)
- 年龄:25-40岁。
- 喜欢自主规划行程,不喜欢跟团。
- 追求深度体验,注重旅行品质。
- 核心需求: 希望获得独特、本地化的推荐,并避免因天气原因导致行程“踩雷”。
(2)家庭出游规划者(李静)
- 年龄:30-45岁。
- 带着老人和孩子出行,安全与舒适度是首要考虑。
- 需要提前了解天气,为家人准备合适的衣物和物品。
- 核心需求: 需要包含大量室内备选方案、对天气不敏感的活动,以及天气预警提示。
(3)商务出差兼游览者(王磊)
- 年龄:28-50岁。
- 行程紧张,空闲时间有限(如半天或一个晚上)。
- 需要在有限时间内高效体验当地精华。
- 核心需求: 快速生成基于当时天气的、短时高效的游览建议。
3. 界面原型设计
4. 技术考量与约束
技术栈:
后端: Python (FastAPI/Flask) 或 Node.js。
AI/Agent框架: LangChain, LlamaIndex 或 自主开发的Agent核心。
大语言模型: 可集成 GPT-4, Claude,或开源模型如 Llama, ChatGLM 用于自然语言理解和计划生成。
API:OpenWeather
数据来源:
天气数据: 和风天气、OpenWeatherMap、AccuWeather等。
旅游数据: 维基百科、OpenStreetMap,或商业化的旅游API(如Amadeus, Booking.com)。
假设与依赖:
假设第三方API服务稳定且数据准确。
项目初期不涉及用户账户系统和数据持久化存储。
5. 未来迭代规划(Roadmap)
V1.1(短期):
- 增加对多日期范围(如5-7天行程)的支持。
- 增加用户基础偏好选择(如“偏好美食”、“偏好历史古迹”)。
V1.5(中期):
- 集成实时交通数据,优化行程路线。
- 开发简单的Web图形用户界面。
- 增加预算范围的考量。
V2.0(长期):
- 引入用户画像和机器学习,提供高度个性化的推荐。
- 支持多模态输出,如生成行程地图可视化。
- 构建用户社区,分享和优化旅行计划。
6. 待定问题与风险
- 数据准确性风险: 高度依赖第三方天气和旅游数据,其准确性直接影响产品体验。需有备选数据源方案。
- 算法合理性: “天气-活动”匹配规则的合理性需要不断验证和优化,可能需要引入用户反馈机制。
- 商业模型: 目前为技术演示/内部工具,若推向市场,需考虑API调用成本与商业化模式。
- 法律合规: 在使用第三方数据和服务时,需严格遵守其服务条款和版权规定。
业务流描述
1. 系统概述与架构设计
WeaTrip是一个基于MCP协议的智能天气旅行助手系统,它通过自然语言交互为用户提供精准的天气查询和个性化的旅行建议。整个系统采用分层架构设计,从前端用户界面到后端服务处理形成了完整的业务闭环。系统架构包含三个核心组件:前端用户界面、MCP客户端(基于DeepSeek大语言模型)和MCP天气服务服务器。前端界面负责用户交互和内容展示,MCP客户端作为智能决策中枢,负责理解用户意图并协调工具调用,而MCP服务器则专门处理天气数据的获取和格式化。这种设计使得系统具有良好的扩展性和维护性,各组件可以独立升级和优化。
2. 用户界面交互流程
用户首先看到的是WeaTrip应用的主界面,这是一个设计简洁的聊天式界面。顶部是应用名称"WeaTrip",中间区域展示智能助手"小W"的头像和欢迎语:"请输入目的地,我将根据当地天气为你生成专属出行计划"。界面底部是用户输入区域,包含文本输入框和功能按钮。用户可以通过文本输入框直接输入城市名称或旅行需求,如"想去北京"。同时,用户还可以点击附件按钮(标注为"+"号),在弹出的选项中选择"相机"或"相册"功能。用户消息气泡使用绿色,AI回复使用灰色,这些细节共同保证了良好的视觉体验和阅读舒适度。
3. 智能意图识别与工具选择
当用户输入查询后,MCP客户端开始工作。客户端首先将用户输入和系统提示词组合成消息数组发送给DeepSeek大语言模型。系统提示词明确指示模型作为专业助手,通过调用合适的工具帮助用户解决问题。此时,客户端会同时向MCP服务器查询可用的工具列表,包括get_weather(获取当前天气)、get_forecast(5天天气预报)和weather_report(详细天气报告)DeepSeek模型基于用户查询的内容进行意图分析。如果用户简单询问"北京天气",模型可能选择get_weather工具;如果用户询问"北京未来几天天气",则可能选择get_forecast;如果用户表达"想去北京旅游,需要天气建议",模型更可能选择weather_report工具,因为它能生成包含穿衣建议和活动推荐的详细报告。这个决策过程完全由大语言模型自主完成,体现了系统的智能化特性。
4. 天气数据获取与处理流程
一旦工具被选定,MCP客户端会调用相应的工具函数。以get_weather为例,客户端向MCP服务器发送工具调用请求,包含城市名称、国家代码等参数。MCP服务器接收到请求后,首先构建符合OpenWeatherMap API要求的URL,包括位置查询参数、API密钥、测量单位和语言。服务器通过异步HTTP请求向OpenWeatherMap API发送请求,并设置完善的错误处理机制。如果请求成功,API返回JSON格式的原始天气数据,服务器随后调用format_weather_data函数将技术性的JSON数据转换为易于理解的文本格式。这个转换过程提取关键信息如城市名称、国家代码、天气描述、温度、体感温度、湿度和风速,并根据测量单位自动调整温度符号(℃或℉)和风速单位(m/s或mph)。
5. 智能报告生成与旅游建议
对于更复杂的需求,当用户请求旅游建议时,系统会调用weather_report工具。这个工具不仅返回原始天气数据,还包含提示模板功能。工具内部首先获取基础天气信息,然后使用正则表达式解析关键数据点,最后返回一个结构化数据,包含原始数据、提示模板名称和模板参数。MCP客户端识别到这个结构后,会自动调用对应的weather_prompt提示模板。这个模板是一个专业的天气报告框架,要求大语言模型扮演气象播报员,根据提供的天气数据生成包含今日天气概况、体感分析、穿衣建议和户外活动推荐的完整报告。DeepSeek模型基于这个模板和具体天气数据,生成自然、专业且贴近生活的最终回复,真正实现从"天气数据"到"旅行建议"的智能转换。
6.完整的业务闭环与价值交付
最终,生成的天气报告或旅行建议通过MCP客户端返回前端界面,以对话气泡的形式展示给用户。整个业务流程从用户输入开始,经过意图识别、工具选择、数据获取、智能分析和内容生成,最终以有价值的旅行建议结束,形成了完整的业务闭环。系统最大的价值在于将技术性的天气数据转化为用户真正需要的决策支持信息。用户不需要理解温度、湿度、风速等数据的具体含义,而是直接获得"适合穿什么衣服"、"可以进行什么活动"等实用的旅行建议,真正体现了智能助手的技术价值和应用价值。
流程图如下:
实现说明
MCP_SERVER实现说明
一、概述
本项目开源文件中的MCP_SERVER是一个基于 MCP(Model Context Protocol) 框架的服务端,作为天气信息工具模块的提供者,用于响应来自智能体客户端(如 MCP Client)的调用请求。
简单来说,这个服务端扮演了一个“数据提供者”的角色:
- 一方面,它通过 OpenWeatherMap API 获取实时天气与未来预报数据;
- 另一方面,它通过 MCP 协议 将这些功能以标准化的工具形式暴露给客户端;
- 当大语言模型调用相关工具时,服务端会处理请求、访问外部天气数据源、格式化结果并返回标准化响应。通过该服务端,模型能够自动获取天气信息、生成播报模板,并输出自然语言化的天气报告。
二、服务器端结构设计
整个服务器端系统主要由以下几个核心模块组成:
模块名称 | 主要功能 |
---|---|
FastMCP 服务实例 | 定义并运行一个名为“weather”的 MCP 服务端,负责注册所有天气工具和提示模板。 |
OpenWeatherMap 接口封装 | 实现与外部天气 API 的通信,包括异步请求与响应解析。 |
数据格式化模块 | 将 JSON 天气数据转换为可读文本格式,便于模型理解和展示。 |
MCP 工具函数(@mcp.tool) | 提供可被模型直接调用的功能接口,如获取当前天气、获取五日天气预报等。 |
提示模板模块(@mcp.prompt) | 定义天气报告生成模板,引导模型输出自然语言播报内容。 |
综合报告生成器 | 结合工具数据与模板,返回结构化的报告输入,供模型自动生成天气说明。 |
系统整体运行逻辑如下:
三、主要功能流程
1. 服务初始化与注册
在程序启动时,首先通过以下代码创建一个 MCP 服务实例:
mcp = FastMCP("weather")
FastMCP
是 MCP 框架提供的快速服务端构建类,这里实例化的 "weather"
即为当前服务名称。所有后续定义的工具和提示模板都将自动注册到该服务实例下。服务端通过标准输入输出(stdio
)与客户端进行通信,从而确保跨语言、跨进程的兼容性。
2. API 配置与请求封装
程序中定义了与 OpenWeatherMap 的通信参数:
OPENWEATHER_API_BASE = "https://api.openweathermap.org/data/2.5"
OPENWEATHER_API_KEY = "your_api_key"
USER_AGENT = "weather-app/1.0"
同时实现了核心请求函数 make_weather_request(url)
,用于发送异步 HTTP 请求。该函数内部使用 httpx.AsyncClient
建立会话,设置请求头并在 30 秒超时范围内完成调用。若 API 响应成功则返回解析后的 JSON 数据,否则打印错误并返回 None
,从而保证系统的健壮性。
3. 数据格式化逻辑
API 返回的数据为原始 JSON 格式,不便于直接展示。
函数 format_weather_data(data, units)
负责将这些数据转换为可读的多行文本输出,提取并格式化城市名、国家代码、天气描述、温度、湿度、风速等核心信息。该函数还会根据单位制(metric
或 imperial
)自动切换温度(°C/°F)和风速(m/s/mph)单位。最终生成的结果简洁明了,既适合人类阅读,也便于模型进行语义提取。
4. 工具函数注册与调用
本项目定义了三个主要 MCP 工具:
get_weather()
:获取指定城市的实时天气信息;get_forecast()
:获取未来五天(以三小时为间隔)的天气预报数据;weather_report()
:结合天气信息与提示模板,生成结构化报告输入。
这些函数均通过装饰器 @mcp.tool()
注册为 MCP 工具,供客户端调用。
以 get_weather()
为例,当接收到城市名称参数后,函数会拼接完整的 API 请求地址,调用 make_weather_request()
获取数据,再通过 format_weather_data()
输出格式化结果。如果 API 响应中包含错误代码,则会在返回信息中提示具体错误原因。
get_forecast()
的工作机制与之类似,只是针对五日预报接口进行数据提取与批量格式化输出,方便模型了解天气趋势。
5. 天气报告提示模板
除了工具函数外,程序还定义了一个提示模板函数 weather_prompt()
,通过 @mcp.prompt()
装饰器注册。
该模板用于指导大语言模型如何根据结构化天气数据生成自然语言报告。模板中要求模型输出内容包含“今日天气概况”、“体感与舒适度分析”、“穿衣建议”及“户外活动推荐”等四个部分,并强调语言应自然、贴近生活,而非技术化描述。
这种模板化提示机制使得模型生成的天气播报内容更加规范、统一且富有可读性。
6. 综合报告生成与模板绑定
weather_report()
是系统的综合性工具函数,它结合了前述两个模块的功能。
当客户端或模型调用该函数时,系统首先执行 get_weather()
获取实时天气文本,然后通过正则表达式从文本中解析出关键字段(如温度、湿度、风速等),构建一个包含必要参数的字典结构。
最终返回结果为一个包含三部分内容的 JSON 对象:
raw_data
:原始天气文本;prompt_template
:对应模板名称(如weather_prompt
);template_args
:模板参数(城市、天气描述、温度、湿度等)。
大模型在接收此结果后,会根据模板名找到相应的提示模板函数,并将 template_args
中的内容填入模板文本中,自动生成自然语言播报报告。这种设计实现了“数据 → 模板 → 语言”的闭环处理逻辑。
7. 服务运行与通信机制
程序的入口部分定义如下:
if __name__ == "__main__":mcp.run(transport='stdio')
这段代码负责启动 MCP Server 并启用标准输入输出通信通道。
当客户端启动并指定该服务端脚本路径时,双方会通过 stdin/stdout 建立通信,服务端开始监听来自客户端的工具调用请求,处理后返回结果。整个过程异步执行,保证了高效与实时性。
四、运行流程总结
MCP Server 的工作流程可以概括为以下步骤:
- 启动服务端进程并注册天气工具与模板;
- 等待客户端发起工具调用请求;
- 根据请求参数访问 OpenWeatherMap API;
- 获取并格式化天气数据;
- 将结果返回客户端,或与模板绑定生成结构化报告;
- 客户端或模型据此生成自然语言回答。
这一流程体现了 MCP 框架的核心思想:通过标准协议将外部工具与大语言模型的能力无缝衔接,使模型能够自动化调用、理解与利用真实世界数据。
五、系统特性与扩展建议
该服务器端具备结构清晰、模块独立、通信标准化的特点。
借助异步 HTTP 调用,它在处理多并发天气请求时性能优越;通过模板机制,它能让模型生成一致性强、自然流畅的播报内容。
未来可以在以下方向进一步扩展与优化:
- 增加缓存机制:对常用城市的查询结果进行短期缓存,减少 API 调用频率;
- 支持经纬度查询:允许通过坐标而非城市名直接获取天气信息;
- 增强错误处理:区分网络错误、API 错误和数据解析错误,提高系统健壮性;
- 多语言支持:根据
lang
参数自动返回对应语言版本; - 模块化扩展:可加入空气质量指数(AQI)、紫外线指数等更多工具函数。
MCP_CLIENT实现说明文档
一、项目概述
本项目实现了一个基于 MCP(Model Context Protocol) 框架的智能体客户端,能够与 MCP 服务端进行通信,并使用 DeepSeek V3 大语言模型 实现自然语言驱动的自动工具调用与响应生成。
简单来说,这个客户端充当了一个“智能中间人”:
- 一方面,它通过 MCP 协议 与后端工具(如天气查询、数据库操作等)通信;
- 另一方面,它通过 DeepSeek API 与大模型交互;
- 当用户输入自然语言问题时,模型会自动决定是否调用 MCP 工具,并根据工具返回的结果生成最终回答。
二、系统结构设计
整个系统分为以下几个核心模块:
模块名称 | 主要功能 |
---|---|
DeepSeekMCPClient | 客户端核心类,负责与 MCP 服务连接、调用工具、与模型通信。 |
MCP Server(外部服务) | 提供可调用的工具函数,如天气查询、计算器等。 |
DeepSeek API | 负责理解用户请求,决定是否使用工具,并生成自然语言回答。 |
AsyncExitStack | 异步资源管理器,用于在程序结束时自动关闭连接、释放资源。 |
系统运行结构如下:
三、主要功能流程
1. 程序启动与参数解析
在 main()
函数中,程序首先解析命令行参数,要求输入 MCP 服务端脚本路径(.py
或 .js
文件)。
若参数不足,会输出提示信息并退出。
python client.py <服务器脚本路径>
2.创建并初始化客户端
def_init_()
函数负责创建一个DeepSeekMCPClient()
类的客户端,并进行初始化,从环境变量中读取KEY和URL。
3. 与 MCP 服务器建立连接
connect_to_server()
函数负责与 MCP 服务端建立通信连接:
- 根据文件后缀判断使用
python
或node
选择启动命令; - 通过
StdioServerParameters()
设置MCP服务器参数; - 通过
stdio_client()
创建标准输入输出通信信道(stdin/stdout方式); - 使用
ClientSession
建立MCP客户端会话; - 初始化连接并列出服务端提供的工具列表。
eg:
已连接到MCP服务,可用的工具列表: ['get_weather', 'get_location']
4. 处理用户请求
主循环函数 chat_loop()
提供简单的命令行交互界面:
- 用户输入问题;
- 程序调用
process_query()
处理; - 输出模型回答或工具的响应;
- 输入
quit
退出程序。
5. 调用模型处理请求
process_query()
是系统的核心函数。
- 构造包含系统提示和用户输入的
messages
列表; - 向 MCP 服务端请求可用工具;
- 将MCP工具信息转换为模型可理解的格式;
- 调用 DeepSeek API,传入问题和可用工具;
- 解析模型的回复,判断是否需要调用工具。
6. 工具调用与结果处理
若模型请求调用工具:
- 解析工具名称与参数;
- 调用
session.call_tool()
执行工具; - 获取工具执行结果并打印;
- 将结果加入到对话历史;
- 检查工具是否返回模板(Prompt Template);
- 如有模板,调用
session.get_prompt()
生成提示; - 再次请求模型,根据工具结果生成最终回答。
如果模型未调用工具,则直接输出模型回复内容。
7. 资源清理
当程序结束时(无论正常退出还是异常中断),cleanup()
函数会自动关闭会话和通信通道,释放资源。
前端用户界面实现说明文档
一、概述
本项目开源文件中的前端界面是一个基于 现代 Web 技术栈 的用户交互层,作为天气出行助手的可视化呈现平台,用于接收用户输入并展示智能体生成的出行建议。
简单来说,这个前端界面扮演了一个"用户友好门户"的角色:
- 一方面,它通过 多模态输入方式(文字、语音、文件、快捷模板)收集用户出行需求;
- 另一方面,它通过 美观的界面设计 将 MCP 客户端返回的天气数据转化为直观的出行建议;
- 当用户与界面交互时,前端会处理输入、调用 MCP 客户端接口、格式化展示结果并提供流畅的对话体验。
通过该前端界面,用户能够轻松获取天气信息、查看出行建议,并享受自然流畅的智能助手服务。
二、应用结构设计
2.1 系统架构
整个前端设计分为以下几个板块:
层级 | 功能模块 | 主要职责 |
---|---|---|
用户界面层 | 侧边栏导航,主聊天区域,输入控制区 | 界面布局和交互设计 |
业务逻辑层 | 对话管理,消息处理,语音识别 | 核心业务逻辑处理 |
数据层 | 本地存储,状态管理 | 数据持久化和状态维护 |
工具层 | 文件处理,动画效果,JSON解析 | 辅助功能实现 |
2.2 核心功能模块
2.2.1 JSON数据预处理
// 去除前缀JSON对象的工具函数
function stripLeadingJsonBlocks(input) {// 专门处理MCP客户端返回的JSON结构,提取纯文本内容// 支持连续多个JSON对象的清理,确保显示纯净的文本回复
}
2.2.2 视觉系统配置
tailwind.config = {theme: {extend: {colors: {primary: '#09AF73', // 品牌主色 - 青绿色secondary: '#078A5B', // 辅助色neutral: '#F5F7FA', // 中性背景dark: '#1D2129', // 深色文字},fontFamily: {inter: ['Inter', 'system-ui', 'sans-serif'], // 现代字体},},}
}
2.3 系统运行流程
用户输入问题 → 信息处理 → Web API调用 → MCP客户端处理 → 响应解析 → 界面更新↓
文字/语音/文件 → 统一格式化 → HTTP请求 → 工具调用 → JSON清理 → LocalStorage
前端设计过程中,首先确定了页面的主色调和用户界面,明确实现该功能所需组件,合理设计出各个组件的位置和图案大小,同时添加了新模块来介绍该网页的功能,对用户界面侧边栏滑入滑出、界面中央图案弹跳、语音输入时按钮变化、滚动条变化都进行了动画设计。界面设计时,通过不断调试确保网页各个部分(侧边栏、聊天区、顶部栏)正确摆放,互不遮挡,比如历史记录按钮、头像、名字三部分进行并排处理,确定合适的距离。为了丰富智能体功能,给用户界面添加了语音识别、文件识别等功能。同时,对电脑端和手机端网页进行了部分区别处理。
三、主要功能流程
3.1 应用初始化与界面构建
在页面加载时,通过以下代码初始化前端应用:
document.addEventListener('DOMContentLoaded', () => {initVoiceRecognition();initChatData();adjustTextareaHeight();window.dispatchEvent(new Event('resize'));
});
DOMContentLoaded
事件确保在DOM完全加载后执行初始化。所有界面组件和事件监听器都将在此阶段注册完成。
3.2 数据通信与处理
3.2.1 Web服务器通信
前端通过HTTP API与后端Web服务器通信:
async function sendMessageToServer(message) {try {const response = await fetch('/api/chat', {method: 'POST',headers: {'Content-Type': 'application/json',},body: JSON.stringify({ message })});const data = await response.json();if (data.success) {// 清理JSON结构,提取纯文本const cleanText = stripLeadingJsonBlocks(data.reply);return cleanText;} else {throw new Error(data.error);}} catch (error) {console.error('API请求失败:', error);return '❌ 网络请求失败,请检查服务器连接';}
}
3.2.2 JSON响应处理
专门处理MCP客户端返回的复杂JSON结构:
// 处理可能的JSON前缀,如:
// {"content": "文本内容"} 或连续多个JSON对象
// 提取出纯净的文本内容用于界面显示
3.3 多模态输入处理逻辑
用户输入支持四种方式,前端负责统一处理和格式化:
- 文本输入:通过智能
textarea
元素接收,支持自适应高度调整 - 语音输入:集成 Web Speech API,实现实时语音转文字功能
- 文件上传:支持图片和文档文件,提供预览和大小验证(≤5MB)
- 快捷模板:预设常用出行问题,一键填充输入框
3.4 对话状态管理与数据持久化
本项目定义了完整的对话管理机制:
createNewChat()
:创建新对话会话,重置界面状态;loadChat(chatId)
:加载指定对话历史,恢复消息记录;saveChatData()
:将对话数据保存到本地存储;deleteChat(chatId)
:删除指定对话,包括标题和消息记录。
这些函数通过操作 chatTitles
和 chatMessages
两个核心数据对象,维护对话的完整生命周期。
3.5 消息渲染与界面更新
函数 addMessage(content, isUser, skipSave)
负责将消息内容转换为可视化的聊天气泡:
- 用户消息右对齐,绿色背景(
#09AF73
) - 助手消息左对齐,灰色背景(
#EFEFEF
) - 自动滚动到底部,确保最新消息可见
- 支持消息复制功能
3.6 响应式布局与交互机制
- 桌面端(≥1024px):固定侧边栏布局,主内容添加内边距
- 移动端:侧滑导航设计,触摸友好的交互
- 自适应:输入框高度自动调整,动画效果适配
四、与Web服务器的集成测试
4.1 本地开发环境部署
环境配置
# 1. 安装Python依赖
pip install fastapi uvicorn httpx# 2. 设置环境变量
export API_KEY="your_deepseek_api_key"
export BASE_URL="https://api.deepseek.com"
export MODEL="deepseek-chat"# 3. 启动Web服务器
python web_server.py
项目结构验证
确保以下文件结构:
project/
├── web_server.py # FastAPI Web服务器
├── web/
│ └── index.html # 前端界面
├── weather/
│ └── weather.py # MCP天气服务
└── mcp-client/└── client.py # MCP客户端
4.2 接口测试流程
健康检查
curl http://localhost:8000/api/health
# 期望响应: {"status":"healthy","mcp_client_ready":true}
功能测试
// 前端调用示例
const testMessage = async () => {const response = await fetch('/api/chat', {method: 'POST',headers: {'Content-Type': 'application/json'},body: JSON.stringify({message: '北京天气怎么样?'})});const data = await response.json();console.log('服务器响应:', data);
};
4.3 数据处理验证
测试JSON清理功能:
// 测试数据
const testData = ['{"content": "今天天气晴朗"}','{"result": "适合出行"}\n{"data": "温度25度"}','纯净的文本消息'
];testData.forEach(input => {const cleaned = stripLeadingJsonBlocks(input);console.log('清理前:', input);console.log('清理后:', cleaned);
});
五、运行流程总结
WeaTrip 前端界面的完整工作流程可以概括为以下步骤:
- 用户访问应用,初始化界面组件、事件监听系统和语音识别功能;
- 用户通过多模态方式输入天气出行相关问题(文字、语音、文件或快捷模板);
- 前端处理用户输入,通过Web API调用后端服务器;
- Web服务器接收请求,通过MCP客户端调用相应的工具函数;
- MCP服务端处理请求,访问天气数据源并返回结构化结果;
- 前端接收响应,使用
stripLeadingJsonBlocks
清理JSON结构,提取纯净文本; - 界面更新展示,以美观的聊天气泡形式显示结果;
- 自动保存对话记录,维护完整的聊天历史。
这一流程体现了现代Web应用的核心思想:通过直观的界面设计和智能的数据处理,将复杂的AI服务封装为简单易用的聊天体验。
六、系统特性与扩展建议
6.1 系统特性
该前端界面具备以下突出特点:
- 🎨 交互友好:仿聊天应用的直观界面,零学习成本
- 🔧 多模态输入:支持文字、语音、文件等多种输入方式
- 📱 响应式设计:完美适配桌面端和移动端设备
- 💾 数据持久化:完整的本地对话历史管理
- 🔄 实时通信:与Web服务器的稳定API通信
- 🎯 智能处理:专业的JSON数据清理和格式化
6.2 扩展建议
未来可以在以下方向进一步扩展与优化:
- 🔍 增强搜索功能:实现对话内容的全文搜索和高亮显示
- 📊 数据分析:添加用户行为分析和常用查询统计
- 🔔 实时通知:支持天气预警和重要通知的推送功能
- 🌍 多语言支持:根据用户偏好显示不同语言的界面
- ⚡ 性能优化:实现消息虚拟滚动,优化大量历史记录的渲染性能
- 🎨 主题定制:支持深色模式和多主题切换
- 📱 PWA支持:将应用转换为渐进式Web应用,支持离线使用
- 🔗 社交集成:支持将出行建议分享到社交媒体平台