學MCP的最佳方式是：自己構(gòu)建一個！我開發(fā)了一個幫你網(wǎng)站配圖的MCP Server

學了超過100小時的MCP之后，我才意識到，和學AI、AI編程的最佳方式是實操一樣，學MCP的最佳方式也是自己親自上手搭建一個。

關(guān)于MCP的概念，我就不在這多做解釋了，感興趣的可以去看我之前的文章：

說干就干，我開發(fā)并發(fā)布了我的第一個MCP Server，這是個給Cursor等AI IDE工具提供文生圖能力的免費MCP，用于解決你在網(wǎng)站開發(fā)或者SEO文章批量生成過程中的配圖問題。

很多人應(yīng)該都有體感，現(xiàn)在的Claude 4、Gemini 2.5、DeepSeek R1-0528等模型都能生成設(shè)計感非常出色的界面了，但是因為這些模型并不是可以生成圖片的多模態(tài)模型，所以當你開發(fā)的網(wǎng)站/app需要配圖時，他們只能用占位符作為暫時的替代，或者，你也可以要求它使用開源圖片庫的資源，但問題是那些圖片可能加載出錯，抑或是和你的網(wǎng)站主題毫無相干。

而我的這款MCP就試圖解決這個問題。讓Cursor、Trae、Claude Code等AI Coding工具根據(jù)他們對網(wǎng)站內(nèi)容主題的理解，調(diào)用AI文生圖MCP為你的網(wǎng)站在指定位置生成合適的配圖。

比如，一個原本長這樣的球鞋交易平臺首頁

用了我的MCP之后，被優(yōu)化成了這樣，網(wǎng)站的配圖不止是質(zhì)量不錯，而且你注意看細節(jié)的話，發(fā)現(xiàn)和描述的球鞋型號也完全匹配。

接下來我來詳解下，我是怎么用Cursor在一個小時內(nèi)把這個MCP開發(fā)出來的（當然你用別的你自己熟悉的AI Coding也完全可以）。

步驟一：準備MCP開發(fā)文檔

因為MCP這個概念是Anthropic在2024年底提出的，而現(xiàn)在我們主流使用的大模型，訓(xùn)練語料的截止時間通常是2023年底或者2024年中旬，所以你可以理解為絕大多數(shù)大模型都不具備關(guān)于什么是MCP、怎么開發(fā)MCP的知識。

Anthropic在MCP的官方網(wǎng)站：https://modelcontextprotocol.io/tutorials/building-mcp-with-llms 提供了相應(yīng)的文檔，比如以我的開發(fā)項目來說，分別是要訪問以下兩個鏈接復(fù)制內(nèi)容：

https://modelcontextprotocol.io/llms-full.txt

https://github.com/modelcontextprotocol/typescript-sdk/blob/main/README.md

你需要下載這個頁面中第一步llm-full.txt的文檔，以及根據(jù)你要開發(fā)MCP技術(shù)棧的差異，再下載第二步TypeScript或者Python的SDK readme文檔。

下載之后可以把文檔放到你這個MCP開發(fā)文件夾的根目錄中

步驟二：表達需求

有了對應(yīng)的文檔內(nèi)容可以供AI參考之后，你就可以根據(jù)你想要實現(xiàn)的目標表達需求了，在用Cursor開發(fā)的情況下，你需要注意的關(guān)鍵點是要主動 @ 這兩個文件，這種情況下Cursor會消耗更多token去更充分的讀取上下文（因為MCP開發(fā)文檔的上下文有10000多行，確實太長長長了）。

比如我這個需求信息如下：

