Inspector

Inspectorとは？

Inspectorは、ブラウザをClaude Code、Codex、CursorなどのAIコーディングエージェントに接続するビジュアルフロントエンドエディタです。主な目的は、React、Next.js、Viteアプリのフロントエンドを視覚的に編集・反復しつつ、エージェントをワークフローに活用することです。

コードファイルのみに頼らず、Inspectorはインターフェース上で要素を直接操作可能—要素の移動、テキスト編集、コメント追加—を行いながら、ローカルコードベースに変更を紐付けます。

主な機能

• フロントエンド要素のビジュアル編集: ブラウザ上で要素を視覚的に移動し、テキストを直接編集。コードに完全に切り替えずにUI調整が可能です。
• ビジュアルエディタでのコメント駆動コラボレーション: 変更点をコメントで指定し、コーディングエージェントとの反復を容易にします。
• AIコーディングエージェント（Claude Code、Codex、Cursor）への接続: 編集セッションをエージェントアカウントにリンクし、AI駆動コーディングをワークフローに組み込みます。
• ローカルコードベースワークフロー: ローカルコードベースに接続し、既存アプリのコンテキストで編集。別ホスト環境ではなくローカルで行います。
• モダンフロントエンドフレームワーク対応（React、Next.js、Vite）: これらのスタック向けに位置づけられ、一般的なウェブ開発セットアップにエディタワークフローを適合させます。

Inspectorの使い方

1. macOSにInspectorをインストール（サイトでmacOS対応が記載）。
2. Inspectorを開き、AIエージェントアカウントを接続。Claude Code、Codex、Cursorなどのエージェントを選択。
3. ローカルコードベースを指定（サイトでは任意のローカルコードベースに接続可能と記載）。
4. ビジュアルエディタを起動し、要素移動、テキスト編集、変更ガイド用のコメント追加でフロントエンド編集を開始。

ユースケース

• 開発中の迅速UI調整: レイアウト間隔の微調整やコンポーネント再配置が必要な場合、ビジュアルエディタで要素移動・テキスト更新を行い、ローカルアプリに変更を保持。
• エージェント支援デザイン反復: ビジュアルエディタにコメントを残して変更点を指定し、接続されたAIコーディングエージェントで更新を実装。
• React/Next.jsプロジェクトのフロントエンド編集: React、Next.js、Viteで作業するチーム向け。ブラウザベースUI編集レイヤーとしてローカルコードベースから作業継続。
• フロントエンドトラブルシューティングと改良: UI要素が期待通りに動作しない場合、ビジュアルエディタで対象要素を特定し視覚調整後、開発ワークフローに同期。
• コメントベースハンドオフ: UI変更レビュー時に複数人で作業する場合、ビジュアルエディタのコメントで変更意図（何をどこで）を捕捉し、エージェントで反復実装。

FAQ

• InspectorはどのOSで利用可能ですか？ サイトではmacOS対応と記載。

• ローカルプロジェクトファイルに対応しますか？ はい。サイトでは任意のローカルコードベースに接続可能と記載。

• どのAIコーディングエージェントに対応？ サイトでClaude Code、Codex、Cursorをサポートと記載。

• どのフロントエンドアプリ向け？ サイトでReact、Next.js、Viteを記載。

• ビジュアルエディタで何を編集可能？ サイトでは要素移動、テキスト編集、コメント追加で変更可能と記載。

代替案

• React/Next.js/Viteのコード優先UI編集（ローカルIDE）: 標準エディタを使用（コード変更の直接記述・実行）。完全制御が可能だが、ブラウザベースのビジュアル操作ワークフローがありません。
• ビジュアルUIビルダー/ワークフロー: ドラッグ&ドロップ中心ツールでレイアウト変更を高速化。ただし、AIコーディングエージェント接続やローカルコードベースへの直接マッピングが同じようにはいかない場合があります。
• ビジュアルフロントエンドエディタなしのAI支援コーディングツール: エージェントベースワークフローでプロンプトからコード変更生成。ただし、ブラウザ上で要素移動・UI注釈ができません。
• ブラウザベースコンポーネント検査ツール: 開発者向け検査ツールでレイアウト・DOM構造理解。ただし、AIコーディングエージェント接続の完全ビジュアル編集セッションはありません。