前言

還記得前面章節曾經有講過一件事情是套件版本是 AI 最容易記憶過時的東西，所以安裝完畢之後都還要自己稍微看一下 package.json 的套件版本這件事嗎？

我們都知道 AI 是基於大量的訓練資料而來的，因此很容易有過時的設定、套件版本甚至是寫法。

所以這一篇我們就是要來介紹一個東西，也就是 MCP（Model Context Protocol）了。

MCP 是什麼？

所以 MCP 到底是什麼呢？如果你是比較早期就一直在用 AI 的人，應該早就接觸過這個全名叫 Model Context Protocol 的東西了，如果你是比較後期才接觸 AI 的人，可能反而比較熟悉 SKILL 吧？

不過這兩個並不是新舊版的關係，有些人會認為 SKILL 是為了取代 MCP 而出現的，但實際上來講 SKILL 再怎麼流行也取代不了 MCP，畢竟實際上有很多服務都是依賴 MCP 來跟 AI 溝通，其中，今天要示範的 Context7 就是其中一個。

MCP 這個東西是 Anthropic（Claude 的開發公司）所提出的開源標準協定，不好理解對吧？

講簡單一點，你可以把它想像成電腦的 USB 轉接頭（但我個人更喜歡用 Hub 當作舉例），它可以讓 AI 用同一種方式與外部服務去做溝通。

什麼意思呢？其實 AI 天生是有一些限制的，例如...

• 它天生會的事情不多：
  • 讀檔
  • 改檔
  • 跑指令
  • 上網搜尋，主要的活動範圍大多都是你的專案資料夾。
• 訓練資料有截止日，之後出的東西會不知道，像是套件的新版本、新用法或是改版後的官方文件。
• 你公司內部系統裡有什麼資料，它更不可能知道。

而 MCP 就是為了解決這些限制而生的，只要大家都遵守這個開源標準協定，AI 就可以用同一種方式去跟各種不同的工具溝通，這也是為什麼你會看到底下這張圖。

MCP 就像是一個電腦外接的 Hub 一樣，插什麼上去就多什麼能力。

那看到這邊可能腦袋會稍微有一點混亂了，畢竟前面學了 SKILL、Subagent，這邊又多了一個 MCP，是不是有點眼花撩亂呢？

所以我也想趁機會重新幫你整理一下 SKILL、Subagent、MCP 這三個東西的差別，這邊你可以這樣理解：

• SKILL： 教 AI 怎麼做事/流程，像是教它 commit 訊息怎麼寫、教它特定知識怎麼用，這些都是比較偏向「知識與方法」的東西。
• Subagent： 請一個獨立乾淨的 AI 小分身幫你做事，像是 code-reviewer 這個小分身把自己關在自己的小房間內把專案審核完畢，審核完之後只把結果丟回來。
• MCP： 讓你的 AI 可以跟外部服務溝通，像是今天要接的 Context7 就是讓它自己去查最新版的官方文件，其他像瀏覽器、資料庫也都有現成的 MCP，讓它可以碰得到專案資料夾、自身訓練資料之外的東西。

前面一直提到 Context7，所以這個東西到底是什麼呢其實很單純，就是把套件的官方文件整理好，讓 AI 可以查到最新的官方文件，而不是憑訓練時的記憶。

看到這邊你可能會想說，Claude Code 不是自己就能上網搜尋嗎？

對，可以，但是一般的網頁搜尋抓回來的東西版本不一定對，也常常混到過時的教學文，Context7 是專門整理各套件的官方文件，會對版本、附出處，這就是差別。

而它與 AI 之間的關係就像這樣：

接下來就讓我們實際體驗一下吧。

接上 Context7 MCP

其實 MCP 的安裝方式大多都是相對簡單的，通常都是很單純的一行指令而已。

以 Context7 為例，就有提供安裝指令，你可以打開終端機之後輸入以下指令：

npx ctx7 setup

Note
如果你沒有安裝 Node 的話，是會無法使用這個指令的，請務必先安裝 Node.js 唷。

在終端機輸入如下方選擇你使用的 AI 即可（這邊示範的是 Claude Code）：

Note
儘管 Context7 也已經有提供 CLI + SKILL 的方式，但這邊還是以 MCP Server 作為示範唷～

接著你應該會得到一串網址：

這個網址其實是 Context7 的授權網址，你複製貼到瀏覽器上會看到要求你登入並授權。

基本上授權成功後，你就會看到你的終端機顯示如下畫面，那就代表著你已經安裝 context7 MCP 成功囉！

安裝完畢之後，我們就來看一下 MCP 的狀態，請在 Claude Code 裡面輸入 /mcp，你會看到 context7 已經連線成功了。

接下來我們要來嘗試讓 Context7 被呼叫，請你打開我們前面所練習的專案（money-note），接著進入 Claude Code，進入完畢後，我們來試著問一個跟套件版本有關的問題，請你輸入以下：

請你幫我確認一下當前專案的 Tailwind 版本，並且幫我查一下官方文件，告訴我第 4 版跟第 3 版在設定方式上最大的差別是什麼？
另外幫我看一下 src/style.css 目前的寫法是不是第 4 版的正確寫法？
回答時附上文件出處。