請參考 @mcprule.txt @mcprule-ts.txt 這兩個文檔，幫我開發(fā)一個web設(shè)計圖片生成的MCP serve。
就是當用戶在使用AI設(shè)計網(wǎng)頁時，如果他的網(wǎng)頁涉及到占位圖片等圖片信息的展示，就通過該MCP調(diào)用AI文生圖模型，提供對應(yīng)的英文prompt生成圖片，并且圖片填充到對應(yīng)的網(wǎng)站區(qū)域。
文生圖調(diào)用方式如下，注意API key是由MCP客戶端傳入的，不要寫死在MCP Server里：
import requests
import json
from PIL import Image
from io import BytesIO
url = 'https://api-inference.modelscope.cn/v1/images/generations'
payload = {
    'model': 'MusePublic/489_ckpt_FLUX_1',#ModelScope Model-Id,required
    'prompt': 'A golden cat'# required
}
headers = {
    'Authorization': 'Bearer API_KEY,
    'Content-Type': 'application/json'
}
response = requests.post(url, data=json.dumps(payload, ensure_ascii=False).encode('utf-8'), headers=headers)
response_data = response.json()
image = Image.open(BytesIO(requests.get(response_data['images'][0]['url']).content))
image.save('result_image.jpg')

你可能注意到了，我寫的提示詞里還有一段示例代碼，這是因為我們的MCP需要調(diào)用文生圖的API，所以你需要自己去找個你想用的大模型，再提供對應(yīng)的調(diào)用案例讓AI進行參考，我這次選擇的是阿里魔搭社區(qū)上的一個Flux.1的模型https://modelscope.cn/models/MusePublic/489_ckpt_FLUX_1 一方面是覺得效果還不錯，另一方面是我希望我的MCP用戶也都能免費使用對應(yīng)API（魔搭社區(qū)給所有用戶都提供每天2000次的API調(diào)用權(quán)限）

步驟三：Bug處理和測試

提完需求之后，AI完成的MCP可能符合你的預(yù)期，也可能存在各種各樣的bug，在這個過程中你就持續(xù)用自然語言表達想法，以及讓AI自己做測試就好了。

步驟四：打包發(fā)布npm包

當你完成MCP的開發(fā)之后，你就可以讓Cursor再把你開發(fā)成功的MCP server寫到Mcp Json中進行調(diào)用了，但這里出現(xiàn)了一個小問題。

你會發(fā)現(xiàn)其中一行代碼是

      "args": ["/Users/alchain/11/MCP_FLUX_WEB/dist/index.js"],

這是個本地的文件路徑啊！

這時候你倒是也可以把你的MCP代碼倉庫開源到Github，讓你的用戶可以下載后自行配置，但這顯然不是個足夠好的用戶體驗。

所以，還有個更好的選擇是把你開發(fā)的MCP Server打包成npm包，這等于是讓你開發(fā)的資源成了個更標準化的node服務(wù)，相當于給MCP配上了個更標準的公域的文章。

這個過程同樣的，你只需要用自然語言表達即可，比如：

幫我把這個node服務(wù)打包上傳為npx的包

不過在此之前，你需要先前往node的官方網(wǎng)站https://www.npmjs.com/ 注冊個賬號，你的發(fā)布過程會需要你登錄對應(yīng)賬號。

我的這個MCP Server的npm包地址為：https://www.npmjs.com/package/@alchain/mcp-flux-web-image-generator

步驟五：使用和配置

接下來一切就緒，你就可以輕松的自己配置這個MCP服務(wù)，或者也發(fā)給你的用戶使用了。

我開發(fā)的相應(yīng)MCP Server配置代碼如下：

{
  "mcpServers": {
    "ai-image-generator": {
      "command": "npx",
      "args": ["@alchain/mcp-flux-web-image-generator@latest"],
      "env": {
        "MODELSCOPE_API_KEY": "your-modelscope-api-key-here"
      }
    }
  }
}

其中的API key你可以通過這個鏈接獲?。篽ttps://modelscope.cn/my/myaccesstoken

你可以在Cursor中通過下面的入口增加MCP

點擊“New MCP Server”后你可能看到類似下面的界面

看著這些代碼也不用慌，你可以全選，然后cmd+k或者ctrl+k，讓AI自己把代碼給你加上就行了。

配置成功后，你就可以隨時用自然語言表達你想要的圖片需求，也可以讓Cursor幫你把圖配上去。

文章寫得挺長，但其實操作起來還是很簡單的，你真的可以試試，跑通之后你對什么是MCP的理解會上升一個臺階。

如果你更習慣看視頻的話，也可以通過我這期B站視頻的教程：

https://www.bilibili.com/video/BV1i9GJzwEyM/?vd_source=b8ed956bbe6170c4bb6e401414e9d3ee