各位應(yīng)該最近頻繁聽到 MCP 這個(gè)詞，簡(jiǎn)單來說 MCP 協(xié)議的出現(xiàn)將模型使用工具的難度下降了非常多。

發(fā)布的這短短幾個(gè)月各種工具的 MCP 服務(wù)井噴式的出現(xiàn)。

我上周也寫了一篇教程幫大家使用 MCP，但其實(shí) MCP 使用不是很難，你只需要以前跟 AI 聊天一樣給 AI 提出需求就行。

難的是 MCP 的配置，真的非常惡心，現(xiàn)在支持 MCP 的客戶端除了 Claude 就是 Cursor 這種 AI IDE 本身這些軟件就難用。

然后配置又需要安裝配套的環(huán)境，安裝之后還需要你理解 UVX 和 UPX 的命令一下就攔住了很多人。

我當(dāng)時(shí)的教程在這塊給大家講了一兩千字，結(jié)果很多朋友還說看不懂。

后面我說希望某個(gè)大平臺(tái)可以簡(jiǎn)化一下 MCP 的配置，最好是應(yīng)用商店的模式點(diǎn)擊就可以部署。

沒想到這一天來的這么快，阿里云百煉平臺(tái)推出了業(yè)界首個(gè)全生命周期MCP服務(wù)。

企業(yè)、開發(fā)者甚至個(gè)人用戶可以一鍵部署 MCP 服務(wù)，用可視化界面構(gòu)建 Agents 應(yīng)用。

具體特點(diǎn)有：

1. 一鍵部署：提供一鍵部署、無需運(yùn)維的MCP服務(wù)
2. 超多 MCP 供給：內(nèi)置了 MCP 市場(chǎng)默認(rèn)提供了相當(dāng)多官方的 MCP 和三方 MCP
3. 低成本服務(wù)托管：業(yè)級(jí)MCP服務(wù)托管，函數(shù)計(jì)算資源動(dòng)態(tài)啟用，彈性按量付費(fèi)
4. 全鏈路工具兼容：在智能體和工作流中快速引用MCP服務(wù)

我直接也試了一下，確實(shí)將整個(gè) MCP 的部署難度降低了非常多，你現(xiàn)在基本什么都不用管，一鍵開通后就可以用 MCP 創(chuàng)建自己的 Agents 應(yīng)用了。

這里用兩個(gè)例子給大家展示一下怎么用百煉的 MCP 服務(wù)構(gòu)建自己的 Agents 應(yīng)用：

1. 1. 用高德 MCP 查詢當(dāng)?shù)靥鞖庵笞?AI 寫個(gè)網(wǎng)頁(yè)幫我們可視化的展示天氣；

2. 2. 用 Firecrawl 和 Flomo MCP 自動(dòng)查詢和總結(jié)網(wǎng)頁(yè)內(nèi)容保存到你的 Flomo 變成筆記。

首先看第一個(gè)案例，我們需要訪問百煉平臺(tái)（https://bailian.console.aliyun.com/?tab=mcp#/mcp-market）的 MCP 市場(chǎng)，從市場(chǎng)里面找到高德的 MCP 服務(wù)。

由于是阿里自家的服務(wù)所以這里的高德 MCP，功能要比外面發(fā)布的能力強(qiáng)很多。

開通之后我們就需要?jiǎng)?chuàng)建一個(gè)應(yīng)用來調(diào)用高德的 MCP 服務(wù)，切到應(yīng)用 Tab 的應(yīng)用管理部分，然后點(diǎn)擊「新增應(yīng)用」按鈕，這里推薦選智能體應(yīng)用就行。

進(jìn)來之后我們首先需要選模型，這里默認(rèn)的千問 Max 就行，我選 Deepseek 來著，但是看起來好像沒有支持 MCP，希望后面可以快點(diǎn)支持。

之后我們需要在智能體中添加高德的 MCP 服務(wù)，點(diǎn)擊「+MCP」在側(cè)邊欄勾選你剛才開通的高德 MCP 就行。

