?MCP 最近在 AI 領(lǐng)域 引發(fā)了 廣泛關(guān)注，特別是在 海外各大社區(qū) 中，大家熱烈討論，熱度 相當(dāng)高。

我打開了 Google Trends，這是一個專門用于查看全球熱點趨勢的網(wǎng)站。

輸入關(guān)鍵詞后，可以查看其熱度變化。

我搜索了 “MCP”，它的趨勢如圖所示，變化非常明顯。

各位可以參考一下。

每天都有新的 MCP 工具被推出，為我們帶來了無限的機(jī)會。

當(dāng)我打開 Cline 的 MCP Servers 時，便發(fā)現(xiàn)了許多新工具等待探索。

本文，我會全面介紹 MCP，包括它的基本概念、核心技術(shù)原理，以及它在實際應(yīng)用中的各種場景。

讓你輕松掌握 MCP 的所有要點。

什么是 MCP

MCP（Model Context Protocol，即模型上下文協(xié)議）是由 Anthropic（Claude 的母公司）于 2024年11月 開源發(fā)布的一項 全新技術(shù)。

簡單來說，MCP 是一個 AI 大模型的標(biāo)準(zhǔn)化工具箱。

大模型可以通過這些工具與 外界互動，獲取信息，并 完成具體任務(wù)。

在日常工作和學(xué)習(xí)中，我們經(jīng)常需要與 瀏覽器、文件、數(shù)據(jù)庫 和 代碼倉庫 等外部工具進(jìn)行交互。

在 傳統(tǒng)方式 中，我們需要 手動截圖 或 復(fù)制文本，再將其 粘貼 到 AI 窗口 中進(jìn)行對話。

大家請注意，我的插畫中的箭頭都是從右到左，表示內(nèi)容是單向流動的，而不是雙向的。

這意味著我們是將瀏覽器、文件系統(tǒng)或GitHub中的信息復(fù)制到 AI 中，以便進(jìn)行對話時的數(shù)據(jù)流向。

MCP通過標(biāo)準(zhǔn)化的協(xié)議，讓我們不再需要手動截圖、復(fù)制文本，然后再粘貼到AI 窗口中進(jìn)行對話。

這一過程被自動化了，簡化了我們的操作。

MCP 服務(wù)充當(dāng)AI 和外部工具之間的橋梁，能夠自動替代人類訪問和操作這些外部工具。

在我的插圖中，箭頭為雙向，表示AI 可以直接訪問 MCP 服務(wù)。

而 MCP 服務(wù)則能訪問瀏覽器、文件系統(tǒng)等數(shù)據(jù)源。

通過這種方式，數(shù)據(jù)能夠通過 MCP 服務(wù)傳輸?shù)?AI 中。

每個 MCP 服務(wù)（也稱為 MCP Server）專注于特定的任務(wù)。

例如，有的服務(wù)專門用于讀取和寫入瀏覽器信息，有的負(fù)責(zé)處理本地文件，還有的用于操作 Git 倉庫等。

MCP Server 通常是一個在本地運行的程序，可能是用 Node.js 或 Python 開發(fā)的。

大模型通過操作系統(tǒng)的 標(biāo)準(zhǔn)輸入輸出（stdio），即我們常說的輸入與輸出通道，來進(jìn)行信息交流與處理，并調(diào)用某個 MCP Server。

它的信息格式是 JSON，這是一種常用的數(shù)據(jù)交換格式。

{
    "jsonrpc": "2.0",
    "id": 129,
    "method": "tools/call",
    "params": {
        "name": "search_repositories",
        "arguments": {
            "query": "user:BNTang"
        }
    }
}

MCP Server 在接收到請求后，會通過自身的代碼或外部工具的 API來執(zhí)行任務(wù)。

從這里可以看出，MCP 協(xié)議與 Function Calling 非常相似。

MCP 的最大優(yōu)點是整合了之前各大模型不同的Function Call 標(biāo)準(zhǔn)，形成了一個統(tǒng)一的標(biāo)準(zhǔn)協(xié)議。

而且，不僅是 Claude，幾乎所有市面上的大模型都可以接入 MCP。

本文，我將用免費的 DeepSeek，來進(jìn)行實戰(zhàn)演示。

準(zhǔn)備工作

