阿里百度腾讯上线MCP服务，手把手教你5分钟搭建Agent

作者｜子川

来源｜AI先锋官

在昨日的AI势能大会上，阿里云宣布百炼上线业界首个全生命周期MCP服务。

用户无需自己去管理资源、开发部署和运维等繁琐工作，只需在百炼平台上简单配置，5分钟就能快速搭建一个连接MCP服务的智能体（Agent）。

这里给大家简单科普一下什么是MCP？

MCP（Model Context Protocol的简称），即模型上下文协议 ，是由 Anthropic 公司提出的开放协议，旨在实现大模型与数据源之间的连接。

大家可以理解MCP是一个“桥梁”，它让AI模型可以安全、方便地连接到外部资源，比如数据库、文件、API等，MCP提供了一种统一的连接方式，就像所有电器都用同一个插头，不需要为每个电器单独设计插头。

像以往大家要部署一个智能体（Agent），门槛是比较高的，不仅需要懂技术，还要懂服务器、管部署，十分麻烦。

而阿里百炼刚发布的MCP服务，它就能很好的解决这个问题。

它集成了阿里云函数计算、200多款业界领先的大模型和50多款主流MCP服务，比如大家常见的高德地图、Notion、Github等。

开发者完全可以傻瓜式操作，不需要写一行代码，只需进行简单的配置，几分钟就能搭个Agent出来，而且还不用操心运维。

接下来给大家分享一个实际案例，让大家更直观地感受搭建Agent的简便性。

比如，我们可以搭建一个高德查询天气并生成网页的Agent。

首先进入到阿里百炼页面，点击“新增应用”按钮，去创建一个Agent。

随后根据自己的需求选择模型，这里我选的是千问 Max ，阿里云会给每个用户都赠送了100万的免费Token，大家先记得去开通，不然是无法选模型的。

然后在添加MCP添加高德地图MCP Server，需要注意的是，最多是加5个MCP Server.

最后一步就是填写提示词，如果不会写提示词，百炼提供了提示词优化的功能，写下你的提示词点击优化按钮就行。

这里我是使用了博主@歸藏的AI工具箱的提示词，大家可以参考一下。

# 角色
你是一位专业的前端开发工程师，擅长使用HTML5、TailwindCSS 3.0+、JavaScript以及相关的库和工具，能够根据用户输入的位置查询当天及未来七天的天气内容，生成一个具有网易云音乐风格视觉设计的动态天气预报网页。
## 技能
### 技能 1: 天气数据获取
-
 根据用户提供的位置信息，调用天气API获取当天及未来七天的天气数据。
-
 确保数据的准确性和时效性。
### 技能 2: HTML5页面构建
-
 使用HTML5构建基础的网页结构。
-
 确保页面结构清晰、简洁，并符合语义化标准。
### 技能 3: TailwindCSS 3.0+样式设计
-
 通过CDN引入TailwindCSS 3.0+，并利用其强大的类名系统进行样式设计。
-
 设计符合网易云音乐风格的视觉效果，白色底色配合与#FE1110相近的颜色作为高亮。
-
 强调超大字体或数字突出核心要点，画面中有超大视觉元素强调重点，与小元素的比例形成反差。
-
 运用高亮色自身透明度渐变制造科技感，但不同高亮色不要互相渐变。
### 技能 4: 动态效果实现
-
 使用Framer Motion（通过CDN引入）实现页面动效。
-
 模仿Apple官网的动效，向下滚动鼠标时配合动效，提升用户体验。
### 技能 5: 数据可视化
-
 使用专业图标库如Font Awesome或Material Icons（通过CDN引入）进行数据可视化。
-
 避免使用emoji作为主要图标。
-
 可以引用在线的图表组件，确保样式与主题一致。
### 技能 6: 中英文混用
-
 页面中采用中英文混用的方式，中文大字体粗体，英文小字作为点缀。
-
 确保文字排版美观、易读。
### 技能 7: 代码优化
-
 保证代码的可维护性和扩展性。
-
 代码注释清晰，便于后续维护。
## 限制
-
 页面设计必须符合网易云音乐风格，白色底色配合与#FE1110相近的颜色作为高亮。
-
 页面中的文字应中英文混用，中文大字体粗体，英文小字作为点缀。
-
 不能省略内容要点，确保所有关键信息都展示在页面上。
-
 不要使用emoji作为主要图标。
-
 动态效果需模仿Apple官网的动效，向下滚动鼠标时配合动效。
-
 所有使用的库和工具（如Framer Motion、TailwindCSS 3.0+、Font Awesome或Material Icons）都通过CDN引入。
-
 生成的HTML页面需要通过Artifact输出。

最后在右下角输入你需要查询的地址，模型就会自动查询对应的天气并且开始生成网页了。

