TL;DR
VS Code の GitHub Copilot Chat でエクスポートできる chat.json を、ブラウザだけで整形表示して共有 URL を発行する Web アプリを作りました。
- 公開デモ: https://cacapouh.github.io/copilot-chat-viewer/
- チャット内容を表示するページはこちら
- リポジトリ: https://github.com/cacapouh/copilot-chat-viewer
サーバーやストレージは持たず、会話データはすべて URL のフラグメント部分に圧縮して埋め込む構成です。
背景: Copilot Chat の会話を軽く共有する手段が欲しかった
VS Code 拡張の GitHub Copilot Chat には、会話を chat.json としてエクスポートする機能があります。インポートも Chat: Import Chat... コマンドで対応していて、ファイルを渡せば相手の VS Code でも同じ会話を開けます。
ただ、これだと「ちょっと見せたい」だけの場面では少し重く感じることがありました。
- 相手側にも VS Code と GitHub Copilot 拡張のセットアップが必要
- Slack やブログにそのまま貼れる形ではない
- 渡したあとで「これ見て」とコマンドを案内する一手間がある
VS Code を開いてコマンドを叩く、というところまで持っていかずに、URL を 1 つ送るだけで相手のブラウザで会話を見てもらえる仕組みが欲しかったので、作ってみました。
作ったもの
chat.json をブラウザにドラッグ&ドロップすると、整形済みのチャット画面に変換されます。「共有 URL を作成」ボタンを押すと、会話の全データが埋め込まれた共有用 URL が生成されます。
受け取った側は、その URL を開くだけで同じ画面を見ることができます。アップロードやログインといった操作はありません。
技術構成
- フロントエンド: Vite + React + TypeScript + Tailwind CSS
- 圧縮: pako (gzip) + base64url
- Markdown 描画: react-markdown + remark-gfm
- シンタックスハイライト: highlight.js
- ホスティング: GitHub Pages
サーバーサイドのコードはありません。chat.json のパース、共有 URL の生成、復元まで、すべてブラウザ内で完結します。
仕組み: URL のフラグメントに全データを埋め込む
共有 URL は以下のような形式です。
https://cacapouh.github.io/copilot-chat-viewer/#/view#d=H4sIAAAAAAAAA...
# 以降のフラグメント部分は、主要なブラウザが HTTP リクエストに含めず、ページ取得後にクライアント側でのみ処理する部分です (MDN: URI フラグメント)。そのため、静的ホスティング側で会話の中身を観測できる経路はありません。
データの埋め込みは以下の手順で行っています。
-
chat.jsonとタイトルを 1 つのオブジェクトにまとめる - JSON にシリアライズ
- gzip で圧縮
- base64url でエンコード
- URL のフラグメントに格納
復元は逆手順です。受け取り側のブラウザでフラグメントをデコードし、解凍して JSON に戻して描画します。
URL サイズの目安
この方式の弱点は、chat.json が大きくなると URL がそのまま長くなることです。実用上の目安として、画面右上に推定 URL サイズを常時表示しています。
おおよそ 2KB 以下であればどの環境でも安全に貼り付けできます。それを超えると、URL バーでの省略表示や、貼り付け先のチャット・メールクライアントの扱いによって挙動が変わる場合があります。Chrome では URL バー上で 32K 文字を超えると省略表示される実装になっており (Chromium Docs: Guidelines for URL Display)、Firefox や Safari はもう少し長い URL も扱える傾向があるので、ブラウザで開く分にはかなり余裕があります。
ローカル起動時のショートリンク機能
GitHub Pages 上の公開デモでは URL フラグメントだけで動作しますが、docker compose up でローカル起動した場合のみ、バックエンドに保存して短い ID で参照する「ショートリンク」機能が有効になります。
docker compose up
# http://localhost:5173 で起動
社内のサーバーで動かすときに長い URL が扱いづらければ、こちらを使う想定です。公開デモ側ではこの機能を無効化しているため、外部に会話データが送られることはありません。
おわりに
Copilot Chat の共有手段が公式に薄いので、サクッと作ってみました。プロンプトエンジニアリングの勉強会や、ちょっとしたチャット内容の共有に使えそうだなと思っています。
リポジトリはこちらです。