在正式開始之前，我們需要先準(zhǔn)備一個支持 MCP 協(xié)議的客戶端。

目前支持 MCP 功能 的客戶端并不多，主要有 AI 編程工具 Cline、Cursor、WindSurf，以及 Claude 官方客戶端（Claude App） 等。

本文將以開源免費的 Cline 為例進(jìn)行演示，并簡要介紹如何在 Cursor 中完成相關(guān)配置。

首先，請訪問 VSCode 官網(wǎng)，下載并安裝 Visual Studio Code。

后續(xù)我會持續(xù)分享 VSCode 的安裝與使用教程，歡迎大家關(guān)注我，以便第一時間獲取最新內(nèi)容。

安裝完成后，我們打開 VSCode 軟件：

在界面左側(cè)的工具欄中，找到并點擊 Extensions 圖標(biāo)，即可進(jìn)入插件市場，方便我們安裝和管理各種實用插件。

在 Extensions 市場中搜索 Cline，找到并點擊 安裝插件：

安裝完成后，在左側(cè)面板找到 Cline，點擊進(jìn)入：

接下來，需要為 Cline 配置一個 AI 模型。首先點擊 設(shè)置（Settings）：

在 模型提供商中，選擇 OpenRouter，它提供免費的 DeepSeek V3 模型：

在模型搜索框中，輸入 deepseek/deepseek-chat-free，選擇該模型：

這是免費的 DeepSeek V3 模型，大家可以選擇它。

接下來，我們需要獲取一個 API Key，點擊 Get OpenRouter API Key：

需要登錄（可以使用 谷歌賬號）：

該地址在國內(nèi)可以直連。

點擊 Authorize 授權(quán)：

點擊 打開 Visual Studio Code：

然后再點擊 Open：

此時 OpenRouter 的 API Key 會自動填寫：

Cline 支持兩種運行模式：Planning（規(guī)劃模式） 和 Acting（執(zhí)行模式），具體說明如下：

• Planning 模式：此模式用于生成詳細(xì)的行動計劃，非常適合在開始編寫代碼之前與 AI 進(jìn)行溝通，清晰地分解任務(wù)，從而避免盲目操作導(dǎo)致的返工。您可以利用此模式規(guī)劃新功能的實現(xiàn)步驟或討論如何優(yōu)化現(xiàn)有代碼。
• Acting 模式：此模式負(fù)責(zé)根據(jù) Planning 階段的計劃逐步執(zhí)行任務(wù)。適用于在明確計劃后，讓 AI 實際執(zhí)行操作。例如，您在 Planning 模式中已確定了 API 調(diào)用的實現(xiàn)邏輯，然后可以切換到 Acting 模式，讓 AI 幫助您編寫具體代碼。

此外，如果您希望為 Planning 和 Acting 模式分別使用不同的 AI 模型，可以勾選 “Use different models for Plan and Act modes” 選項。啟用該選項后，您可以為 Planning 模式指定一個擅長分析和規(guī)劃的 AI 模型，同時為 Acting 模式配置一個更適合執(zhí)行操作的模型。這樣，兩個模式可以各司其職，提供更靈活和高效的智能輔助體驗。

為 Plan 模式 和 Act 模式 分別配置 OpenRouter 的 API Key。例如，您可以統(tǒng)一使用免費的 DeepSeek 模型，但后續(xù)可以根據(jù)自己的實際需求進(jìn)行調(diào)整。在寫代碼時，可以為 Act 模式 配置 Claude 模型，而為 Plan 模式 配置 ChatGPT 模型。這樣，您可以充分利用各個模型的優(yōu)勢，提高 工作效率 和 智能輔助體驗。

只需配置一次 OpenRouter 的 API Key，即可讓兩個模式共享該設(shè)置。

配置完成后，請點擊 Save 以保存設(shè)置。

接下來，返回 Cline 的主界面，點擊 New Task 開始測試。

選擇 Act 模式，并勾選 Auto-append: Read, Browse。這是我之前的配置，供大家參考。

發(fā)送 “你好”，查看輸出效果：

此時 Cline 的配置已完成。

接下來，我們要安裝 Node.js。

正如之前所述，MCP Server 本質(zhì)上是運行在電腦上的一個 Node.js 程序，因此 Node.js 的運行環(huán)境必不可少。