最后就只需要填寫提示詞就可以開整了，我也把我的提示詞放這里給大家參考，如果你有其他需求不會(huì)寫也沒關(guān)系，百煉也提供了提示詞優(yōu)化的功能，寫下你的提示詞點(diǎn)擊優(yōu)化按鈕就行。

# 角色
你是一位專業(yè)的前端開發(fā)工程師，擅長(zhǎng)使用HTML5、TailwindCSS 3.0+、JavaScript以及相關(guān)的庫(kù)和工具，能夠根據(jù)用戶輸入的位置查詢當(dāng)天及未來七天的天氣內(nèi)容，生成一個(gè)具有網(wǎng)易云音樂風(fēng)格視覺設(shè)計(jì)的動(dòng)態(tài)天氣預(yù)報(bào)網(wǎng)頁(yè)。

## 技能
### 技能 1: 天氣數(shù)據(jù)獲取
- 根據(jù)用戶提供的位置信息，調(diào)用天氣API獲取當(dāng)天及未來七天的天氣數(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ì)
- 通過CDN引入TailwindCSS 3.0+，并利用其強(qiáng)大的類名系統(tǒng)進(jìn)行樣式設(shè)計(jì)。
- 設(shè)計(jì)符合網(wǎng)易云音樂風(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（通過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（通過CDN引入）進(jìn)行數(shù)據(jù)可視化。
- 避免使用emoji作為主要圖標(biāo)。
- 可以引用在線的圖表組件，確保樣式與主題一致。

### 技能 6: 中英文混用
- 頁(yè)面中采用中英文混用的方式，中文大字體粗體，英文小字作為點(diǎn)綴。
- 確保文字排版美觀、易讀。

### 技能 7: 代碼優(yōu)化
- 保證代碼的可維護(hù)性和擴(kuò)展性。
- 代碼注釋清晰，便于后續(xù)維護(hù)。

## 限制
- 頁(yè)面設(shè)計(jì)必須符合網(wǎng)易云音樂風(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）都通過CDN引入。
- 生成的HTML頁(yè)面需要通過Artifact輸出。

之后再右側(cè)輸入你需要查詢的地址，模型就會(huì)自動(dòng)查詢對(duì)應(yīng)的天氣并且開始生成網(wǎng)頁(yè)了，如果你懶得自己寫也可以用我的這個(gè)玩玩：https://bailian.console.aliyun.com/share/e1204f6a3d2f4d419f55a492c8aa8699?memoryId=e1384d68e5a044eeaa1dfeb558322d66

獲取任意網(wǎng)頁(yè)內(nèi)容總結(jié)并記錄到 Flomo

接下來我們講一個(gè)稍微復(fù)雜點(diǎn)的，把你想要總結(jié)的網(wǎng)頁(yè)鏈接發(fā)給 AI 后他會(huì)自動(dòng)獲取內(nèi)容并且總結(jié)，然后自動(dòng)將總結(jié)內(nèi)容記錄到你的 Flomo 筆記里，還會(huì)帶上標(biāo)簽。

這里會(huì)涉及到兩個(gè) MCP 服務(wù)，F(xiàn)irecrawl 的網(wǎng)頁(yè)內(nèi)容總結(jié)和 Flomo 的筆記寫入。

這里因?yàn)橛玫搅?Firecrawl 和 Flomo 的服務(wù)所以我們需要去這兩個(gè)平臺(tái)獲取一下 API Key。

首先去 Firecrawl （https://www.firecrawl.dev/app/api-keys）這里，在側(cè)邊欄找到 API Keys 然后復(fù)制備用。

之后到 Flomo （https://v.flomoapp.com/mine?source=incoming_webhook） 復(fù)制我們的專屬記錄 API備用。

之后我們繼續(xù)回到百煉的 MCP 廣場(chǎng)找到這兩個(gè) MCP 服務(wù)開通，開通的時(shí)候輸入我們剛才申請(qǐng)的 MCP 就行。

然后我們繼續(xù)回到應(yīng)用 Tab，新建應(yīng)用，添加模型和選擇我們剛才開通的兩個(gè) MCP 服務(wù)。

然后就是寫提示詞了，剛開始我發(fā)給他網(wǎng)頁(yè)鏈接之后這里的 Firecrawl 一直獲取不到網(wǎng)頁(yè)信息，我還懷疑我的 API 不會(huì)是有問題吧，我又去 Firecrawl 官方試了一下，結(jié)果可以返回。

然后仔細(xì)看了一下模型的請(qǐng)求內(nèi)容發(fā)現(xiàn)，他的參數(shù)都沒寫，應(yīng)該是不知道應(yīng)該寫哪些參數(shù)，于是我就在提示詞里面加了一個(gè)示例，果然就 OK 了。

如果你要用的話可以參考我的提示詞。

# 角色
你是一位內(nèi)容整理專家，負(fù)責(zé)查詢和總結(jié)用戶輸入的網(wǎng)頁(yè)內(nèi)容，并將相關(guān)內(nèi)容總結(jié)后用中文記錄到 Flomo 中，同時(shí)添加適當(dāng)?shù)臉?biāo)簽。

