💨

vercelさんのdev3000を試してみた。

kiyos

2025/09/11に公開

 はじめにこんにちは！J-CATでWabunkaを開発している二本柳です！
Vercel Labsからリリースされているdev3000について、リアクション記事が全然なかったので、「とりあえず動かしてみるか」くらいのテンションで試してみました。

この記事では、そのときのメモと軽い感想をシェアします。

 dev3000 とは？githubのreadmeをchatgptに要約させると、
「開発環境をまるっと記録してくれるツール」

操作ログも、ブラウザのコンソールも、ネットワーク通信も、さらに画面キャプチャまで、ぜんぶ時系列で残してくれます。
「とりあえず dev3000 で立ち上げれば、デバッグに必要な情報が揃う」とのこと。
このツールの真価が発揮されるのは、AIと組み合わせたとき だと感じました。

単体でも便利ですが、「エラー調査をAIに丸投げできる」という体験は魅力的です。
これまでは「ログをコピペして渡す → どのタイミングのエラーか説明する」といった手間がありましたが、dev3000 を使えばそのまま AI に「最新のエラー見て」と投げるだけ。
コピペも説明も不要になるので、これだけでも十分価値があると感じました。

 インストール＆起動してみた前提
Node.js version >=20.9.0.

インストールはとてもシンプルです。
npm i -g dev3000
# or
pnpm i -g dev3000
次に Claude 用に MCP サーバーを追加します。

※ MCP（Model Context Protocol）は、AI とローカルツールをつなぐ仕組みです。

（ローカルサーバーなので外部に情報流出する心配はなさそうです）
claude mcp add --transport http --scope user dev3000 \
  http://localhost:3684/api/mcp/mcp
このローカル MCP サーバー経由で、AI がいろいろ操作してくれる仕組みのようです。
あとはいつもの npm run dev pnpm run dev の代わりに、d3kと叩くだけ。
ブラウザが起動し、以下のログが表示されました。



dev3000起動時のログ

 使ってみた
 📸 Visual Timeline を確認http://localhost:3684/logs にアクセスすると、以下のように確認できます。
ネットワークレスポンス 
マウスとかキーボード操作 

 🤖 AIと連携してみた
 エラー調査編まずはわざとエラーを仕込んでみます。
onMounted(() => {
  refresh();
  setTimeout(() => {
    throw new Error('Demo error');
  }, 1000);
});
実際にエラーを起こしてみる。
ログにエラー内容と画面のスクショが出た。
そのあと、claudeに下記プロンプトを投げる
エラーが出ているようです。dev3000のログ見て直して。
MCPはhttp://localhost:3684/api/mcp/mcpを参照して。
結果 

claudeの回答
なぜか英語で返ってきましたが、正解してました。

 ブラウザ操作編ブラウザを操作させて、テストをやってもらおうとしました。
http://localhost:3000/xxxxx/xxxxxxページの検索条件について
検索条件を適当に入力して動作確認して。
３ケースくらい実施して。
プロンプトが雑すぎたためか、想定していない箇所をクリックし始めました。

また、スクショが理想のタイミングで取れていませんでした。
現状ではブラウザ操作は、うまくコントロールするのは難しそうでした。

ただし「人間が手間に感じる操作をAIに肩代わりさせる」ポテンシャルは十分感じます。
もし 「こういうプロンプトなら安定したよ」「この場面で役立った」 といった知見があれば、ぜひコメントで教えていただけると嬉しいです 🙌

 総まとめエラー調査には現時点でかなり使えます！
プロンプトでテストさせるには、複雑な画面だとまだ不安定。
ただしベータ版ということもあり、今後のアップデートに大いに期待できます。
👉 もし「こんな場面で便利だった」「この組み合わせが良かった」などあれば、ぜひ教えてください！
公式サイト