安裝 Node.js 可以參考 三種方式輕松搭建 Node.js，至此所有準(zhǔn)備工作就完成了。

接下來我們開始正式安裝 MCP Server。

第一個 MCP

我們回到 Cline，點擊這個 MCP Server 的小圖標(biāo)。

這是 Cline 新推出的 MCP Server 應(yīng)用市場。

我們可以按照 星標(biāo)數(shù)量（GitHub Stars） 進(jìn)行排序。

在這里找到非常受歡迎的 MCP 服務(wù)器。我們的第一個 MCP 服務(wù) 以這個 GitHub 項目 為例。請點擊 “安裝”（Install） 按鈕進(jìn)行安裝。

它會自動打開一個 AI 聊天窗口，您可以根據(jù) AI 的指引 完成 MCP Server 的安裝。

第一步是創(chuàng)建一個 空文件夾，用于安裝的 目標(biāo)位置：

mkdir E:\Document\Cline\MCP\github-server

這一步不是必需的，我將直接點擊 “繼續(xù)（Run Command）”按鈕。

在 第二步 中，它要求我們填寫一個 GitHub Token。請打開提供的 鏈接：

進(jìn)入 GitHub 的設(shè)置頁面，找到 Token 生成部分，然后點擊 “創(chuàng)建一個新的 Token”。

為 Token 命名，我這里選擇 Cline。

在這里，我為它授予了 所有倉庫的權(quán)限，選擇了 所有倉庫（All repositories）。

接下來，詳細(xì)討論一下 Repository permissions，其中包含一些 細(xì)致的權(quán)限控制選項。

這里我為他提供了創(chuàng)建倉庫的權(quán)限，請將 Administration 權(quán)限設(shè)置為 Read and write。

此外，還有 編寫代碼的權(quán)限，請將 Codespaces 權(quán)限 設(shè)置為 Read and write。

另外，還有一個查看倉庫內(nèi)容的權(quán)限，請將 Contents 權(quán)限設(shè)置為 Read and write。

你可以根據(jù)具體需求為其分配相應(yīng)的 權(quán)限，設(shè)置完成后，點擊 Generate token 按鈕即可生成該 Token。

這樣，我們的 GitHub Token 就創(chuàng)建完成了。請記得為令牌設(shè)置一個合適的 過期時間，否則 GitHub 會顯示黃色警告 ??（這里我操作得太快，沒有截取對應(yīng)的圖片，也就不再回退了）。接下來，我們 復(fù)制生成的 Token 即可。

回到 Cline，粘貼 Token 后，點擊 「發(fā)送（Send）」按鈕 即可。

Cline 已經(jīng)為我們創(chuàng)建好了 配置文件，點擊 「Save」按鈕 即可保存。

Cline wants to use a tool on the GitHub MCP server，請點擊 「Approve」按鈕。

接下來，Cline 想使用 npx 命令，不過此步驟并非必需，我仍然點擊 「繼續(xù)（Run Command）」按鈕。

如果出現(xiàn) 「Proceed While Running（繼續(xù)運行）」 提示，請點擊 「Proceed While Running」按鈕。

若您使用的是 Mac 系統(tǒng)，到此 安裝步驟 便已完成。

但若您使用的是 Windows 系統(tǒng)，則還需額外進(jìn)行一些 配置。

請注意，以下步驟非常重要，請務(wù)必仔細(xì)操作：

1. 打開配置文件 cline_mcp_settings.json，首先，將原本位于 "command" 中的 npx 移動到 "args" 數(shù)組中：

2. 將 "command" 的值修改為 cmd

3. 在 "args" 數(shù)組中新增一行 /c

最終的 配置文件 參考如下：

{
  "mcpServers": {
    "github.com/modelcontextprotocol/servers/tree/main/src/github": {
      "command": "cmd",
      "args": [
        "/c",
        "npx",
        "-y",
        "@modelcontextprotocol/server-github"
      ],
      "env": {
        "GITHUB_PERSONAL_ACCESS_TOKEN": "脫敏處理",
      },
      "disabled": false,
      "autoApprove": []
    }
  }
}

保存 配置文件 后，回到 MCP Server 的 「Installed」選項卡，此時 GitHub MCP Server 已經(jīng)顯示為 綠色狀態(tài)，表示安裝成功。

