<p data-line="1" class="code-line">Claude Codeにブラウザを操作させたくて、agent-browserを試してみました。調べてみたので備忘録です。</p>
<h2 id="playwright-mcp%E3%81%A7%E3%81%AF%E3%83%80%E3%83%A1%E3%81%AA%E3%81%AE%E3%81%8B" data-line="3" class="code-line"><a class="header-anchor-link" href="#playwright-mcp%E3%81%A7%E3%81%AF%E3%83%80%E3%83%A1%E3%81%AA%E3%81%AE%E3%81%8B" aria-hidden="true"></a> Playwright MCPではダメなのか</h2>
<p data-line="5" class="code-line">Claude Codeでブラウザを操作するなら、Playwright MCPを使うのが一般的です。ただ、いくつか困ることがあります。</p>
<p data-line="7" class="code-line">Playwright MCPはページ全体のDOM情報をClaude Codeに渡すので、コンテキストをかなり消費します。また、CSSセレクタで要素を指定するとき、Claude Codeが「このセレクタで合ってるかな」と迷うことがあります。</p>
<h2 id="agent-browser%E3%81%AE%E8%89%AF%E3%81%84%E3%81%A8%E3%81%93%E3%82%8D" data-line="9" class="code-line"><a class="header-anchor-link" href="#agent-browser%E3%81%AE%E8%89%AF%E3%81%84%E3%81%A8%E3%81%93%E3%82%8D" aria-hidden="true"></a> agent-browserの良いところ</h2>
<p data-line="11" class="code-line">agent-browserは、こうした問題を解決するために作られたCLIツールです。公式によると、Playwright MCPと比べて93%もコンテキストを削減できるそうです<sup class="footnote-ref"><a href="#fn-6aa2-1" id="fnref-6aa2-1">[1]</a></sup>。</p>
<p data-line="13" class="code-line">特徴的なのは <strong>refs</strong> という仕組みです。<code>snapshot</code> コマンドを実行すると、ページ上の要素に <code>@e1</code>、<code>@e2</code> のような一意のIDが振られます。Claude Codeはこのrefsを使って要素を操作するので、セレクタで迷うことがなくなります。</p>
<p data-line="15" class="code-line">もう一つ良いのは、CLIが自己文書化されていることです。<code>--help</code> を実行すれば全コマンドの使い方がわかるので、Claude Codeが自分で学習できます。</p>
<h2 id="%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB" data-line="17" class="code-line"><a class="header-anchor-link" href="#%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB" aria-hidden="true"></a> インストール</h2>
<p data-line="19" class="code-line">npmでグローバルインストールします。</p>
<div class="code-block-container"><pre class="language-shell"><code class="language-shell code-line" data-line="21"><span class="token function">npm</span> <span class="token function">install</span> <span class="token parameter variable">-g</span> agent-browser
</code></pre></div><p data-line="25" class="code-line">次にChromiumをダウンロードします。</p>
<div class="code-block-container"><pre class="language-shell"><code class="language-shell code-line" data-line="27">agent-browser <span class="token function">install</span>
</code></pre></div><p data-line="31" class="code-line">Linuxの場合は依存関係も一緒にインストールします。</p>
<div class="code-block-container"><pre class="language-shell"><code class="language-shell code-line" data-line="33">agent-browser <span class="token function">install</span> --with-deps
</code></pre></div><h2 id="claude-code%E3%81%AB%E4%BD%BF%E3%82%8F%E3%81%9B%E3%82%8B%E6%96%B9%E6%B3%95" data-line="37" class="code-line"><a class="header-anchor-link" href="#claude-code%E3%81%AB%E4%BD%BF%E3%82%8F%E3%81%9B%E3%82%8B%E6%96%B9%E6%B3%95" aria-hidden="true"></a> Claude Codeに使わせる方法</h2>
<p data-line="39" class="code-line">Claude Codeにagent-browserを使わせる方法は2つあります。</p>
<h3 id="claude.md%E3%81%AB%E8%BF%BD%E8%A8%98%E3%81%99%E3%82%8B" data-line="41" class="code-line"><a class="header-anchor-link" href="#claude.md%E3%81%AB%E8%BF%BD%E8%A8%98%E3%81%99%E3%82%8B" aria-hidden="true"></a> CLAUDE.mdに追記する</h3>
<p data-line="43" class="code-line">プロジェクトの <code>CLAUDE.md</code> にワークフローを書いておくと、Claude Codeがブラウザ操作を頼まれたときに一貫した動きをするようになります。</p>
<div class="code-block-container"><div class="code-block-filename-container"><span class="code-block-filename">CLAUDE.md</span></div><pre class="language-md"><code class="language-md code-line" data-line="45"><span class="token title important"><span class="token punctuation">##</span> ブラウザ自動化</span>

Webの操作には agent-browser を使用する。詳細は agent-browser --help を参照。

