Branch of Thought – Claude・ChatGPTの会話に潜む分岐をグラフで可視化するChrome拡張

ClaudeやChatGPTでメッセージを編集すると、会話は静かに新しい分岐へと分かれます。ところが以前の会話は小さな ‹ 2/3 › の矢印の奥に埋もれてしまい、戻りたい分岐を何度も見失ってしまいます。それが不便だったので自分で作りました。

何をするものかというと、サイドパネルに会話全体を分岐ツリーのグラフとして描画します。会話がどこで分かれたのかをひと目で確認でき、現在の経路は強調表示され、ノードをクリックするとそのバージョンのメッセージ全文を質問と回答まで含めて読めます。放置していた分岐にもワンクリックですぐ移動でき、ノードをドラッグして配置を変えたり、グラフをHTML、PNG、SVGとしてエクスポートしたりできます。

作りながら最も厄介だったのは、ClaudeとChatGPTで会話を保存する構造が完全に異なる点でした。ChatGPTはmappingツリーを公開していますが、Claudeはそうではないため、両方を同じ形にたたみ込む正規化器を1つ作りました。そのおかげでその下のロジックはすべてプラットフォーム非依存で動作し、2つ目のプラットフォームを追加するのもずっと容易になりました。

MV3ベースで、MAIN worldで動くcontent scriptがブラウザがすでに受け取った会話データを読み取ります。そのためすべてローカルで処理され、サーバー送信や分析、テレメトリーはありません。ノードタイトルをClaude Haikuで1行要約するオプションがありますが、これは自分のAPIキーを使い、メッセージごとに1回だけ要約してキャッシュします。

私にとって初めてのブラウザ拡張なので、粗い部分は多いです。ウェブストアには公開しておらず、今後も公開する予定はなく、展開済みの状態で自分で読み込む方式です。なので実行前にコードで正確に何をするのか確認できます。MITライセンスで、ClaudeとChatGPTの両方をサポートしています。
アプローチやUX、私が見落としているエッジケースについてフィードバックをもらえたらうれしいです。何でも気軽に聞いてください。