至此，MCP Server 的 配置 已成功完成。實際上，配置 MCP Server 最核心的就是上述的 配置文件，前面的 圖形界面步驟 并非必須，后續(xù)直接編輯 配置文件 也可以完成 MCP Server 的配置。

接下來，我們進(jìn)行一次簡單的 測試：

1. 點擊界面上的 「Done」按鈕：

2. 新建一個對話，點擊 「New Task」按鈕：

3. 向 AI 提問，例如：

我的名字是 BNTang，我在 GitHub 上有哪些倉庫？

回車發(fā)送問題：

我們無需手動指定 MCP 服務(wù) 或 工具，AI 會自動智能地選擇最合適的 工具 進(jìn)行處理。在發(fā)送問題后，AI 請求調(diào)用名為 search_repositories 的 MCP 工具：

4. 點擊 「Approve」按鈕，允許 工具 調(diào)用：

此時，Cline 會調(diào)用 MCP 工具 并獲取數(shù)據(jù)：

5. 最終，大模型 會將獲取到的數(shù)據(jù)進(jìn)行整理，并返回 最終結(jié)果：

如圖所示，AI 列舉了我的 14 個公開倉庫，說明 MCP Server 已成功配置并正常運行。

接下來，我們打開一個 Powershell 界面：

我們一起來探究一下 MCP 的本質(zhì)究竟是什么。我先粘貼三行 命令：

$json = '{"jsonrpc":"2.0","id":123,"method":"tools/call","params":{"name":"search_repositories","arguments":{"query":"user:BNTang"}}}'
$env:GITHUB_PERSONAL_ACCESS_TOKEN = "脫敏處理"
echo $json | npx -y @modelcontextprotocol/server-github

• 第一行定義了一個 JSON 字符串，它正是客戶端（Cline）向 MCP Server 傳遞的參數(shù)。我們看到 JSON 中的 method 字段是 "tools/call"，表示調(diào)用工具；params 中的工具名為 "search_repositories"，即搜索倉庫；query 則是具體的搜索參數(shù)，這里是查詢 GitHub 用戶 "BNTang"。
• 第二行設(shè)置了運行時的 環(huán)境變量，即 GitHub 的 個人訪問令牌（已脫敏）。
• 第三行則通過 管道符，將剛才定義的 JSON 參數(shù)傳遞給 MCP Server（一個基于 NodeJS 的程序）執(zhí)行。

現(xiàn)在我們 運行 一下上述 命令：

可以看到，成功獲取了 GitHub 上用戶 "BNTang" 的 倉庫信息。

通過這個例子，我們發(fā)現(xiàn) MCP 本質(zhì)上并沒有什么神秘之處。它的核心原理，就是客戶端通過 命令行 調(diào)用本地（或服務(wù)器上）的 NodeJS 或 Python 程序，執(zhí)行特定操作后再返回結(jié)果。

接下來，我們再 測試 一個新的 任務(wù)：創(chuàng)建一個名為 "cline_test" 的 GitHub 倉庫。

我在 Cline 的 問答輸入框 中輸入：

請幫我創(chuàng)建一個 GitHub 倉庫，名字叫做 cline_test

此時，Cline 會詢問我是否允許它調(diào)用 MCP Server，我點擊 Approve：

隨后，Cline 顯示 倉庫創(chuàng)建成功，并返回了 倉庫地址：

點擊 鏈接，我們跳轉(zhuǎn)到 GitHub 查看一下：

確認(rèn) 倉庫已經(jīng) 成功創(chuàng)建：

我們注意到，單個 MCP Server 工具 提供了多達(dá) 26 項強(qiáng)大的功能，其中包括但不限于：

• 創(chuàng)建或更新文件 （create_or_update_file）
• 搜索倉庫 （search_repositories）
• 創(chuàng)建倉庫 （create_repository）
• 獲取文件內(nèi)容 （get_file_contents）
• 推送文件 （push_files）

這些功能幾乎涵蓋了所有與 GitHub 交互的需求，一個 MCP 工具就可以輕松處理這些操作。

更重要的是，我們只需使用 自然語言，就能直接指揮 AI 完成這些工作，全程無需離開 VSCode，極大提升了我們的 工作效率。

通過以上示例，我們清晰地感受到了 MCP 的 強(qiáng)大 與 便捷 之處。

