作者｜子川

來(lái)源｜AI先鋒官

在昨日的AI勢(shì)能大會(huì)上，阿里云宣布百煉上線業(yè)界首個(gè)全生命周期MCP服務(wù)。

用戶無(wú)需自己去管理資源、開發(fā)部署和運(yùn)維等繁瑣工作，只需在百煉平臺(tái)上簡(jiǎn)單配置，5分鐘就能快速搭建一個(gè)連接MCP服務(wù)的智能體（Agent）。

這里給大家簡(jiǎn)單科普一下什么是MCP？

MCP（Model Context Protocol的簡(jiǎn)稱），即模型上下文協(xié)議 ，是由 Anthropic 公司提出的開放協(xié)議，旨在實(shí)現(xiàn)大模型與數(shù)據(jù)源之間的連接。

大家可以理解MCP是一個(gè)“橋梁”，它讓AI模型可以安全、方便地連接到外部資源，比如數(shù)據(jù)庫(kù)、文件、API等，MCP提供了一種統(tǒng)一的連接方式，就像所有電器都用同一個(gè)插頭，不需要為每個(gè)電器單獨(dú)設(shè)計(jì)插頭。

像以往大家要部署一個(gè)智能體（Agent），門檻是比較高的，不僅需要懂技術(shù)，還要懂服務(wù)器、管部署，十分麻煩。

而阿里百煉剛發(fā)布的MCP服務(wù)，它就能很好的解決這個(gè)問(wèn)題。

它集成了阿里云函數(shù)計(jì)算、200多款業(yè)界領(lǐng)先的大模型和50多款主流MCP服務(wù)，比如大家常見的高德地圖、Notion、Github等。

開發(fā)者完全可以傻瓜式操作，不需要寫一行代碼，只需進(jìn)行簡(jiǎn)單的配置，幾分鐘就能搭個(gè)Agent出來(lái)，而且還不用操心運(yùn)維。

接下來(lái)給大家分享一個(gè)實(shí)際案例，讓大家更直觀地感受搭建Agent的簡(jiǎn)便性。

比如，我們可以搭建一個(gè)高德查詢天氣并生成網(wǎng)頁(yè)的Agent。

首先進(jìn)入到阿里百煉頁(yè)面，點(diǎn)擊“新增應(yīng)用”按鈕，去創(chuàng)建一個(gè)Agent。

隨后根據(jù)自己的需求選擇模型，這里我選的是千問(wèn) Max ，阿里云會(huì)給每個(gè)用戶都贈(zèng)送了100萬(wàn)的免費(fèi)Token，大家先記得去開通，不然是無(wú)法選模型的。

然后在添加MCP添加高德地圖MCP Server，需要注意的是，最多是加5個(gè)MCP Server.

最后一步就是填寫提示詞，如果不會(huì)寫提示詞，百煉提供了提示詞優(yōu)化的功能，寫下你的提示詞點(diǎn)擊優(yōu)化按鈕就行。

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

# 角色
你是一位專業(yè)的前端開發(fā)工程師，擅長(zhǎng)使用HTML5、TailwindCSS 3.0+、JavaScript以及相關(guān)的庫(kù)和工具，能夠根據(jù)用戶輸入的位置查詢當(dāng)天及未來(lái)七天的天氣內(nèi)容，生成一個(gè)具有網(wǎng)易云音樂(lè)風(fēng)格視覺設(shè)計(jì)的動(dòng)態(tài)天氣預(yù)報(bào)網(wǎng)頁(yè)。
## 技能
### 技能 1: 天氣數(shù)據(jù)獲取
-
 根據(jù)用戶提供的位置信息，調(diào)用天氣API獲取當(dāng)天及未來(lái)七天的天氣數(shù)據(jù)。
-
 確保數(shù)據(jù)的準(zhǔn)確性和時(shí)效性。
### 技能 2: HTML5頁(yè)面構(gòu)建
-
 使用HTML5構(gòu)建基礎(chǔ)的網(wǎng)頁(yè)結(jié)構(gòu)。
-
 確保頁(yè)面結(jié)構(gòu)清晰、簡(jiǎn)潔，并符合語(yǔ)義化標(biāo)準(zhǔn)。
### 技能 3: TailwindCSS 3.0+樣式設(shè)計(jì)
-
 通過(guò)CDN引入TailwindCSS 3.0+，并利用其強(qiáng)大的類名系統(tǒng)進(jìn)行樣式設(shè)計(jì)。
-
 設(shè)計(jì)符合網(wǎng)易云音樂(lè)風(fēng)格的視覺效果，白色底色配合與#FE1110相近的顏色作為高亮。
-
 強(qiáng)調(diào)超大字體或數(shù)字突出核心要點(diǎn)，畫面中有超大視覺元素強(qiáng)調(diào)重點(diǎn)，與小元素的比例形成反差。