## 技能
### 技能 1: 查詢和總結(jié)網(wǎng)頁(yè)內(nèi)容
- 根據(jù)用戶提供的網(wǎng)頁(yè)鏈接，使用Firecrawl MCP工具獲取網(wǎng)頁(yè)的 Markdown 內(nèi)容。
- 閱讀并理解網(wǎng)頁(yè)的主要內(nèi)容，用中文提取關(guān)鍵信息和要點(diǎn)。
- 將提取的信息進(jìn)行簡(jiǎn)潔而全面的總結(jié)。

### 技能 2: 記錄到 Flomo
- 調(diào)用 Flomo MCP 將總結(jié)的內(nèi)容記錄到 Flomo 中。
- 確保記錄的內(nèi)容格式清晰、易于閱讀。
- 在記錄內(nèi)容時(shí)，添加適當(dāng)?shù)臉?biāo)簽以便于后續(xù)查找和分類。

### 技能 3: 添加標(biāo)簽
- 根據(jù)總結(jié)的內(nèi)容，選擇 1 個(gè)合適的標(biāo)簽。
- 標(biāo)簽格式為 `#` 后面加詞語(yǔ)，每個(gè)標(biāo)簽后換行。
- 標(biāo)簽添加在最前面
- 確保標(biāo)簽準(zhǔn)確反映內(nèi)容的主題和關(guān)鍵詞。


### 限制

1. 總結(jié)的內(nèi)容必須為中文
2. 只需要一個(gè)標(biāo)簽
3. 標(biāo)簽#號(hào)與詞語(yǔ)之間不要有空格

### Firecrawl MCP工具的示例查詢代碼為：

{
  "name": "firecrawl_scrape",
  "arguments": {
    "url": "https://example.com",
    "formats": ["markdown"],
    "onlyMainContent": true,
    "waitFor": 1000,
    "timeout": 30000,
    "mobile": false,
    "includeTags": ["article", "main"],
    "excludeTags": ["nav", "footer"],
    "skipTlsVerification": false
  }
}

之后我們輸入一篇文章測(cè)試，就可以看到 MCP 正常返回了網(wǎng)頁(yè)的 Markdown 格式內(nèi)容，并且自動(dòng)將總結(jié)結(jié)果記錄到了 Flomo 里面。

上次我在我的 MCP 教程里面說過：

過技術(shù)的民主化與易用性之間總是存在矛盾。一方面我們希望技術(shù)足夠開放和靈活，另一方面又希望它足夠簡(jiǎn)單直觀。

這種矛盾在每一項(xiàng)新興技術(shù)發(fā)展初期都會(huì)出現(xiàn)，但隨著生態(tài)的成熟，這種矛盾終將被解決。

沒想到解決的這么快，就在我寫完這段話一周后，太離譜了，這就是 AI 速度朋友們。

如果你也對(duì) MCP 感興趣原先苦于高門檻沒辦法嘗試的話，我推薦你現(xiàn)在試試。

感謝閱讀，如果覺得對(duì)你有幫助可以幫我點(diǎn)個(gè)贊或者喜歡，也可以分享給你覺得需要的朋友！