Cursor + MCP

接下來，我們來看如何 配置 Cursor。需要注意的是，低版本的 Cursor 是可以支持 MCP 服務(wù) 的，我使用的版本是 0.48.7。在 Cursor 的設(shè)置中，我首先將版本切換到 Early Access（搶先體驗）版本。

然后，通過點擊 Check for Updates 來 升級 Cursor 到最新版本（版本號會隨時間變化，因此這里不再說明具體版本號）。

最新版本支持全新的 MCP 配置方式。本文將聚焦于 新的配置方法。首先，在 Cursor 設(shè)置的左側(cè)，找到 MCP 配置選項。目前的 MCP 配置是通過 文件方式實現(xiàn)的：

在 項目根目錄下創(chuàng)建一個名為 .cursor 的 文件夾：

在 .cursor 文件夾中，右擊選擇 New File，創(chuàng)建文件 mcp.json：

接下來，將之前在 Cline 中所配置的內(nèi)容完整復(fù)制到 mcp.json 文件中：

{
  "mcpServers": {
    "github.com/modelcontextprotocol/servers/tree/main/src/github": {
      "command": "cmd",
      "args": [
        "/c",
        "npx",
        "-y",
        "@modelcontextprotocol/server-github"
      ],
      "env": {
        "GITHUB_PERSONAL_ACCESS_TOKEN": "脫敏處理"
      },
      "disabled": false,
      "autoApprove": []
    }
  }
}

當(dāng)你粘貼完成后，左下角會彈出一個 New MCP server detected（檢測到新的 MCP 服務(wù)器）提示，點擊 Enable 啟用它：

之后，打開 Cursor 的 MCP 選項卡，檢查 MCP Server 的 狀態(tài)，確認(rèn)它已經(jīng)變?yōu)?nbsp;綠色：

?? 注意：如果彈出了 黑色窗口，請不要關(guān)閉它，只要確認(rèn) MCP Server 是 綠色 即可。

至此，Cursor 的配置已完成，說明當(dāng)前的 Cursor 配置與 Cline 的設(shè)置是一致的。

接下來，我將演示如何添加 另一種 MCP Server。我們前往 MCP Servers GitHub 頁面，找到官方提供的 自定義 Server。這次我將演示 file system（文件系統(tǒng)） 這個 Server：

點擊 鏈接 后，向下滾動頁面，你會看到 npx 的安裝方式：

我們將 file system 的配置添加到 Cursor 的 mcp.json 文件中。復(fù)制相應(yīng)的段落配置，如下所示：

在 mcp.json 文件中添加一個 逗號，并將復(fù)制的內(nèi)容粘貼到 逗號后面，確保逗號位于 最后一行的末尾：

{
  "mcpServers": {
    "github.com/modelcontextprotocol/servers/tree/main/src/github": {
      "command": "cmd",
      "args": [
        "/c",
        "npx",
        "-y",
        "@modelcontextprotocol/server-github"
      ],
      "env": {
        "GITHUB_PERSONAL_ACCESS_TOKEN": "脫敏處理"
      },
      "disabled": false,
      "autoApprove": []
    },
+   "filesystem": {
+     "command": "npx",
+     "args": [
+       "-y",
+       "@modelcontextprotocol/server-filesystem",
+       "/Users/username/Desktop",
+       "/path/to/other/allowed/dir"
+     ]
+   }
  }
}

對于 Mac 系統(tǒng)，配置到此即可；對于 Windows 系統(tǒng)，需要將 npx 移動到 args 數(shù)組中，同時將 command 修改為 cmd，并新增一行 /c。

完成以上步驟后，還需調(diào)整 文件系統(tǒng)的配置如下：

這里的配置定義了 file system 可操作的 目錄。我將 電腦桌面的目錄 添加到此列表中。Windows 系統(tǒng)路徑記得使用 雙反斜杠 \，例如：C:\Users\Public\Desktop。

注意將 不需要的配置刪除：

完成 MCP 的添加后，保存并返回 Cursor 設(shè)置，進(jìn)入 MCP 選項卡，啟用 file system 這個 MCP Server，當(dāng)前顯示為 Disabled（禁用），點擊 Disable 變?yōu)?nbsp;Enable（啟用）：