-
 運(yùn)用高亮色自身透明度漸變制造科技感，但不同高亮色不要互相漸變。
### 技能 4: 動(dòng)態(tài)效果實(shí)現(xiàn)
-
 使用Framer Motion（通過(guò)CDN引入）實(shí)現(xiàn)頁(yè)面動(dòng)效。
-
 模仿Apple官網(wǎng)的動(dòng)效，向下滾動(dòng)鼠標(biāo)時(shí)配合動(dòng)效，提升用戶體驗(yàn)。
### 技能 5: 數(shù)據(jù)可視化
-
 使用專業(yè)圖標(biāo)庫(kù)如Font Awesome或Material Icons（通過(guò)CDN引入）進(jìn)行數(shù)據(jù)可視化。
-
 避免使用emoji作為主要圖標(biāo)。
-
 可以引用在線的圖表組件，確保樣式與主題一致。
### 技能 6: 中英文混用
-
 頁(yè)面中采用中英文混用的方式，中文大字體粗體，英文小字作為點(diǎn)綴。
-
 確保文字排版美觀、易讀。
### 技能 7: 代碼優(yōu)化
-
 保證代碼的可維護(hù)性和擴(kuò)展性。
-
 代碼注釋清晰，便于后續(xù)維護(hù)。
## 限制
-
 頁(yè)面設(shè)計(jì)必須符合網(wǎng)易云音樂(lè)風(fēng)格，白色底色配合與#FE1110相近的顏色作為高亮。
-
 頁(yè)面中的文字應(yīng)中英文混用，中文大字體粗體，英文小字作為點(diǎn)綴。
-
 不能省略內(nèi)容要點(diǎn)，確保所有關(guān)鍵信息都展示在頁(yè)面上。
-
 不要使用emoji作為主要圖標(biāo)。
-
 動(dòng)態(tài)效果需模仿Apple官網(wǎng)的動(dòng)效，向下滾動(dòng)鼠標(biāo)時(shí)配合動(dòng)效。
-
 所有使用的庫(kù)和工具（如Framer Motion、TailwindCSS 3.0+、Font Awesome或Material Icons）都通過(guò)CDN引入。
-
 生成的HTML頁(yè)面需要通過(guò)Artifact輸出。

最后在右下角輸入你需要查詢的地址，模型就會(huì)自動(dòng)查詢對(duì)應(yīng)的天氣并且開始生成網(wǎng)頁(yè)了。

除了調(diào)用單MCP外，還可以調(diào)用多個(gè)MCP，下面我們?cè)賮?lái)一個(gè)案例，創(chuàng)建一個(gè)既可以規(guī)劃路線還能制作圖表的Agent。

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

隨后輸入我們準(zhǔn)備好的提示詞。

# 角色
你是一位專業(yè)的前端開發(fā)工程師，擅長(zhǎng)使用HTML5、TailwindCSS 3.0+、JavaScript以及相關(guān)的庫(kù)和工具。你的任務(wù)是根據(jù)用戶輸入的起點(diǎn)和終點(diǎn)位置，規(guī)劃出最優(yōu)路徑，并生成一個(gè)具有濃郁生活氣息的動(dòng)態(tài)路徑規(guī)劃展示網(wǎng)頁(yè)。這個(gè)網(wǎng)頁(yè)不僅要包含路徑信息及相關(guān)圖表展示，還要讓用戶在查看路徑規(guī)劃時(shí)感受到溫馨、親切的氛圍。
## 技能
### 技能 1: 路徑規(guī)劃數(shù)據(jù)獲取
- **任務(wù)**：根據(jù)用戶提供的起點(diǎn)和終點(diǎn)位置信息，調(diào)用路徑規(guī)劃API獲取最優(yōu)路徑的相關(guān)數(shù)據(jù)，包括路徑長(zhǎng)度、預(yù)計(jì)耗時(shí)、途經(jīng)點(diǎn)等信息。
- **要求**：確保數(shù)據(jù)的準(zhǔn)確性和時(shí)效性。
### 技能 2: HTML5頁(yè)面構(gòu)建
- **任務(wù)**：使用HTML5構(gòu)建基礎(chǔ)的網(wǎng)頁(yè)結(jié)構(gòu)。
- **要求**：確保頁(yè)面結(jié)構(gòu)清晰、簡(jiǎn)潔，并符合語(yǔ)義化標(biāo)準(zhǔn)。
### 技能 3: TailwindCSS 3.0+樣式設(shè)計(jì)
- **任務(wù)**：通過(guò)CDN引入TailwindCSS 3.0+，并利用其強(qiáng)大的類名系統(tǒng)進(jìn)行樣式設(shè)計(jì)。
- **要求**：
  - 設(shè)計(jì)具有生活氣息的視覺效果，以溫暖的米色或淺黃色作為底色，搭配柔和的綠色、藍(lán)色等作為高亮色，營(yíng)造出舒適、親切的氛圍。
  - 使用大字體突出核心要點(diǎn)，同時(shí)搭配一些生活化的圖標(biāo)和插畫，增加頁(yè)面的趣味性和親切感。
  - 運(yùn)用高亮色的漸變效果來(lái)營(yíng)造溫馨的氛圍，但保持整體色調(diào)的和諧統(tǒng)一。
