デスクトップ Claude Code の Preview 機能で UI を直接確認する

Claude Code のデスクトップアプリに新しい Preview 機能がリリースされました。これを使用すると、コードから起動したアプリケーションの UI を直接確認しながら、同時にログやコードも確認して問題を解決できます。この記事では Preview 機能の使い方を紹介します。

Preview 機能を使用する

まずは Claude Code のデスクトップアプリをインストールしましょう。Claude Code のドキュメントからお使いの OS に対応したインストーラーをダウンロードして、インストールを完了させてください。既にインストールされている場合は、アプリを起動して最新バージョンにアップデートされていることを確認してください。

インストールが完了したら上部のタブから「Code」を選択します。コードが存在するディレクトリとブランチを選択し、チャット欄に「アプリケーションを起動し、新しいボードとタスクを作成できるかテスト」などと入力してみましょう。

チャット画面の右上に「Preview」ボタンが表示されるので、これをクリックしてみましょう。ポップアップの「Set up」ボタンをクリックすると、画面右側にプレビュー画面が表示され、.claude/launch.json ファイルの作成を試みます。

.claude/launch.json ファイルは Claude Code がどのようにアプリケーションを起動するかを定義するためのファイルです。ビルドに必要なコマンドや環境変数などを定義できます。概念的には Visual Studio Code で使用される .vscode/launch.json ファイルとよく似ています。

.claude/launch.json

{
  "version": "0.0.1",
  "configurations": [
    {
      "name": "kanban-app",
      "runtimeExecutable": "npm",
      "runtimeArgs": ["run", "dev"],
      "port": 3000,
      // Claude がファイルを変更した後に UI を自動で検証するかどうか。デフォルトは true
      "autoVerify": true,
      // 環境変数
      "env": {
        "NODE_ENV": "development"
      },
      // ポート番号が競合したとき、自動的に次の空いているポートを使用するかどうか。
      // デフォルトは未設定で、Claude がポートの競合を検知したときにユーザーに確認する挙動になる。
      "autoPort": true
    },
    // 別にサーバーや DB を起動する必要がある場合は、別の設定を追加することもできる
    {
      "name": "db",
      "runtimeExecutable": "docker-compose",
      "runtimeArgs": ["up", "db"]
    }
  ]
}

.claude/launch.json ファイルが存在する場合、Claude がアプリケーションをテストする必要があると判断したときに、自動で Preview 画面を起動してアプリケーションの UI を操作しながらテストを行うようになります。

もしくは「Preview」ボタンをクリックした時に表示されるポップアップの「kanban-app ▶️」をクリックすると、すぐにプレビュー画面が起動してアプリケーションの UI を確認することもできます。「Persist sessions」オプションを有効にしておくと、Cookie などのセッション情報が保持されるため、ログインが必要なアプリケーションなどもスムーズにテストできます。

実際にユーザーの指示通り、プレビュー画面の UI を操作して新しいボードの作成を試みていることがわかりますね。「新規ボード作成」ボタンをクリックしてダイアログを表示し、タイトルと説明をフォームに入力する流れはスムーズに行われています。

タスクを作成する際に、意図的にエラーが発生するコードを仕込んでおきました。エラーが発生したことを検知して、サーバーのログを確認している様子もわかりますね。その後関連ファイルを調査してからエラーの原因を特定し、修正している様子もわかります。

最終的にテスト結果を報告し、どのようにバグを修正したかも説明してくれていますね。UI を視覚的に確認しつつ、同時にログやコードを読みながら問題を解決していくことができ、従来のようにユーザーがブラウザで操作して結果を報告するというやりとりよりも、はるかにスムーズにコミュニケーションが取れていることがわかります。

要素を選択してプロンプトを渡す

Preview 機能では、プレビュー画面の UI 要素を選択して、その要素に対してプロンプトを渡すこともできます。プレビュー画面の右上にあるアイコンの「Select element」をクリックすると、ブラウザの開発者ツールのようなインターフェースに切り替わります。

タイトル要素を選択してクリックすると <h1>.text-2xl.font-bold のような要素のセレクタと、その要素のスクリーンショットがプロンプトに添付された状態になります。これをもとに「タイトルの色を赤色に変更してください」といった指示を出すことができます。

まとめ

Claude Code のデスクトップアプリの Preview 機能を使用すると、コードから起動したアプリケーションの UI を直接確認しながら、同時にログやコードも確認して問題を解決することができる
.claude/launch.json ファイルを使用して、アプリケーションの起動方法を定義する
プレビュー画面の UI 要素を選択して、その要素に対してプロンプトを渡すこともできるため、UI を視覚的に確認しながら、細かい修正指示を出すことも可能