前两天的火山大会,在逛展的时候,发现有一个展台是MCP market,当时就驻足看来下,还让展台的小伙伴展示了一下,我还疑问说:这里边服务看起来很全,为什么这个一直没有推过,我在火山上竟然没有看到过这个MCP市场。
刚好在参会结束后,看到有不少小伙伴已经用上了 (Trae+豆包1.6+MCP+VeFass),可以十分方便的进行 Agent 开发。但是大多并没有提供详细的教程,于是刚好也试一下MCP市场上的服务,顺手做一个详细的教程,使用豆包1.6,利用他更强的推理能力、多模态理解,然后调用各类MCP工具完成任务,最后使用火山提供的MCP,直接调用云服务完成部署,此类能力的原生提供,让小白也能以AI云原生的Agent 开发范式帮助自己快速构建并部署一个智能体。
我选用的案例是:旅游数据大屏
很多小伙伴开发Agent的时候,首选上手项目就是旅游规划Agent,那我们反其道而行之,我们做一个实时旅游数据大屏,来帮我分辨我们想去的城市,哪些景点人多,哪里人少,我们错峰出行。
如果你从未使用过开发环境,那么
一、首先需要一个环境
在我们进行之前,会需要一个最基本的开发环境和一个IDE(编程工具):
本次选用的IDE是Trae,直接搜索Trae CN,选择匹配你系统进行下载和安装即可,安装完成后登录账号。
1、打开Trae,新建一个文件夹。底部有终端窗口
2、在终端窗口中,粘贴入以下代码,确认是否有python
python --version
3、粘贴入以下代码,确认是否有pip
pip --version
4、两步命令输入完,核对一下
- 如果有的话,会如上图一样,分别显示出版本号。那么可以跳过“安装环境这一步
- 如果没有的话,你需要安装python。
5、来到这个地址:https://www.python123.io/download
6、选择对应的Python安装包。
- 运行安装程序时,勾选"Add Python to PATH"选项,这样可以自动配置环境变量
- 选择默认安装方式即可自动安装pip(Python包管理工具)
7、此外我们还需要安装一个Node.js
来到这个网站:https://nodejs.cn/download/,在长期支持版本标签页下,选择你系统对应的安装包,直接点击下载。
8、下载后进行安装,。在安装过程中务必勾选"Add Node.js to PATH"选项,这样会自动配置环境变量,无需手动设置
9、剩下的步骤,一直点击NEXT,保持默认安装选项即可完成安装。
这些基础工作做完,我们算是有了一个基础的开发环境。
二、配置MCP
火山的MCP Market地址:https://www.volcengine.com/mcp-marketplace
有200多个MCP服务,可以任意选用
那根据我要实现的最终目标,我选用的是
- 腾讯地图MCP: 获取热门景点和实时交通数据。
(在后续测试中,我使用了高德地图的MCP,但是建议大家依然可以使用腾讯地图,因为腾讯的注册相对来说更加简单,可以快速完成。根据自己的习惯选用地图服务即可)
-
飞常准-Aviation MCP: 提供航班实时信息和机票价格趋势
-
veFaaS MCP: 部署网页到公网
我们配置MCP的方式有两种
1、在官网MCP Market中,使用快捷配置的方式进行添加。
2、在Trae中添加MCP。
这两个方式各有优劣,当前我 选择的三个MCP可能不太能体现出差异,但是在我进行体验的时候,发现,网站上对一些服务提供了48小时的体验方案,就是你无需去繁琐的注册开发者账号、创建key等操作,只需要在网站上直接使用JSON(URL),然后一键配置到Trae中即可使用。
这个功能的产品经理,给你点个大赞👍!这能省去一些琐事,让我们专注于开发,在确实MCP可用的情况下,最后再进行环境的配置。
好那我们选用的这三个MCP,我们先来一一添加。
1、首先添加“腾讯地图”
根据引导进入:腾讯位置服务,会进入引导注册成为开发者,根据你的实际情况进行实名认证。
然后进入首页,点击立即创建
选用WebServiceAPI
返回页面,填入你获取到的key,填入点击确定。
平台会自动生成JSON然后。点击下方的“去Trae配置”,会自动拉起Trae,并进入配置窗口。直接点击确定即可。
2、同理,在MCP市场中找到“飞常准MCP”,点击“获取”去拿到对应的API KEY,填入后确认。
3、再找到veFaaS MCP:
https://www.volcengine.com/mcp-marketplace/detail?name=veFaaS+MCP
同样的步骤进行操作,直接点击一键在Trae中配置即可。
添加完成后,我们检查MCP是否安装成功,可能会发现有失败的情况,通常是因为一些环境缺失。
直接把鼠标放在重试的位置,可以看到启动失败的原因,把原因粘贴给Trae的chat框中,让Trae自己解决即可。
然后会看到服务都正常添加。
三、撰写需求提示词
现在我们已经准备好了开发环境,准备好了要用的MCP服务,接下来就是让模型调用这些服务来完成我们的需求。
我把我的需求简单描述了一下,扔给了Prompt Pilot,让他根据我的需求,生成了一个提示词。
这里有必要单独提一下火山方舟PromptPilot,这是一个针对Prompt工程提供服务的功能,有非常丰富的提示词调优、评测、管理的能力。
原本这个功能在火山方舟里叫做Prompt调优,最近已经有了独立的站点,做了更多的功能升级和优化,在我的实际体验中是很有帮助的,能够快速的测试提示词的稳定性和可用性,有兴趣的小伙伴可以去官网体验:https://promptpilot.volcengine.com
现在美中不足的是还不支持非火山模型的接入。 但据说马上就会支持了,我先期待一下~
PromptPilot帮我生成的提示词:
我需要你帮我创建一个关于“成都”的旅游数据信息页面,重点包含错峰出行指南,请按照以下步骤操作:
1. 请你执行以下任务收集该城市的旅游信息:
- 使用高德地图MCP获取该城市的热门旅游景点(至少5个),包括位置、简介和评分
- 特别使用高德地图MCP获取每个景点的人流量数据、每日和每周的高峰期信息
- 使用高德地图MCP获取每个景点附近的特色餐厅推荐
- 使用飞常准-Aviation MCP查询从主要城市到该目的地的航班信息,包括航班号、起降时间和价格
2. 错峰出行分析与建议:
- 分析各景点的客流高峰期和淡季
- 提供景点最佳参观时间段建议
- 推荐错峰游览路线,标注哪些地方可能人很多,哪些地方相对人少
- 设计一个错峰出行日历或时间表,显示一周内各景点的拥挤程度预测
3. 将收集到的所有信息整合成一个美观的HTML网页,网页应包含:
- 城市名称和简介
- 交互式地图,显示主要景点位置及实时人流情况
- 热门景点列表,包含错峰出行建议和最佳参观时间
- 景点人流量热力图或图表,直观展示拥挤程度
- 到达该城市的热门航班信息
- 适合的旅游季节和错峰出行整体策略
4. 生成完整的HTML代码,包括内联CSS样式,确保页面美观且信息组织合理
在Trae输入框中,选择Builder with MCP
选择Doubao-seed-1.6,直接把生成的提示词丢进去,看着豆包1.6在Trae中的表演。
可能是因为信息量比较大,在测试过程中,出现了2次“模型响应失败”的问题,
在我尝试了三次后,终于生成了最终的页面。
四、部署上线
很快页面已经生成出来,根据官方的表述,最新的Doubao-Seed-1.6大模型具备更强推理能力、以及多模态理解 等 , 我们已经看到过很多的测评。就不再赘述,评测分数是一种参考,更重要的是看自己的使用体验是否有提升,至少在这次的使用中,可以看到可见最新的Doubao-Seed-1.6的审美是有不小提升的。
最后发送部署的要求给Trae
使用veFaaS MCP将这个HTML页面部署到公网,并提供访问链接
最终得到了可以公网访问的链接地址,可以点击查看页面,还能进行地图交互:
https://sd17d5haramstnm4jbt7g.apigateway-cn-beijing.volceapi.com/
五、最后
坦率的说,使用“MCP Market(工具广场)+ 火山方舟(大模型服务)+Trae(应用开发环境)”最后能够使用veFaaS直接部署上线的整个工程是非常丝滑的。
可以看得出MCP Market是有非常努力在优化MCP接入的体验,尽可能的减少开发者在接入过程中的损耗,提高开发者的效率,很多火山的云服务,都是在登录之后,甚至无需填入key,都可以直接生成MCP配置文件。
不过,在我体验过程中,目前的MCP Market中还是有不少的服务是存在问题的,比如我在接入高德地图服务的过程中发现无法认证开发者,似乎是阿里的邮箱服务出了问题。在使用腾讯地图的服务过程中发现返回的经纬度全部是错误的等等问题。
总体来说瑕不掩瑜,各个工具的结合非常丝滑,从IDE、大模型、MCP服务、云部署等环节全部都能在一个生态中完成。
不知道大家看完感受如何,但我是体会颇深。
单说把前端自动打包至云端这件事,在半年前,当时进行的共学活动,我还记得当时我为了能够让开发好的前端游戏,方便的部署到线上,尝试了很多的方案,要么是需要外网,要么是需要各种认证,要么是要买服务器,总之尝试了很多方案都做不到简易的发布上线。最后选用的方法是,使用github进行页面托管部署,虽然部署后的体验也不好,但这已经是尝试了各种方法之后的最佳选择。而现在可以直接使用veFaaS MCP服务,一句话完成云部署
相信无需太久,有望整个服务都可以自动化打包放到云端,AI云原生将助力 Agentic AI 时代加速的到来。
下一个时代,
人人皆是开发者。