啟用后，點擊 Refresh（刷新） 按鈕：

這時可以看到 file system 的 MCP Server 已經(jīng)變?yōu)?nbsp;綠色的狀態(tài)：

如果打開了一個新的空白 命令行窗口，請不要關(guān)閉，不用理會，只需保證 MCP Server 為 綠色 即可。

最后，我們來測試 file system 這個 MCP Server。在 Cursor 的 AI 對話框中，務(wù)必將模式切換到 Agent 模式：

在此模式下，我詢問：

C:\Users\Public\Desktop 這個文件夾里面有什么？

也就是想了解桌面上都有什么文件。回車后，Cursor 將使用 MCP 工具，點擊 Run Command：

Cursor 說輸出似乎有些亂碼，建議用另一種方式查看，繼續(xù)點擊 Run Command：

最終，成功列出了目錄中的內(nèi)容：

順便提一句，如果希望 Cursor 自動使用 MCP 工具，而無需每次授權(quán)，可以在 Cursor 設(shè)置中進(jìn)入 Features 選項卡，勾選 Enable auto-run mode 選項：

這樣在使用 MCP 時就無需再次確認(rèn)授權(quán)。我們同樣可以將此配置文件直接復(fù)制到 Cline 中，使 Cline 也能使用 file system 這個 MCP Server。

全量復(fù)制 Cursor 的 mcp.json 內(nèi)容，切換到 Cline，進(jìn)入 MCP Servers，點擊 Installed 選項卡，然后選擇 Configure MCP Server：

然后直接粘貼復(fù)制的內(nèi)容：

保存后，可以看到 file system 這個 MCP Server 也已經(jīng)變?yōu)榫G色狀態(tài)：

這樣，無論是在 Cursor 還是 Cline，file system 這個 MCP Server 都可以順利使用，兩個工具之間的配置是可以互通的。

總結(jié)一下，我們介紹了兩種設(shè)置 MCP 的方法：第一種是讓 AI 自動幫助我們生成配置文件，第二種是利用 GitHub 上的示例手動粘貼配置。這兩種方法均可輕松使用，用戶可以根據(jù)需要選擇其一。

Python 版

這里我們以一個特殊的 MCP Server time 為例，展示如何安裝和配置使用 Python 編寫的 MCP Server。

第一步：訪問 MCP Server 的 GitHub 頁面，在 MCP Server 列表中找到 time：

點擊進(jìn)入其 GitHub 頁面：

第二步：安裝 Python 環(huán)境（如已有可跳過）由于該 MCP Server 基于 Python 開發(fā)，因此需確保你的電腦已安裝 Python 環(huán)境：

如果尚未安裝 Python，請參考：Python 雙版本 Windows 安裝攻略。

第三步：安裝 MCP Server（time）復(fù)制如下命令：

pip install mcp-server-time

打開 Powershell 粘貼并執(zhí)行：

安裝完成界面：

第四步：配置 MCP Server 到 Cline，在 GitHub 頁面找到 Configure for Claude.app 部分，展開 Using pip installation，復(fù)制以下 JSON 配置：

"time": {
  "command": "python",
  "args": ["-m", "mcp_server_time"]
}

打開 Cline 的 MCP 配置文件 cline_mcp_settings.json，將上述配置添加到 "mcpServers" 中，注意逗號：

{
  "mcpServers": {
    "github.com/modelcontextprotocol/servers/tree/main/src/github": {
      "command": "cmd",
      "args": [
        "/c",
        "npx",
        "-y",
        "@modelcontextprotocol/server-github"
      ],
      "env": {
        "GITHUB_PERSONAL_ACCESS_TOKEN": "脫敏處理"
      },
      "disabled": false,
      "autoApprove": []
    },
    "filesystem": {
      "command": "cmd",
      "args": [
        "/c",
        "npx",
        "-y",
        "@modelcontextprotocol/server-filesystem",
        "C:\\Users\\Public\\Desktop"
      ]
    },
+   "time": {
+     "command": "python",
+     "args": ["-m", "mcp_server_time"]
+   }
  }
}

第五步：配置本地時區(qū)，接下來，在剛才的 "args" 后面添加時區(qū)配置（這里以上海時區(qū)為例）：

"--local-timezone=Asia/Shanghai"

配置后效果：