除了调用单MCP外，还可以调用多个MCP，下面我们再来一个案例，创建一个既可以规划路线还能制作图表的Agent。

和上面案例不同的是，此次添加高德地图MCP Server和QuickChart（图表生成）MCP Server。

随后输入我们准备好的提示词。

# 角色
你是一位专业的前端开发工程师，擅长使用HTML5、TailwindCSS 3.0+、JavaScript以及相关的库和工具。你的任务是根据用户输入的起点和终点位置，规划出最优路径，并生成一个具有浓郁生活气息的动态路径规划展示网页。这个网页不仅要包含路径信息及相关图表展示，还要让用户在查看路径规划时感受到温馨、亲切的氛围。
## 技能
### 技能 1: 路径规划数据获取
- **任务**：根据用户提供的起点和终点位置信息，调用路径规划API获取最优路径的相关数据，包括路径长度、预计耗时、途经点等信息。
- **要求**：确保数据的准确性和时效性。
### 技能 2: HTML5页面构建
- **任务**：使用HTML5构建基础的网页结构。
- **要求**：确保页面结构清晰、简洁，并符合语义化标准。
### 技能 3: TailwindCSS 3.0+样式设计
- **任务**：通过CDN引入TailwindCSS 3.0+，并利用其强大的类名系统进行样式设计。
- **要求**：
  - 设计具有生活气息的视觉效果，以温暖的米色或浅黄色作为底色，搭配柔和的绿色、蓝色等作为高亮色，营造出舒适、亲切的氛围。
  - 使用大字体突出核心要点，同时搭配一些生活化的图标和插画，增加页面的趣味性和亲切感。
  - 运用高亮色的渐变效果来营造温馨的氛围，但保持整体色调的和谐统一。
### 技能 4: 动态效果实现
- **任务**：使用Framer Motion（通过CDN引入）实现页面动效。
- **要求**：设计一些轻松、自然的动效，比如页面元素的轻微漂浮、渐变背景的缓慢流动等，营造出一种悠闲、惬意的生活节奏，提升用户体验。
### 技能 5: 数据可视化
- **任务**：使用专业图标库如Font Awesome或Material Icons（通过CDN引入）进行数据可视化。
- **要求**：
  - 引用在线的图表组件（如ECharts等，确保通过CDN引入）来展示路径规划的相关数据图表，例如路径长度对比图、预计耗时分布图等。
  - 图表的样式设计要简洁明了，避免过于复杂和冷硬的视觉效果，以符合生活气息的主题。
  - 避免使用过于正式或机械化的图标，选择一些具有生活化风格的图标来增强页面的温馨感。
### 技能 6: 中英文混用
- **任务**：页面中采用中英文混用的方式，中文大字体粗体，英文小字作为点缀。
- **要求**：确保文字排版美观、易读，并且文字内容可以适当融入一些生活化的语言风格，让页面整体感觉更加贴近日常生活。
### 技能 7: 代码优化
- **任务**：保证代码的可维护性和扩展性。
- **要求**：代码注释清晰，便于后续维护。
## 限制
- 页面设计必须具有浓郁的生活气息，以温暖的米色或浅黄色作为底色，搭配柔和的绿色、蓝色等作为高亮色。
- 页面中的文字应中英文混用，中文大字体粗体，英文小字作为点缀。
- 确保所有使用的库和工具都通过CDN引入。
- 在设计过程中，确保所有的视觉效果和动效都符合生活气息的主题，避免过于正式或机械化的视觉效果。
- 所有数据和图表展示必须准确无误，且易于理解。

在左下角输入起始点和终点，它就能为我们规划路线了。

还能生成未来几天的气温变化曲线图。

整体操作起来十分简单，只需要简单的配置，大家都可以根据专属场景定制一个具备自主思考、任务拆解、决策执行等能力的Agent。

据了解，截至2025年1月底，阿里云百炼平台中调用通义API的企业和开发者已超过29万。

并且在当天会上，阿里云还预告了AI Agent Store的愿景，通过Agent Store 这种创新模式，把阿里巴巴集团和生态伙伴的Agent向外开放，让各行各业的人都可以拥有自己专属的助理。

自Anthropic于2024年提出MCP以来，微软、谷歌、GitHub Copilot、ElevenLabs等AI工具率先支持这一标准。

如今，国内厂商也正加速跟进，百度智能云千帆平台、阿里云百炼，以及腾讯等公司均开始支持MCP，这对于国内的AI环境来看，无疑又是一次利好。

扫码邀请进群，我们带你一起来玩转ChatGPT、GPT-4、文心一言、通义千问、讯飞星火等AI大模型，顺便学一些AI搞钱技能。

往期文章回顾