## Claude MCP 安裝與使用指南

# 什麼是 MCP

MCP（Model Context Protocol）是一個開放協議，讓 Claude 能夠連接外部工具和資料來源，例如瀏覽器自動化、檔案系統存取、API 整合等。

# 確認已安裝的 MCP

## Claude Code（命令列）

# 列出所有已設定的 MCP 伺服器
claude mcp list

# 查看特定伺服器的詳細資訊
claude mcp get <server-name>

# 在 Claude Code 互動模式中檢查伺服器狀態
/mcp

## Claude Desktop（桌面應用程式）

設定檔位置：

• macOS：~/Library/Application Support/Claude/claude_desktop_config.json
• Windows：%APPDATA%\Claude\claude_desktop_config.json

成功連線後，在對話輸入框的右下角會看到 MCP 伺服器指示器。

# MCP 安裝範圍

## 安裝為全域

claude mcp add -s user <server-name> <command>

# 安裝 Playwright MCP

Playwright MCP 提供瀏覽器自動化功能，適合 UI 測試、截圖、填表單、網頁爬取等任務。

## Claude Code

# 本地安裝（僅當前專案）
claude mcp add playwright npx @playwright/mcp@latest

# 全域安裝（所有專案可用）
claude mcp add -s user playwright npx @playwright/mcp@latest

這種通用的工具建議使用全域安裝。

## Claude Desktop

編輯設定檔，加入：

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": ["@playwright/mcp@latest"]
    }
  }
}

儲存後完全關閉並重啟 Claude Desktop。

## 前置需求

Chrome DevTools MCP 需要 Node.js v20.19 以上：

1. 安裝 Node.js（從 nodejs.org 下載 LTS 版本）
2. 瀏覽器會在首次使用時自動安裝

node --version

# 安裝 Chrome DevTools MCP

Chrome DevTools MCP 提供深度調試和性能分析功能。

## Claude Code

# 全域安裝
claude mcp add -s user chrome-devtools npx chrome-devtools-mcp@latest

# 或使用 headless 模式
claude mcp add -s user chrome-devtools -- npx chrome-devtools-mcp@latest --headless

## 連線失敗的解決方法

Chrome DevTools MCP 需要連接到正在運行的 Chrome 瀏覽器。

啟動帶有遠端調試的 Chrome：

Windows：

"C:\Program Files\Google\Chrome\Application\chrome.exe" --remote-debugging-port=9222

macOS：

/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222

# Playwright vs Chrome DevTools MCP 比較

## 建議

大多數情況下，Playwright MCP 就夠用了，除非你需要：

• 深度性能分析（Performance traces）
• Heap snapshots
• 詳細網路請求監控

# Claude 如何選擇使用哪個 MCP

## 可用性優先

Claude 只會使用連線成功的 MCP。如果 Chrome DevTools 連線失敗，會自動使用 Playwright。

## 任務類型

如果兩個都可用，Claude 會根據任務選擇：

## 明確指定

你也可以在提示中指定使用哪個工具：

用 Playwright 幫我打開 example.com 並截圖

# 常用指令彙整

# 列出所有 MCP
claude mcp list

# 新增 MCP（本地）
claude mcp add <name> <command>

# 新增 MCP（全域）
claude mcp add -s user <name> <command>

# 查看特定 MCP
claude mcp get <name>

# 移除 MCP
claude mcp remove <name>

# 在互動模式中檢查狀態
/mcp

# 疑難排解