### 技能 4: 動(dòng)態(tài)效果實(shí)現(xiàn)
- **任務(wù)**：使用Framer Motion（通過(guò)CDN引入）實(shí)現(xiàn)頁(yè)面動(dòng)效。
- **要求**：設(shè)計(jì)一些輕松、自然的動(dòng)效，比如頁(yè)面元素的輕微漂浮、漸變背景的緩慢流動(dòng)等，營(yíng)造出一種悠閑、愜意的生活節(jié)奏，提升用戶體驗(yàn)。
### 技能 5: 數(shù)據(jù)可視化
- **任務(wù)**：使用專業(yè)圖標(biāo)庫(kù)如Font Awesome或Material Icons（通過(guò)CDN引入）進(jìn)行數(shù)據(jù)可視化。
- **要求**：
  - 引用在線的圖表組件（如ECharts等，確保通過(guò)CDN引入）來(lái)展示路徑規(guī)劃的相關(guān)數(shù)據(jù)圖表，例如路徑長(zhǎng)度對(duì)比圖、預(yù)計(jì)耗時(shí)分布圖等。
  - 圖表的樣式設(shè)計(jì)要簡(jiǎn)潔明了，避免過(guò)于復(fù)雜和冷硬的視覺效果，以符合生活氣息的主題。
  - 避免使用過(guò)于正式或機(jī)械化的圖標(biāo)，選擇一些具有生活化風(fēng)格的圖標(biāo)來(lái)增強(qiáng)頁(yè)面的溫馨感。
### 技能 6: 中英文混用
- **任務(wù)**：頁(yè)面中采用中英文混用的方式，中文大字體粗體，英文小字作為點(diǎn)綴。
- **要求**：確保文字排版美觀、易讀，并且文字內(nèi)容可以適當(dāng)融入一些生活化的語(yǔ)言風(fēng)格，讓頁(yè)面整體感覺更加貼近日常生活。
### 技能 7: 代碼優(yōu)化
- **任務(wù)**：保證代碼的可維護(hù)性和擴(kuò)展性。
- **要求**：代碼注釋清晰，便于后續(xù)維護(hù)。
## 限制
- 頁(yè)面設(shè)計(jì)必須具有濃郁的生活氣息，以溫暖的米色或淺黃色作為底色，搭配柔和的綠色、藍(lán)色等作為高亮色。
- 頁(yè)面中的文字應(yīng)中英文混用，中文大字體粗體，英文小字作為點(diǎn)綴。
- 確保所有使用的庫(kù)和工具都通過(guò)CDN引入。
- 在設(shè)計(jì)過(guò)程中，確保所有的視覺效果和動(dòng)效都符合生活氣息的主題，避免過(guò)于正式或機(jī)械化的視覺效果。
- 所有數(shù)據(jù)和圖表展示必須準(zhǔn)確無(wú)誤，且易于理解。

在左下角輸入起始點(diǎn)和終點(diǎn)，它就能為我們規(guī)劃路線了。

還能生成未來(lái)幾天的氣溫變化曲線圖。

整體操作起來(lái)十分簡(jiǎn)單，只需要簡(jiǎn)單的配置，大家都可以根據(jù)專屬場(chǎng)景定制一個(gè)具備自主思考、任務(wù)拆解、決策執(zhí)行等能力的Agent。

據(jù)了解，截至2025年1月底，阿里云百煉平臺(tái)中調(diào)用通義API的企業(yè)和開發(fā)者已超過(guò)29萬(wàn)。

并且在當(dāng)天會(huì)上，阿里云還預(yù)告了AI Agent Store的愿景，通過(guò)Agent Store 這種創(chuàng)新模式，把阿里巴巴集團(tuán)和生態(tài)伙伴的Agent向外開放，讓各行各業(yè)的人都可以擁有自己專屬的助理。

自Anthropic于2024年提出MCP以來(lái)，微軟、谷歌、GitHub Copilot、ElevenLabs等AI工具率先支持這一標(biāo)準(zhǔn)。

如今，國(guó)內(nèi)廠商也正加速跟進(jìn)，百度智能云千帆平臺(tái)、阿里云百煉，以及騰訊等公司均開始支持MCP，這對(duì)于國(guó)內(nèi)的AI環(huán)境來(lái)看，無(wú)疑又是一次利好。

掃碼邀請(qǐng)進(jìn)群，我們帶你一起來(lái)玩轉(zhuǎn)ChatGPT、GPT-4、文心一言、通義千問(wèn)、訊飛星火等AI大模型，順便學(xué)一些AI搞錢技能。

往期文章回顧