Claude CodeのHooksでプランファイルをブラウザプレビューしてみた
はじめに
Claude Codeのプランモードを日常的に使っているのですが、プランの中身をターミナル上で追い続けるのが結構しんどいです。
プランは長文になりがちでスクロールしないと全体像がつかめず、承認ダイアログが出ても「結局このプラン、何がどうなるんだっけ」と戸惑うことが増えていました。
今回はClaude CodeのHooksを活用して、プラン結果をMarkdownビューアーでブラウザプレビューする仕組みを作ってみました。
使用するツール
mo
Markdownファイルをブラウザでプレビュー表示するツールです。
ファイルの変更をリアルタイムに検知して表示を更新してくれるため、プランファイルへの追記にも追従します。
サーバーが既に起動していれば、新しいファイルを追加するだけでセッションに反映されます。
cmux
Ghosttyベースのターミナルアプリケーションで、内蔵ブラウザ機能を持っています。
Cmd + Shift + Lでターミナルの横にブラウザをスプリット表示でき、moのサーバー（localhost:6275）を開いておけば、別ウィンドウに切り替えることなくプレビューを確認できます。
cmuxの詳細は以前の記事で紹介しています。
Claude Code Hooks
特定のイベント発生時にシェルコマンドを自動実行する仕組みです。
今回はPostToolUseイベントを使い、WriteやEditツールの実行後にスクリプトを走らせます。
やってみた
前提条件
以下の環境が整っていることを前提とします。
- Claude Codeがインストール済み
moがインストール済みjqがインストール済み（Hookスクリプト内でJSONパースに使用）cmuxがインストール済み（内蔵ブラウザを使わない場合は不要）
Claude Codeの設定
Hooksと組み合わせる前に、プランモード関連の設定を入れておくとより効果的です。
{
"permissions": {
"defaultMode": "plan"
},
"plansDirectory": ".claude/plans"
}
defaultModeをplanにすると毎回プランモードで開始されるため、Hookが活きる場面が自然と増えます。
plansDirectoryを.claude/plansにするとプランファイルがプロジェクト配下に保存され、gitでの管理もしやすくなります。
Hookスクリプトの作成
プランファイルが書き込まれたタイミングでmoにプレビュー表示するスクリプトを作成します。
#!/bin/bash
INPUT=$(cat)
FILE=$(echo "$INPUT" | jq -r '.tool_input.file_path // empty' 2>/dev/null)
if [[ "$FILE" == */.claude/plans/*.md ]]; then
mo --no-open "$FILE"
fi
PostToolUseイベントからstdinでJSON入力を受け取り、書き込まれたファイルのパスを取得します。
パスが.claude/plans/*.mdにマッチする場合のみmoにファイルを追加します。
--no-openフラグにより、moがブラウザを自動で開くのを抑制しています（cmuxの内蔵ブラウザで表示するため）。
実行権限を付与しておきます。
chmod +x ~/.claude/hooks/plan-preview.sh
Hooksの設定
ユーザー設定にHookを追加します。
{
"hooks": {
"PostToolUse": [
{
"matcher": "Write|Edit",
"hooks": [
{
"type": "command",
"command": "\"$HOME/.claude/hooks/plan-preview.sh\"",
"timeout": 10
}
]
}
]
}
}
matcherをWrite|Editにすることで、Claude Codeがプランファイルを書き込んだ時点でHookが発火します。
プランの承認ダイアログよりも前のタイミングで表示されるため、承認判断時にはブラウザ側にレンダリング済みのプランが表示された状態になります。
動作確認
設定が完了したら、実際に動かしてみます。
cmuxの内蔵ブラウザをスプリット表示し、localhost:6275にアクセスしておきます。
Claude Codeでプランモードを実行すると、プランファイルが書き込まれた時点でHookがトリガーされ、moにファイルが追加されます。
承認ダイアログが表示される頃には、cmuxの内蔵ブラウザにMarkdownとしてレンダリングされたプランが表示されています。
ファイルの変更もリアルタイムに反映されるため、プランが追記されるたびにブラウザ側の表示も更新されます。
まとめ
今回はClaude Codeのプランファイル作成時に、Hooksでmoを起動してブラウザでプレビュー表示する仕組みを作ってみました。
cmuxの内蔵ブラウザと組み合わせることで、ターミナルとプランのプレビューをサイドバイサイドで表示でき、ウィンドウの切り替えなしにプランの内容を確認できます。
どなたかの参考になれば幸いです。