接著你應該會看到 AI 跑去呼叫 Context7 MCP：

這邊順便講一下，第二張圖的 context7 - query-docs (MCP) 就是 MCP 工具在 AI 裡的樣貌，前面是 server 的名字、中間是工具的名字，後面標一個 MCP 則是在提醒這是外部的工具，不是 AI 內建的。

很簡單吧？接著你應該就會看到 AI 回答了，並且附上了文件出處哩～

所以，為什麼它會自己去查？

看到這邊你可能會好奇，AI 是怎麼知道要使用 Context7 MCP 的呢？畢竟我們並沒有在問題裡面點名它呀？

其實這件事情是因為我們前面使用 npx ctx7 setup 安裝 MCP 的時候，Context7 並不是只有單純安裝 MCP server 而已，它也順便在你電腦裡面放了一個 SKILL，而這個 SKILL 就是告訴 Claude 遇到套件問題要先去查 Context7 MCP。

不信？我翻出 SKILL 中的 description 給你看：

---
name: context7-mcp
description: This skill should be used when the user asks about libraries, frameworks, API references, or needs code examples. Activates for setup questions, code generation involving libraries, or mentions of specific frameworks like React, Vue, Next.js, Prisma, Supabase, etc.
---

description 就是在講「如果使用者問到套件、框架、API 參考，或是需要程式碼範例，就啟動這個 SKILL」，而這個 SKILL 的內容就是告訴 Claude 要怎麼去查 Context7 MCP。

當然，不是只有這邊而已，還有 Rule 也有告訴 Claude 遇到套件問題要去查 Context7 MCP，Rule 也是差不多的內容「只要問到套件、框架、SDK 的用法或設定，就先用 Context7 查最新文件再回答，就算你覺得自己會也一樣」，而這些東西的放在這邊：

• Rule： ~/.claude/rules/context7.md，這個資料夾我們還沒聊過，裡面的 .md 跟 CLAUDE.md 是同一種東西，Claude Code 啟動時會一起讀進來，而且全部專案通用。
• Skill： ~/.claude/skills/context7-mcp/SKILL.md，裡面寫的是查文件的步驟，先用 resolve-library-id 找到正確的套件、再用 query-docs 抓對應的段落。

那如果它沒有使用 context7 呢？其實也很簡單，直接指名使用 context7 也可以。

Note
之所以 Context7 MCP 會順手裝一個 SKILL 跟 Rule，是因為這樣可以讓 Claude 更主動，遇到套件問題就會自己去查，而不是等你點名它才去查。

MCP 不是免費的

最後這邊也要提醒一下，使用 MCP 是有代價的。

什麼代價呢？儘管 MCP 是一個標準的轉接頭，但它背後是一個後端應用程式，像 Context7 這種遠端的 server 是跑在遠端的伺服器上，所以會需要登入授權。

當然，你也是可以把 MCP 起在自己的電腦上，這樣就不用登入授權了，但這樣就要自己維護 MCP server 的程式碼、更新以及伺服器環境等等，對普通使用者來講，我認為相對麻煩很多。

接著 MCP 對於 Context 的佔用其實也很大，以前面的範例來講，Context7 MCP 每抓一次文件，那些內容都會被一次性丟進對話裡面，這些內容就很容易大幅度佔用 Context，接著你的 AI 就很容易遺忘之前的對話內容，這也是為什麼 MCP 不是免費的，它是有代價的。

而且不只是抓回來的內容而已，光是接上就會先佔一塊桌面，還記得 Day 6 的 /context 嗎？你可以試著輸入看看

你會看到多了一行 MCP tools，這是因為接上 MCP 之後，這些工具的名字會先被放到桌面上，讓 Claude 知道自己有哪些工具可以用，至於每個工具的完整定義則是真的用到才會展開來。

所以以我自己的習慣來講會是 需要的時候才接，用不到的時候就關掉**。

如果你是想要移除整個 Context7 的話你可以輸入以下指令，它會一起把 MCP 與 SKILL 等都移除：

npx ctx7 remove --mcp --claude

如果你對於其他 MCP 有興趣的話，也可以去看看 modelcontextprotocol.io 這邊有相當多的 MCP server 可以使用（如：Figma、GitHub 等等）。

結語

寫到這邊也差不多了，相信你對於 MCP 已經有一個基本概念，這邊最後也幫你總結一下相關的知識吧。

• MCP 類似一個轉接頭，讓 AI 可以用同一種方式接上外部的工具或服務。
• 輸入 /mcp 可以看到目前已經接上了哪些 MCP server、各自帶了幾個工具。
• MCP server 接上之後，AI 會照工具的說明自己決定要不要用，Context7 還順便安裝規則跟 SKILL 讓它更主動，真的沒動你再點名它。
• 接了 MCP 就會佔桌面，所以需要時再打開，不需要就關閉或移除，減少 Context 的佔用。

我們就到這邊結束，我們下一篇見。