Claude Code 必裝 3 個 MCP：Playwright、Context7、Firecrawl 實測
實測 Claude Code 必裝 3 個 MCP：Playwright 開瀏覽器修 bug、Context7 查官方文件、Firecrawl 讀網站。附安裝指令與 4 句指令。
更新時間：2026.10.02（依 2026.10.02 本機安裝與操作錄影撰寫）
Claude Code 很會寫程式，但它有兩個先天限制：它看不到自己寫出來的網頁長什麼樣子，而且它的知識有截止日，碰到常改版的套件，很容易寫成舊用法。
MCP 外掛就是補這兩個洞的。我這次一口氣裝了 3 個，分別負責動手、查文件、讀網頁，每個都拿真實的例子跑過一次。
這篇是「問 AI 就對了」系列的一集，也是「一分鐘教你一個 AI 工具技巧」的第三集：一集只講一個工具、一個技巧，這集的工具是 Claude Code，技巧是「裝 3 個 MCP 外掛」。
⏱️ 一分鐘教你一個 AI 工具技巧｜第 3 集 · 看全系列 ›
💡 快速摘要（TL;DR｜2026.10 實測）
- 這是什麼工具：3 個裝在 Claude Code 上的 MCP 外掛。Playwright 負責動手（開瀏覽器檢查網頁）、Context7 負責查官方文件、Firecrawl 負責讀網站。
- 怎麼用：每個都是在終端機貼一行指令；這篇的 Firecrawl 裝法要先到官網申請一組 API Key。裝好後在 Claude Code 裡點名工具講一句話就會用。
- 實測結果：Playwright 在一個故意埋了 3 個錯的網頁上，28 秒內找出全部錯誤並修好；Context7 查 React useEffect 用法，11 秒回答並附官方來源；Firecrawl 13 秒列出 pinkjhs.com 的 10 個網址。
- 誰適合：已經在用 Claude Code、會開終端機的人。還沒碰過終端機的話，可以先從 前導集的新版 Claude 介紹 開始。
✍️ 真人實測宣告
本文根據作者 2026 年 10 月 2 日在自己電腦上實際安裝、操作與錄影記錄撰寫（Claude Code 2.1.287，Sonnet 5.5），秒數與畫面皆為真實紀錄。
📑 快速導覽目錄
- 1. MCP 是什麼？一句話講完
- 2. 先講結論：3 個外掛各補一個洞
- 3. 開始前：先確認這 2 件事
- 4. ① Playwright：讓 Claude 自己開瀏覽器找 bug
- 5. ② Context7：寫程式前先查官方最新文件
- 6. ③ Firecrawl：讓 Claude 直接讀網站
- 7. 裝完怎麼確認有成功
- 8. 懶人包：4 句可以直接複製的指令
- 9. 踩雷筆記：做之前先知道的 4 件事
- 10. 常見問題 FAQ
- 11. 一分鐘版：沒時間看全文？
- 12. 結語
🧩 MCP 是什麼？一句話講完
MCP 就是幫 Claude 接上「手」和「眼睛」的插座。
Claude Code 本身只會讀寫你電腦裡的檔案、跑指令。裝了 MCP 之後，它多了新工具可以用：開瀏覽器、查文件資料庫、抓網頁內容。你不用學這些工具怎麼操作，只要用一般的話告訴 Claude「用 Playwright 幫我檢查」，它會自己決定要按哪些按鈕。
🎯 先講結論：3 個外掛各補一個洞
| 工具 | 一句話 | 補的是什麼 | 我的實測 |
|---|---|---|---|
| Playwright | 一個動手 | Claude 看不到自己寫的網頁 | 28 秒找出 3 個錯加 1 個 favicon 404，全部修好 |
| Context7 | 一個查文件 | Claude 的知識有截止日 | 11 秒、呼叫 2 次，回答附 react.dev 出處 |
| Firecrawl | 一個讀網頁 | 要一頁一頁點才看得到網站內容 | 13 秒列出 pinkjhs.com 的 10 個網址 |
秒數是我用 Claude Code 2.1 版、Sonnet 5.5 模型跑的，換模型或網路狀況不同會有差，看量級就好。如果只能先裝一個，我會先裝 Playwright。
🧰 開始前：先確認這 2 件事
1. 電腦裡有 Node.js，而且是 22 版以上
三個工具都靠 npx 執行，npx 是 Node.js 附帶的。打開終端機（Windows 用 PowerShell）輸入：
node -v版本號是 22 以上就可以（Firecrawl 需要 22 以上，另外兩個 18 以上就行；我是 v24）。太舊或沒有的話，先到 Node.js 官網裝 LTS 版。
2. Claude Code 已經裝好、可以啟動
claude --version
圖說：兩行都有版本號就可以往下裝了（我錄影時是 Node v24.17.0、Claude Code 2.1.287）
⚠️ 下面所有安裝指令都要在一般的終端機輸入，不是在 Claude Code 的對話框裡。裝完之後才回到 Claude Code 使用。
🖱️ ① Playwright：讓 Claude 自己開瀏覽器找 bug
怎麼裝
在終端機貼這一行：
claude mcp add --scope user playwright -- npx @playwright/mcp@latest--scope user 的意思是「裝在我這個使用者底下」，之後不管在哪個資料夾開 Claude Code 都能用。不加的話只在當下這個資料夾有效。貼完看到「Added stdio MCP server playwright…」就是裝好了。
實測：一個故意埋了 3 個錯的網頁
為了測得準，我先請 Claude 做了一個「九州三日行李清單」小網頁放在自己電腦上，故意留 3 個錯誤：封面圖連結錯、「看打包小技巧」連結點下去是 404、「檢查是否都帶齊」按鈕按了沒反應。
然後在 Claude Code 裡只講一句：
用 Playwright 打開 http://localhost:8000，檢查有沒有錯誤，有的話直接修好http://localhost:8000 是我電腦上那個測試網頁的網址；你可以請 Claude 幫你把自己的網頁資料夾開起來，或直接換成你自己的網站網址。
圖說：修之前，左邊封面圖是破圖，右邊是 Claude 正在用 Playwright 檢查
Claude 自己開了一個瀏覽器視窗，點按鈕、點連結、看主控台錯誤，28 秒後回報找到 3 個錯誤加 1 個 favicon 404，而且全部改好了：
- 封面圖 404：原本的圖檔不存在，它補了一張佔位封面並改好路徑
- 連結 404：打包小技巧頁不存在，它新增了一頁，連結現在打得開
- 按鈕沒反應：程式裡少了一個函式，它補上後按鈕會顯示「還缺：換洗衣物 3 套、雨傘」
- favicon 404：順手加了網站小圖示的設定
最讓我驚訝的是它改完會再開一次瀏覽器確認，看到主控台沒有任何錯誤才收工。
圖說：修好之後，封面出來了、按鈕會告訴你還缺什麼，右邊是它的修理報告（左右取自同一段錄影相隔約 8 秒的兩格）
老實說明一下：測試資料夾裡有一份我留給自己看的 README，寫了「有 3 個故意的錯，錄影前不要修」，Claude 也有讀到（報告倒數第二段就是在講它）。但它多抓到一個 README 沒寫的 favicon 404，而且每一處都是開瀏覽器點過、改完重新整理確認主控台沒有錯誤，這些只有真的去跑網頁才做得到。
💡 適合誰：自己架網站、做小工具、改 Ghost 佈景主題的人。以前是「Claude 改 → 我打開看 → 截圖貼回去說哪裡壞」，現在這一圈它自己跑完。
📚 ② Context7：寫程式前先查官方最新文件
怎麼裝
Context7 官方有一鍵設定，在終端機輸入：
npx ctx7 setup中間會問你兩個問題：
- 「How should your agent access Context7?」用方向鍵選 MCP server
- 「Which agents do you want to set up?」選 Claude Code
第一次跑會跳出瀏覽器讓你登入 Context7 帳號；看到「Context7 setup complete」就是裝好了，它會一次幫你設定好 MCP、一條自動使用規則和一個 skill。
圖說：這張是我第二次跑的畫面，所以寫「reconfigured」；第一次跑字樣會略有不同，看到 setup complete 底下三個「+」就對了（路徑中的使用者名稱已打碼）
想手動裝也可以（不登入也能用，只是查詢次數比較少）：
claude mcp add --scope user --transport http context7 https://mcp.context7.com/mcp實測：查 React useEffect 的最新用法
用 context7 查 React 最新版 useEffect 的官方用法，用繁體中文，只列最重要的 3 點，每點一行Claude 先呼叫 Context7 找到 React 的官方文件，再查 useEffect 那一段，總共呼叫 2 次，11 秒後給出 3 點，開頭直接寫明出處是 react.dev 官方文件。
圖說：畫面上的「Called context7 2 times」就是它真的去查了，不是憑記憶回答
💡 小發現：用
npx ctx7 setup裝的話，它會順便在 Claude Code 裡加一條規則，之後問到程式套件的問題，Claude 會自己想到先查 Context7，不用每次提醒。
🌐 ③ Firecrawl：讓 Claude 直接讀網站
先申請 API Key
Firecrawl 要先到官網註冊、在 API Keys 頁面建立一組金鑰，格式是 fc- 開頭的一串字。免費方案每月有 1,000 點額度（2026.10 官網資訊，以官網為準），拿來測試綽綽有餘。
⚠️ API Key 跟密碼一樣，不要貼到截圖、影片或任何對話裡。我錄影時特地把貼金鑰的那段跳過。
怎麼裝
把下面的 fc-你的金鑰 換成你自己的再貼上：
claude mcp add --env FIRECRAWL_API_KEY=fc-你的金鑰 --scope user firecrawl -- npx -y firecrawl-mcp注意 --env 那一段要放在前面、firecrawl 這個名字前面一定要隔著 --scope user。如果把 --env 直接接在名字前面，Claude Code 會把 firecrawl 也當成環境變數，回你「Invalid environment variable format」。貼完看到「Added stdio MCP server firecrawl…」就是裝好了。
裝好之後 Firecrawl 給你 27 個工具（2026.10 我裝的版本），最常用的是這三個：
- search：搜尋網路，直接把結果頁的內容整理好拿回來
- scrape：把一個網頁的內容抓下來
- map：列出一個網站有哪些網址
實測：一句話列出整個網站的網址
用 Firecrawl 的 website map 工具列出 https://www.pinkjhs.com 的前 10 個網址，每個一行13 秒，10 個網址整整齊齊列出來，不用一頁一頁點開。
圖說：拿自己的網站測，盤點舊文章、找站內連結的時候很好用
我另外試了 search，請它搜尋「福岡 聖誕市集 2026」並列出前 3 筆結果。它不只列出來，還主動提醒其中一筆網頁上寫的是去年的日期。用來查資料很方便，但這也說明：網路上的資料本身會過期，結果還是要自己再看一眼。
✅ 裝完怎麼確認有成功
方法 1：在終端機輸入
claude mcp list三個都顯示 ✓ Connected 就是成功。
方法 2：在 Claude Code 對話框輸入
/mcp會看到 User MCPs 底下列出 context7（2 tools）、firecrawl（27 tools）、playwright（25 tools）。
圖說：三個前面都是綠色勾勾就代表連上了（路徑中的使用者名稱已打碼）
⚠️ 剛裝完的時候，已經開著的 Claude Code 視窗看不到新工具，要關掉重開一個新的。
📋 懶人包：4 句可以直接複製的指令
裝好之後，在 Claude Code 裡貼這幾句就能看到效果（網址換成你自己的）：
- 讓 Claude 自己找 bug 並修好 「用 Playwright 打開 http://localhost:8000，檢查有沒有錯誤，有的話直接修好。」
- 寫程式前先查官方文件 「用 context7 查 React 最新版 useEffect 的官方用法，用繁體中文，只列最重要的 3 點，每點一行。」
- 搜尋網路並整理結果 「用 Firecrawl 的 web search 工具搜尋『你想查的主題』，列出前 3 筆結果的標題和網址，每筆一行，用繁體中文。」
- 盤點一個網站有哪些頁面 「用 Firecrawl 的 website map 工具列出 https://你的網站 的前 10 個網址，每個一行。」
⚠️ 踩雷筆記：做之前先知道的 4 件事
- 打
/mcp變成「ㄥmcp」：中文輸入法會把/變成注音的「ㄥ」。輸入指令前先切到英文輸入法。 - 指令打錯一個字就失敗：我把
--scope user打成--scope use，指令直接報錯（Invalid scope: use）。指令建議整行複製貼上，不要手打。 - Firecrawl 裝好了卻一直回 401：我重裝 Firecrawl 時先遇到「already exists」（同名的已經裝過），用
claude mcp remove firecrawl --scope user移除再裝才成功。裝好後一用卻回 401，我一度以為金鑰貼錯，拿金鑰去查額度又是正常的。原因是我還在用安裝前就開著的那個 Claude Code 視窗，它一直用舊設定；開一個新視窗就好了。另外，指令裡的fc-你的金鑰一定要換成自己的。沒換也會顯示「Added」，claude mcp list一樣是 Connected，要到真的叫它做事才會失敗。 - Context7 登入頁出現錯誤畫面：
npx ctx7 setup跳出的登入網頁出現「應用程式錯誤」，但回到終端機一看，其實已經顯示設定完成。先看終端機的訊息，不要急著重來。
❓ 常見問題 FAQ
Q1：不會寫程式，可以裝這 3 個 MCP 嗎？
可以。安裝都是在終端機貼一行指令，不用寫程式；只要會打開 PowerShell 或終端機、會複製貼上就行。裝好之後也是用一般的話跟 Claude 講要做什麼。
Q2：這 3 個要付費嗎？
我這次都沒有付費。Playwright 不用帳號；Context7 不登入也能用，登入後查詢次數比較多；Firecrawl 要申請 API Key，免費方案每月 1,000 點額度（2026.10 官網資訊，以官網為準）。
Q3：裝好之後，Claude 每次都會自動用嗎？
不一定。最穩的做法是在指令裡直接點名，例如「用 Playwright 打開…」「用 Firecrawl 的 website map…」。Context7 用 npx ctx7 setup 裝的話會多一條規則，問到程式套件時 Claude 會自己想到先查。
Q4：用 Claude 桌面版、不用 Claude Code 可以嗎？
這篇只實測 Claude Code。其他支援 MCP 的工具設定方式不同，我沒有實測，就不在這裡寫。
Q5：裝錯了或不想用了，怎麼移除？
在終端機輸入 claude mcp remove 名稱 --scope user，例如 claude mcp remove firecrawl --scope user。移除後同樣要開一個新的 Claude Code 視窗才會生效。
⏱️ 一分鐘版：沒時間看全文？
這集的一分鐘 Reel 把 3 個外掛各在幹嘛壓成約一分鐘（成片 70 秒），還有 Playwright 修 bug 的前後對照，先看片再回來抄指令也可以：
[Reel embed：發佈後換成統一 iframe（pinkjhs-publish Step 4b）]
從 Reels 留言「工具」進來的話，自動回覆會帶你到 AI 工作流，每一集的 4 句指令都收在那一頁。
⏱️ 本系列（一集一工具一技巧，一篇文配一支 Reel）
- 前導集：Claude Chat 跟 Cowork 合併了！新版 Claude 4 件事實測
- 第 1 集：IG 貼文圖字體怎麼一致？用 Claude 做視覺母版實測
- 第 2 集：Reels 加動畫實測：Claude 六輪改稿，全用講的
- 第 3 集：Claude Code 必裝 3 個 MCP（本篇）
👉 看全系列
💡 結語：一個動手、一個查文件、一個讀網頁
這三個裝完，Claude Code 從「只會寫」變成「寫完會自己檢查、寫之前會先查、要資料會自己去讀」。如果只能先裝一個，我會先裝 Playwright：它省下的是最煩的那一圈「打開看、截圖、貼回去」。
遇到這類問題，問 AI 就對了。
