🤡

Claude Code にブラウザを見させる Playwright MCP

に公開

Claude Code の導入は済んでいる前提で書きます。
うちの環境は WSL (Ubuntu 24.04) です。

MCP サーバーの導入

bash
claude mcp add-json playwright '{"name":"playwright","command":"npx","args":["@playwright/mcp@latest"]}'

確認

bash
claude mcp get playwright
output
playwright:
  Scope: Local (private to you in this project)

To remove this server, run: claude mcp remove "playwright" -s local

Playwright が操作する Chrome をインストール

bash
npx playwright install chrome

Claude を起動して使えるかどうか確認

bash
claude
claude
Playwright MCP でグーグルを開いて

終わり

参考

Claude Code に MCP を追加する
https://docs.anthropic.com/ja/docs/claude-code/tutorials#model-context-protocol-mcp-を設定する

Playwright MCP
https://github.com/microsoft/playwright-mcp

Playwright が使うブラウザーのインストール
https://playwright.dev/docs/browsers

Discussion