※ 主に、Windowsでwslを使用しており、wslからclaude-codeを呼んでいる方向けの内容になっています。
browsermcpとは
ざっくりと、agentがブラウザー操作を行うことができるようになるMCPです。
これにより、agentがブラウザーにアクセスし、agent用のマウスカーソルを使い画面を操作・コンソールのエラーを見たり、Imageを取得して画面情報を読み取ったりできるようになります。
同じようなMCPにplaywrightがありますが、こちらはブラウザー操作を重視している(開発中のUIチェックならこちらで十分では)？。また、playwrightはwslで使用するための環境を整える必要あり、、のため、必要十分でチェックを行えるこちらがなかなか投入コストに対して体験の向上が良いです。
それでは、早速導入方法を見ていきましょう。
mcpbrowserの導入
以下の3ステップで導入が完了します。
ブラウザに拡張機能を導入
公式サイトから、chrome拡張機能を導入しましょう。
https://browsermcp.io/
このようなロボットのアイコンが追加されますので、ロボットのアイコンクリック
→接続、でagentが閲覧するブラウザーを設定します。
mcp設定ファイルに記載する
プロジェクトルートにclaude.jsonファイルを作成し、以下の内容を記載
{
"mcpServers": {
"browsermcp": {
"command": "npx",
"args": ["@browsermcp/mcp@latest"]
}
}
}
claude-codeにコマンドを登録
claude CLiが実行できるterminalで、以下のコマンドを入力
claude mcp add browsermcp npx @browsermcp/mcp@latest
これでbrowsermcpコマンドを使えるようになります。
MCPが現在使える常態か確認しよう
MCPの設定が一通りできたら、claudeでclaude-codeを立ち上げ、
/mcp
のコマンドで設定できているか確認しましょう。
✔connected
と出ていれば使用可能な状態です。
agentに、browsermcpを使ってUIチェックをお願いします。
などと頼んでみましょう！
毎回実装後にUIチェックをしてもらいたいときは、CLAUDE.mdに
- UIに変更を加えた際は、必ずUIチェックを行ってください。
- UI チェックは、 browsermcp を使い確認をしてください。
などと書いておくと良いと思います。
では、良いVibe coding / Agentic codeingライフを～！
お知らせ
6月19日にconpassで行う、AIコーディング道場で発表を行います！
現在開発中の、小説をAIと共に作るためのツールについて、
2ヶ月でどこまでできたか？を発表しますので、
奮ってご参加を！お願いいたします！