基本ワークフロー：
<span class="token list punctuation">1.</span> agent-browser open <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>url</span><span class="token punctuation">&gt;</span></span> - ページを開く
<span class="token list punctuation">2.</span> agent-browser snapshot -i - インタラクティブ要素をrefsつきで取得
<span class="token list punctuation">3.</span> agent-browser click @e1 / fill @e2 "text" - refsで操作
<span class="token list punctuation">4.</span> ページ遷移後は再度snapshotを取る
</code></pre></div><h3 id="%E3%82%B9%E3%82%AD%E3%83%AB%E3%82%92%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB%E3%81%99%E3%82%8B" data-line="57" class="code-line"><a class="header-anchor-link" href="#%E3%82%B9%E3%82%AD%E3%83%AB%E3%82%92%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB%E3%81%99%E3%82%8B" aria-hidden="true"></a> スキルをインストールする</h3>
<p data-line="59" class="code-line">公式のスキルをインストールする方法もあります<sup class="footnote-ref"><a href="#fn-6aa2-2" id="fnref-6aa2-2">[2]</a></sup>。スキルには全コマンドの説明と使用例が入っていて、Claude Codeがより正確にブラウザ操作できるようになります。</p>
<p data-line="61" class="code-line">まずディレクトリを作成します。</p>
<div class="code-block-container"><pre class="language-shell"><code class="language-shell code-line" data-line="63"><span class="token function">mkdir</span> <span class="token parameter variable">-p</span> .claude/skills/agent-browser
</code></pre></div><p data-line="67" class="code-line">次にスキルファイルをダウンロードします。</p>
<div class="code-block-container"><pre class="language-shell"><code class="language-shell code-line" data-line="69"><span class="token function">curl</span> <span class="token parameter variable">-o</span> .claude/skills/agent-browser/SKILL.md https://raw.githubusercontent.com/vercel-labs/agent-browser/main/skills/agent-browser/SKILL.md
</code></pre></div><h2 id="%E3%81%A9%E3%81%86%E5%8B%95%E3%81%8F%E3%81%AE%E3%81%8B" data-line="73" class="code-line"><a class="header-anchor-link" href="#%E3%81%A9%E3%81%86%E5%8B%95%E3%81%8F%E3%81%AE%E3%81%8B" aria-hidden="true"></a> どう動くのか</h2>
<p data-line="75" class="code-line">agent-browserの核心は <strong>snapshot</strong> と <strong>refs</strong> の仕組みです。<code>snapshot -i</code> を実行すると、ページ上のインタラクティブな要素がrefsつきで返ってきます。以下は実行例です。</p>
<div class="code-block-container"><pre><code class="code-line" data-line="77">- link "Googleについて" [ref=e1]
- combobox "検索" [ref=e7]
- button "Google 検索" [ref=e10]
</code></pre></div><p data-line="83" class="code-line">Claude Codeはこのrefsを使って要素を操作します。検索ボックスに入力するならこうです。</p>
<div class="code-block-container"><pre class="language-shell"><code class="language-shell code-line" data-line="85">agent-browser fill @e7 <span class="token string">"検索キーワード"</span>
</code></pre></div><p data-line="89" class="code-line">検索ボタンをクリックするならこうです。</p>
<div class="code-block-container"><pre class="language-shell"><code class="language-shell code-line" data-line="91">agent-browser click @e10
</code></pre></div><p data-line="95" class="code-line">CSSセレクタと違って、refsはスナップショットを取った時点で確定します。だからClaude Codeが「この要素で合ってるかな」と迷うことがありません。</p>
<h2 id="%E6%B0%97%E3%82%92%E3%81%A4%E3%81%91%E3%82%8B%E3%81%93%E3%81%A8" data-line="97" class="code-line"><a class="header-anchor-link" href="#%E6%B0%97%E3%82%92%E3%81%A4%E3%81%91%E3%82%8B%E3%81%93%E3%81%A8" aria-hidden="true"></a> 気をつけること</h2>
<p data-line="99" class="code-line">いくつか注意点があります。</p>
<p data-line="101" class="code-line">GoogleやDuckDuckGoなどの検索エンジンはCAPTCHAでボット検出されるため、agent-browserでは検索できません。Web検索が必要な場合はClaude CodeのWebSearchツールを使いましょう。</p>
<p data-line="103" class="code-line">Chromiumのダウンロードが必要で、約160MBの容量を使います。また、Playwrightのバージョンによっては互換性のあるChromiumを別途インストールしないといけないことがあります。</p>
<p data-line="105" class="code-line">デフォルトはヘッドレスモードで動きますが、<code>--headed</code> オプションをつけるとブラウザウィンドウを表示できます。デバッグするときに便利です。</p>
<p data-line="107" class="code-line">
    <iframe 
      class="hatenablogcard" 
      style="width:100%;height:155px;max-width:680px;" 
      src="https://hatenablog-parts.com/embed?url=https://github.com/vercel-labs/agent-browser" 
      width="300" 
      height="150" 
      frameborder="0" 
      scrolling="no">
    </iframe>       
    </p>
<section class="footnotes">
<span class="footnotes-title">脚注</span>
<ol class="footnotes-list">
<li id="fn-6aa2-1" class="footnote-item"><p data-line="109" class="code-line"><a href="https://github.com/vercel-labs/agent-browser" target="_blank" rel="nofollow noopener noreferrer">vercel-labs/agent-browser - GitHub</a> <a href="#fnref-6aa2-1" class="footnote-backref">↩︎</a></p>
</li>
<li id="fn-6aa2-2" class="footnote-item"><p data-line="110" class="code-line"><a href="https://github.com/vercel-labs/agent-browser/tree/main/skills/agent-browser" target="_blank" rel="nofollow noopener noreferrer">agent-browser/skills/agent-browser at main - GitHub</a> <a href="#fnref-6aa2-2" class="footnote-backref">↩︎</a></p>
</li>
</ol>
</section>


Claude Codeでagent-browserを使ってブラウザ操作する