内容:利用Lingma智能体加MCP尝试生成一个旅游攻略网页。
前期准备:
1.安装通义灵码,保证版本为1.93及以上。
(1)下载并安装VSCode
(2)利用VSCode安装通义灵码:在VSCode插件市场中搜索通义灵码并安装。
(3)注册阿里云服务账号并在通义灵码登录(在 VSCode 左侧的插件栏找到通义灵码图标,点击 后按照提示进行登录操作)。
2.获取高德申请的key
点击上行文字直接进入网页,根据网页引导,最终成功获取属于自己的key。
以上准备已完成,即开始操作生成旅游攻略网页。
正式开始尝试生成旅游攻略网页:
步骤一:添加
MCP
服务
1.
单击
IntelliJ IDEA
侧边栏的通义灵码图标进入
智能会话
。
本文使用
IntelliJ IDEA
进行演示,其他
IDE
的灵码图
标位置可能稍有不同,您可参见
下载和安装
进入智能
会话。
2.
在
智能会话
页面,您可通过以下两种方式进入
MCP
服务
页
面。
方式一:单击欢迎语中的
MCP
工具
链接进入
MCP
服务
页
面。
方式二:单击右上角头像,并在下拉菜单中选择
个人设
置
,然后在个人设置页面单击
MCP
服务
下的条形框。
3.
单击
MCP
服务
右侧的
+
,并选择
手动添加
,然后在弹出的
添
加
MCP
服务
页面,配置以下选项:
名称
:输入服务名称,例如:
amap-sse
。
类型
:选择
SSE
。
服务地址
:
https://mcp.amap.com/sse?key=<
您在高德
申请的
key>
。
使用
获取高德申请的
key
替换
<
您在高德申请的
key>
,注意
不要有空格。
4.
单击
立即添加
,等到链接图标变成
绿色
则代表
MCP
服务添加
成功。
步骤二:生成
travel_tips.html
文件
重要
在通义灵码智能体工作之前,请务必确保已经打开了任何一个工
程文件,否则
MCP
调用会失败 ,更多通义灵码相关
MCP
使用问
题,
MCP
常见问题说明
。
1.
打开通义灵码
智能会话
对话框,并切换为
智能体
模式。
2.
在对话框中输入以下提示词并回车。
##
北京
3
天端午节(
25
年
5
月
31
日到
25
年
6
月
2
日)的旅行攻略。
#
帮我制作旅行攻略,考虑出行时间和路线,以及天气状况路线规
划。
#
制作网页,页面包含天气卡片展示
3
天的天气详情以及旅行小贴
士,展示每天的旅行计划,每天安排
3
个景点。
#
制作网页地图自定义绘制旅游路线和位置。
##
网页使用简约美观页面风格,景区图片以卡片展示。
#
行程规划结果在高德地图
app
展示,并集成到
h5
页面中。
##
同一天行程景区之间我想打车前往。
#
生成文件名
travel_tips.html
。
3.
灵码将根据您的需求,自主规格并调用所需工具,最终生成
travel_tips.html
文件。
4.
最终生成的页面效果如下所示。
如果生成的页面效果、布局、字体及颜色不符合你的
预期,你可以多次跟通义灵码沟通和对话。
如果无法查看预览效果,可以直接选择通义灵码
agent
模型让
AI
帮你生成预览效果
心得:
在本次作业中,通过使用通义灵码智能体加MCP,我轻松制作出了一个旅游攻略网页。
在上文,我与通义灵码的对话中,我所做的工作只是将想要的网页内容向它简单描述,通义灵码智能体仅在几分钟内便能生成一个我需要的网页的完整代码。相较于传统网页开发,可想这节省了许多需要通过手动编写代码的时间。
目前对编写代码这一块,我的身份只是刚拿到c语言程序设计这本书的大一新生。 但在最终成功生成了旅游攻略网页后,我最大的感触是,真正体会到了“AI为人类生产工作赋能”。
在智能驾驶特色班的第一次作业体验,让我感受到AI技术的强大,也为我今后的学习和创作提供了新思路。