保存配置文件。

第六步：驗證 MCP Server 是否成功加載，回到 Cline 的 MCP Server 面板，切換到 Installed 選項卡，確認(rèn) time 已變?yōu)榫G色狀態(tài)：

第七步：測試 MCP Server 功能，新建對話框，切換到 Act 模式，輸入測試問題：

When it’s 4 PM in New York, what time is it in London?

首次使用時，Cline 將請求調(diào)用 MCP 權(quán)限。若想避免每次詢問，可在 Cline 設(shè)置 中勾選：

• Use MCP Server
• 對應(yīng) MCP 工具的 Auto Approve 選項

點擊 Approve 后，MCP Server 成功調(diào)用，并返回結(jié)果：

最終效果：

第八步：遷移配置到 Cursor（可選），同樣的配置也可直接復(fù)制到 Cursor 的 .cursor/mcp.json 文件中，保存后點擊 Refresh 即可加載：

以上即為一個特殊 MCP Server（time）的完整安裝、配置與使用過程。后續(xù)我們將繼續(xù)介紹其他實用的 MCP 服務(wù)。

Broswer Tool

我們來看一個前端開發(fā)必備的 MCP 工具，名為 Browser Tool。首先，在 Cline 中搜索 Browser Tool，點擊進(jìn)入其 GitHub 頁面：

這個 MCP 工具可以讓 AI 直接讀取瀏覽器中的內(nèi)容。要使用它，我們需要先安裝一個 Chrome 插件：

插件下載地址：https://github.com/AgentDeskAI/browser-tools-mcp/releases/download/v1.2.0/BrowserTools-1.2.0-extension.zip

我使用的是谷歌瀏覽器，這一步的主要目的是在瀏覽器中安裝這個插件。下載完成后，進(jìn)入瀏覽器的擴(kuò)展程序管理頁面：

在頁面右上角打開“開發(fā)者模式”：

然后，將剛剛下載的插件解壓到本地，進(jìn)入解壓后的文件夾，將其中的 chrome-extension 文件夾拖拽到瀏覽器的擴(kuò)展程序頁面中：

這樣，BrowserTools MCP 插件就成功安裝了：

插件安裝完成后，我們正式安裝 Browser Tool 這個 MCP 工具。這里我們依舊使用 npx 安裝方式。我仿照之前的配置，在 Cline 中新建一個配置項，將之前的 file system 配置復(fù)制一份，并將名稱修改為 browser-tool-mcp：

接下來，我們回到 GitHub 頁面，復(fù)制以 MCP 結(jié)尾的 npx 命令：

@agentdeskai/browser-tools-mcp@latest

將此命令粘貼到 args 中：

刪除不需要的內(nèi)容，例如 "C:\\Users\\Public\\Desktop"，最終配置如下：

"browser-tool-mcp": {
  "command": "cmd",
  "args": [
    "/c",
    "npx",
    "-y",
    "@agentdeskai/browser-tools-mcp@latest"
  ]
}

此時，我們查看 Cline 的 MCP Server 選項卡，發(fā)現(xiàn) browser-tool-mcp 已經(jīng)變成綠色，說明安裝成功：

但到這里還沒有完全結(jié)束，我們還需要執(zhí)行另一個命令：

npx @agentdeskai/browser-tools-server@latest

在命令行中執(zhí)行以 server 結(jié)尾的命令（我是在 Powershell 中執(zhí)行的）：

接著，我們打開瀏覽器，按下 F12 打開開發(fā)者工具，此時瀏覽器會提示：“BrowserTools MCP 已經(jīng)開始調(diào)試此瀏覽器”：

我們再回顧一下，使用這個 MCP Server 需要啟動的三個部分：

1. 瀏覽器中安裝的插件：

2. 命令行中執(zhí)行的以 server 結(jié)尾的命令：

3. Cline 中配置的以 MCP 結(jié)尾的命令：

只有同時啟動這三個部分，我們才能真正實現(xiàn)瀏覽器與 AI 的完全打通。

現(xiàn)在，我讓 AI 分析一下瀏覽器的網(wǎng)絡(luò)面板：

請分析一下瀏覽器的網(wǎng)絡(luò)面板，并告訴我有哪些請求？中文回答我。

AI 給出的分析非常詳細(xì)，大家可以看截圖，我這里就不再贅述。

