Inspector
Inspector · コーディング
Inspectorは、AIコーディングエージェントでReact、Next.js、Viteのアプリを作る開発者向けのビジュアルフロントエンドエディターだ。すでに使っているエージェントに接続するため、テキストの変更を説明してエージェントがどのファイルを触るべきか推測するのを待つのではなく、画面上の要素を指し示すだけで済む。コピーの編集、レイアウトの微調整、コンポーネントの差し替えは、いずれも視覚的なインターフェースを通じて行われ、変更はマシン上のローカルコードベースに直接書き戻される。コピーアンドペーストも、手作業でのファイル探しも不要だ。
Inspector について
Inspectorとは何か
Inspectorは、AI支援コーディングの時代に向けて作られたビジュアルフロントエンドエディターだ。React、Next.js、ViteのプロジェクトはClaude Code、Cursor、Codexといったエージェントが書くことが増え、ボトルネックの位置が変わった。難しいのはもうコンポーネントを生み出すことではない。どの要素を変更すべきか、そしてその要素がどこにあるのかをエージェントに正確に伝えることだ。Inspectorはそのループを閉じる。実行中のアプリの上に視覚的なレイヤーを載せる。見出しをクリックしたりカードをドラッグしたりしてAIでReactを編集でき、それがローカルのソースファイルへの正確な変更になる。
このツールは単純な考えを軸にしている。手を置くべきはインターフェースであり、ファイルツリーではない。テキストはその場で編集する。要素は動かす。そして見ているページを離れずに、その変更に対してエージェントを再実行する。ローカルのコードベースに直接働きかけるので、あなたが公開を決める前に何かがリモートサーバーへ届くことはない。
主な制約は早めに述べておく価値がある。Inspectorが対象とするのはReact、Next.js、Viteのプロジェクトだけだ。VueやSvelteのチームが恩恵を受けることはほとんどない。また、独自のサブスクリプションを持つコーディングエージェントをすでに使っていることを前提としている。Inspectorはそのエージェントに接続するもので、置き換えるものではない。まだエージェントがないなら、まずそれを用意しよう。
はじめかた
- Inspectorをインストールし、プロジェクトを開いてフレームワークと開発サーバーを検出させる。
- すでに使っているコーディングエージェント（Claude Code、Cursor、Codexのいずれか）を接続する。
- 開発サーバーを起動し、Inspectorのビューでアプリを開く。
- 任意の要素をクリックしてテキストを編集するか、ドラッグして位置とレイアウトを変える。
- Inspectorが生成した差分を確認し、エージェントにコードベースへの変更を確定させる。
AIツール情報
Inspectorの料金、対応プラットフォーム、性能を簡単に確認できます。
こんな人におすすめ
このツールが最も力を発揮するユーザー、タスク、シーン。
ユーザー
- ReactやNext.jsチームのフロントエンド開発者：AIエージェントがコードの大半を書き、どこが問題かをより速く指摘する方法が要るとき、Inspectorは合う。
- すでにClaude Code、Cursor、Codexに課金している開発者：Inspectorは同じサブスクリプションに相乗りするので、二重の請求を正当化する必要がない。
- インターフェースを素早く出す個人開発者：ビジュアル編集のループは、小さなテキストやレイアウトの調整でプロンプトを書き、差分を読み、やり直すサイクルをなくす。
タスク
- ページ全体のUIコピーを書き直す：各文字列をクリックして新しい版を入力し、grepで探す代わりにエージェントにソースを修正させる。
- レイアウトと間隔を微調整する：カードを動かし、コンテナを調整し、要素を視覚的に並べ替えて、その変更をエージェントに渡す。
- コンポーネントの構造を反復する：ある要素を別のものに差し替え、リポジトリに入る前に生じた差分を確認する。
シーン
- デモ前夜にランディングページを仕上げる：十数個のファイルを掘り返さずに、コピーとレイアウトを素早く直す。
- 実プロジェクトでエージェントの出力を確認する：レンダリング結果を見て、エージェントが間違えた視覚的な細部を直す。
- エージェントが組み上げたコードベースに参加する：すべてのファイルを読む代わりに、対話して構造を理解する。
主な機能
テキストと要素のビジュアル編集
Inspectorはページ上の要素を選び、その場で変更できる。見出しを編集する。ボタンのラベルを直す。カードを別の場所へ動かす。ツールは各操作をソースへ対応づける。狙いは、かつてエージェントとのプロンプトと待機の往復を丸ごと必要とした細かい作業の速度だ。
エージェントに依存しない接続
Inspectorは1社に縛りつけるのではなく、Claude Code、Cursor、Codexで動く。すでに課金しているエージェントに接続する。だから既存のサブスクリプションとワークフローを維持できる。Claude Codeのフロントエンドツールとして、Cursorのビジュアルエディターとして、あるいはCodexの相棒として、使うものに合わせる。同じリポジトリで開発者ごとに違うエージェントを使うチームでは、この柔軟さが効いてくる。
ローカルコードベースへの直接編集
変更はすべてローカルのファイルに届く。編集者のホスト型サンドボックスではない。プロジェクトの構造、依存関係、バージョン履歴は手つかずのまま残る。動かない。視覚的なレイヤーは本物のアプリの上に載り、それを機能限定のオンライン複製に差し替えることは決してない。
React、Next.js、Viteのサポート
このツールは現代的なReactスタックに合わせて調整されている。コンポーネントベースのインターフェースを扱い、フレームワークの慣習を認識し、それらのビルドツールが典型的なプロジェクトで生成する構造に従う。アプリがこれらのフレームワークのいずれかで動いていれば、Inspectorは最初から目の前のものを理解する。
確定前の差分レビュー
Inspectorはこれから変えようとしている内容を示すので、承認も却下もできる。エージェントが生み出したソースの変更が見える。そしてそれが意図に合うかを判断する。このレビューの工程が、速いビジュアルワークフローによって、頼んでいない変更が静かに紛れ込むのを防ぐ。
内蔵の開発サーバープレビュー
ツールの中で実行中の開発サーバーに対して作業するので、編集している内容はブラウザが目の前に描画するものとまったく同じだ。古いスクリーンショットもなく、変更がどう見えるかを推測することもない。反復する間、プレビューとコードは同期し続ける。
メリットとデメリット
メリット
- 本来ならエージェントへの完全なプロンプトが必要だった小さなコピーやレイアウトの編集を速くする。
- 新たなサブスクリプションを強いるのではなく、すでに使っているエージェントで動く。
- 実際のローカルプロジェクトを編集するので、ツール群とgit履歴がそのまま残る。
- 視覚的なレイヤーにより、エージェントが間違えた箇所を見つけて直しやすい。
- React、Next.js、Viteに的を絞るので、そのスタックの慣習を理解する。
デメリット
- React、Next.js、Viteしか対応しないので、Vue、Svelte、Angularのチームは何も得られない。
- コーディングエージェントに接続するが同梱はしないので、まずClaude Code、Cursor、Codexを動かしておく必要がある。
- プラットフォーム対応はmacOSに限られ、現時点ではWindowsとLinuxの開発者は外れる。
- ゼロから設計はできない。エージェントがすでに生成したインターフェースを編集するものだ。
よくある質問
AIコーディングエージェントに接続するビジュアルフロントエンドエディターだ。実行中のアプリで要素を指し、好きなようにテキストや位置を変えると、InspectorがそれをローカルのReact、Next.js、Viteコードへの編集に変える。プロンプトで説明する工程を直接クリックに置き換える。
関連コンテンツ
Inspectorに関連するツール、スキル、記事を探す。
Inspectorの代替ツール
Base Code
Base44 (Wix) · コーディング · 生産性向上Base CodeはBase44の共有クラウド開発環境だ。既存のGitHubリポジトリに対する変更をチャットで伝え、プレビューで確認し、プルリクエストとして返せる。
Google EmbeddingGemma 2
Google DeepMind · ライティング · 画像 · コーディングGoogle EmbeddingGemma 2 は 7 億 4000 万パラメータのオープンなモデルで、テキスト、コード、画像、音声、動画フレームを同じ 768 次元空間のベクトルに変え、スマートフォンやノート PC 上で動く。
GitGlow
GitGlow · コーディング · 生産性向上GitGlow は自分のコードと AI エージェントの変更を一つのレビューにまとめるデスクトップ Git クライアントだ。出荷前に、マシンから何が出ていくのかを確かめられる。