Handle

Handleとは？

Handleは、ブラウザベースのUI改良ツールです。Chrome上でインターフェースを直接編集し、その変更をコーディングエージェントに送信します。主な目的は、目に見えるUI調整をエージェントがプロジェクトに適用するコード更新と橋渡しすることです。

handle.aiに示されたページフローでは、ブラウザ（Handleの拡張機能経由）でUIを改良した後、コーディングエージェントが結果の更新をソースファイルに取り込み、レビューします。

主な機能

• ブラウザ（Chrome）上でUIを直接改良: Handleの拡張機能を使って実行中のアプリを見ながら変更を加え、視覚的に確認した調整を行います。
• ブラウザ編集をコーディングエージェントに反映: UIを改良した後、Handleが変更をエージェントに提供し、コード生成や更新を行います。
• 複数のコーディングエージェント/モデルに対応: ページではClaude Code、Codex、Cursor、GitHub Copilot、Windsurf、Gemini、Rovoとの互換性を記載。
• プロジェクト更新がソースファイルに適用: 例のワークフローでは、エージェント主導の変更が典型的なアプリ構造（例: src/components/...）のファイルに適用されます。

Handleの使い方

1. 拡張機能/ツールの初期化: npx handle-ext@latest init を実行。
2. コーディングワークフローの作成/接続: ページ例では、コーディングエージェントでUI編集セッションを作成後、/handle などのコマンドで開始。
3. ブラウザでUIを編集: ローカルアプリ（例: localhost:3000）を開き、Chromeで表示しながらHandleを使ってコンポーネントを改良。
4. エージェント更新ファイルのレビュー: 修正後（例: 3つのコンポーネント）、コーディングエージェントが対応ソースファイルを更新し、レビュー可能。

ユースケース

• ライブアプリを見ながらページコンポーネントを調整: ヒーローセクション、価格カードレイアウト、フッターのスタイリングを調整する場合、ブラウザ内でUIを改良し、エージェントが関連Reactコンポーネントファイルを更新。
• 反復編集でフィードバックをコードに反映: 複数のUIコンポーネントへのフィードバックを受けたら、各コンポーネントを改良し、手動書き換えではなくコードベースに変更をルーティング。
• エージェント駆動開発のUI-to-コード連携を高速化: 機能実装にエージェントを使う場合、Handleが「UIの望ましい見た目」をコード更新に繋げます。
• 一般的なエージェント環境で活用: チームがCursorやGitHub Copilotを使っている場合、ブラウザで改良した変更を既存エージェントに送信してワークフローに適合。

FAQ

• Handleは何を修正する—ブラウザのUIかコードか？ Handleはブラウザ上でUIを直接改良し、その変更をコーディングエージェントに反映してプロジェクトファイルにコード更新を適用します。

• Handleはどのブラウザに対応？ ページではChrome内での改良を明記。

• 特定のコーディングエージェントが必要？ サイトではClaude Code、Cursor、GitHub Copilot、Windsurf、Gemini、Rovoなど複数の対応オプションを記載。

• 編集後の変更はどこに行く？ 表示例では、エージェント更新がファイル変更（例: src/components/Hero.tsx、PricingCards.tsx、Footer.tsx）となり、レビュー準備完了。

• ローカルセットアップ方法は？ ページで提供のコマンド: npx handle-ext@latest init を実行。

代替案

• コード上で直接デザイン（コンポーネント/スタイルシート編集）: ブラウザ拡張で改良してエージェントに反映する代わりに、関連UIソースファイルを手動編集（より直接的だがエージェント支援が少ない）。
• コード出力付きUIプロトタイピングツール: レイアウトを視覚的に反復するツールはコード出力や変換を提供するが、同じワークフローで「ライブUI改良」をコーディングエージェントに送信するわけではない。
• エージェントのみのUI生成: 一部のコーディングエージェントワークフローはテキストプロンプトからUIコードを生成し、ブラウザベースの改良ステップなし；プロンプト/反復を多く要し、ブラウザ内UI編集とは異なります。