Chrome DevTools MCPでAIクリエイティブコーディングバトル！

2025/10/18 10:572025/11/1 15:40

プロトアウト本科でカリキュラムの設計や授業担任を実施しているわたなべと申します🙇‍♂️

最近、*Chrome Devtoolsの「*MCP（Model Context Protocol）」が盛り上がりを見せています。私自身非常に気になっていた技術で、実際に触ってみたいと思い本記事を執筆するに至りました！

今回は、そのChrome Devtools MCPの特徴や利用方法を簡単に紹介しつつ、実際に使ってみてAIたちによる*クリエイティブコーディングバトルを開催してみようと思います！

Codex CLI / Claude Code / Gemini CLI によるガチバトルです！

まさにAIの眼｜Chrome Devtools MCPとは？

ざっくり言うと、新しい仕組みです。

つまり、AIがDevToolsを通して、

「このページのHTMLを解析して」「canvasに絵を描いて」「もう一度リロードして比べてみて」

といったことを自律的に行えるようになるわけです。いわば、。

これまでも、ブラウザを自動操作するMCPとして*Playwright MCPが存在しましたが、こちらのMCPはdevtoolsにアクセスできる、すなわちwebのパフォーマンスや回線状況に応じた挙動なども確認することが可能となります。

Chrome Devtoolsの導入方法

まずはChrome Devtoolsの公式*GitHubからセットアップします。

🔗 Chrome DevTools Protocol GitHub

それぞれのAIエージェントに応じた導入方法が記載されています。

Chrome Devtools MCPを試してみる

まずは「バトル」に入る前に、MCPそのものの挙動を確認してみました。

今回はボタンを押すとカウントアップするシンプルなWebアプリケーションを用意し、その中でAIエージェント（Codex CLI）を起動。エージェントに対して、以下のような一連の操作を自動で実行させました。

コマンドを実行し、アプリを*Vercelにデプロイ

デプロイ後に発行されたURLを取得

Chrome Devtools MCP経由でそのURLへアクセス

ページ上の「カウントアップボタン」を、カウントが10になるまでクリックし続ける

つまり、AIに「デプロイからUI操作までを丸ごと任せる」形です。人間がブラウザを開くことなく、エージェントがコマンドラインとブラウザを往復しながら、実際にWebを操作して動作を完了させる様子が確認できました。

実際に操作する様子｜少々長いので、2倍速などでご覧ください

動作中はChrome DevtoolsのMCPパネルに、AIからのログ出力がリアルタイムで流れます。

クリックの進行や要素の検出ログなども可視化されており、「AIがちゃんとWebを“見て” “触って”いる」感覚が掴めます。

クリエイティブコーディングバトル開催！

それでは実際にAIにクリエイティブコーディングを実施してもらいましょう！

お題はこのロゴ👇

ルール：

お題画像をもとに*p5.jsでビジュアルを生成

p5.jsのベースとなるJavaScriptファイルとHTMLファイル、そして*Netlifyへのデプロイ環境を事前に用意

AIエージェントに「この画像に近づけるように描いて、満足するまで改善を繰り返して」と指示

参戦AIエージェント：

🧠 Codex CLI : 開発元 OpenAI

💬 Claude Code : 開発元 Anthropic

🔮 Gemini CLI : 開発元 Google

詳細なプロンプトは以下の通り

実際の戦いの様子

3者3様の戦略で実装を進めていました！

Codex CLI

とにかくゆっくり丁寧

一つ一つの確認作業をじっくりと進める感じ

あまりにも丁寧すぎて、5時間のトークン限界を5分程度で使い果たしてフィニッシュ

Claude Code

早い！！とにかく早い！！

爆速で実装を終了し、MCPでの確認も1回実施して終了

もう一度確認して改善できますか？と聞いてみても大丈夫です！！と自信満々

Gemini CLI

バランスが一番良い感じでした！

Claudeほど早くもないけど、Codexのようにカチカチでもない

何度か自律的に繰り返してストップ。その出来栄えには自信満々

Gemini CLIのメッセージ。フォント、顔、ポジション、色、全て正確で満足したとのこと

結果発表

参考までに、Codex CLIに一発だしで作らせたのが次の画像

フォントや目の形は良い感じに見えますが、口の向きがへの字です😅

流石にここからは改善して欲しいところ

投票ページを作ってみた

こちらに投票ページ込みで結果を確認できるものを用意してみました！

AIお絵描き選手権

改悪してないか・・・

画像生成はみなさんお上手なはずなのですが、コードとの結びつきは目を与えたとしても微妙なようですね・・・

トークン消費の壁

今回の最大の課題はこれ。

Codex CLIでは、なんと5時間分のrate limitを数分で使い切るレベルのトークン消費。

「描く → 比較する → 修正する」をAIが繰り返すため、会話量が膨大になりやすいんですね。

ClaudeやGeminiは比較的マイルドでしたが、いずれにせよコスト的な最適化が必要になりそうです。

まとめ：AI×Devtoolsの未来に期待！

現時点では「まだ荒削り」な部分も多いですが、

AIがDevTools経由でリアルタイムにWebを操作できるというのは、開発体験としてかなり革新的。

クリエイティブコーディングの世界においても、

「人間が描く」「AIが改善する」という共創スタイルが、今後ますます広がっていく予感があります。

🧩 参考リンク

Chrome DevTools Protocol GitHub

p5.js Official Site

Netlify Deploy Docs

用語集

用語	分野	一言で言うと
MCP	AI通信	AIが外部ツールと安全に連携するための新標準
Chrome DevTools	Web開発	ブラウザ内蔵の開発・デバッグツール
AIエージェント	AI実行	指示に基づいて自律的に行動するAI
クリエイティブコーディング	アート	コーディングで表現するアート手法
Playwright MCP	AI＋テスト	AIがブラウザ操作を自動で行える仕組み
Vercel	ホスティング	Next.js開発者御用達の高速デプロイ環境
Netlify	ホスティング	静的サイト向けの簡易デプロイサービス
p5.js	コーディング	ビジュアル表現やインタラクションを楽しむJSライブラリ

💡

他の記事もいかがでしょうか？

新着記事