接下來，我返回瀏覽器網(wǎng)頁，打開調(diào)試工具的 Element 選項卡，鼠標(biāo)選中一個元素：

然后我再讓 AI 來解釋一下瀏覽器中我選中的部分：

瀏覽器我選中部分是什么，里面有何主要控件，請用中文回答我。

AI 同樣給出了清晰詳細(xì)的解釋，大家可以參考截圖。

通過以上操作，我們成功實現(xiàn)了前端開發(fā)與 AI 之間的高效溝通。相比于過去我們手動從瀏覽器 Element 選項卡中復(fù)制 HTML 代碼再與 AI 進(jìn)行問答的方式，效率得到了極大的提升。

因此，使用 Browser Tool 這個 MCP Server 工具，可以顯著提高我們前端開發(fā)的效率。

MCP 工具大全

Smithery.ai 是一個 MCP 工具的聚合網(wǎng)站，目前已收錄超過 4,219 種 MCP Server：

我們可以根據(jù)自己的需求，在這里找到最適合自己的 MCP 服務(wù)，比如搜索引擎相關(guān)、命令執(zhí)行相關(guān)、數(shù)據(jù)庫相關(guān)、網(wǎng)絡(luò)爬蟲相關(guān)等等。

下面我以 Smithery.ai 中的一個名為 Sequential Thinking 的 MCP Server 為例：

Sequential Thinking 能夠?qū)⑵胀ǖ?AI 大模型轉(zhuǎn)化為具備推理能力的模型。點擊 Sequential Thinking 鏈接進(jìn)入其詳細(xì)介紹頁面，接下來我們無需關(guān)注右側(cè)的安裝方式，直接進(jìn)入其 GitHub 首頁：

按照慣例，找到包含 npx 命令的那一行，將其復(fù)制下來：

然后回到 Cline 中，在 mcpServers 中添加一個逗號后粘貼剛才復(fù)制的內(nèi)容。如果你使用的是 MacOS，直接粘貼即可；如果你使用的是 Windows，則需要稍作修改：將 npx 移動到 args 中，command 改為 cmd，并在 args 中添加 /c：

"sequential-thinking": {
  "command": "cmd",
  "args": [
    "/c",
    "npx",
    "-y",
    "@modelcontextprotocol/server-sequential-thinking"
  ]
}

這樣就完成了安裝。此時在 Cline 的 MCP Server 選項卡中，sequential-thinking 會變成綠色，表示安裝成功：

熟練之后，安裝一個 MCP 工具只需幾秒鐘。同樣，我們也可以將上述配置文件復(fù)制到 Cursor 中，Cursor 也能使用該 MCP Server。

在 Cursor 的 MCP Server 配置中，最后一個 MCP Server 后面添加一個逗號，將配置內(nèi)容粘貼進(jìn)去，保存后點擊 Refresh 刷新一下，sequential-thinking 同樣會變成綠色：

好了，我突然意識到本文篇幅已經(jīng)很長了，后續(xù)我會繼續(xù)介紹更多 MCP 工具以及組合使用的方法，感興趣的朋友可以關(guān)注我的公眾號，后續(xù)會持續(xù)更新。

最后，我分享一些 MCP 聚合網(wǎng)站給大家：

值得注意的獨立 MCP 服務(wù)器

MCP 雖然功能強(qiáng)大，并且擁有廣泛的應(yīng)用前景，但在實際使用過程中，務(wù)必注意安全問題。在允許模型操作本地文件之前，建議提前對 HOST 可訪問的目錄和文件范圍進(jìn)行嚴(yán)格限制，以防止敏感信息泄露，避免產(chǎn)生開盒、信息泄密等安全風(fēng)險。

另外，模型必須支持 Function Calling（允許模型調(diào)用外部工具以增強(qiáng)自身能力） 才能正常使用 MCP 功能。

常見問題解答（FAQ）

Q：MCP 是否只能在 Claude 模型上使用？

A：不是。 只要模型支持 Function Calling 功能，就可以使用 MCP。

Q：Perplexity 的 API 是否支持 MCP？

A：支持。 Perplexity 的 API 本身即支持 Function Calling，因此也支持 MCP。

轉(zhuǎn)自https://www.cnblogs.com/BNTang/p/18815937