まずは何も言わずデモ動画をご覧ください
見た目は美少女秘書（Gemini作）ですが、裏ではちゃんとClaude Codeが動いています。
何をしようと思ったか
普段の仕事でClaude Codeをゴリゴリ使っているのですが、別にテンションがあがるわけでもなく、可能ならテンション保ちつつ仕事したいですよね。
「可愛い女の子の絵を出せばテンションあがるんじゃね？」
という、だいぶ不純な動機で（Claude Codeが）作り始めたら、思ったより動くものができてしまいました。
アーキテクチャ（意外とちゃんとしてる）
仕組みはシンプルです。
ブラウザ (localhost:3456)
↕ WebSocket
Node.js サーバー (server.js)
↕ stdin/stdout (stream-json)
Claude Code CLI プロセス
Claude Code CLIには --input-format stream-json --output-format stream-json というオプションがあり、JSON Lines形式で双方向通信ができます。つまり、Claude Codeの全機能をそのまま使いつつ、UIだけ独自に差し替えられるわけです。
Node.jsサーバーがWebSocketでブラウザとClaude Codeの間を中継しているだけなので、コード量もかなり少ないです。
できること
マルチセッション
タブごとに独立したClaude Codeプロセスが動きます。セッションの履歴も保存されるので、途中で閉じても --resume で再開できます。
リアルタイムステータス表示
左側のサイドバーにあるドットの色で、各セッションの状態がひと目でわかります。
- 緑（点滅）: Claude Codeが処理中
- 黄色: 入力待ち
- 赤: 停止
入力待ちになるとデスクトップ通知も飛ばしてくれるので、重いタスクを投げて別の作業をしている間も安心です。
スラッシュコマンド & @メンション補完
/ を打つとスラッシュコマンドの候補がドロップダウンで表示されます。@ でエージェントやファイルの検索もできます。CLIと同じ操作感をブラウザ上で実現しています。
ツール実行の可視化
Claude Codeがファイルを読んだり書いたりする様子が、折りたたみUIで表示されます。展開すれば詳細も確認できます。
チャット画面
メッセージを送ると、マスコットキャラのアバター付きで応答が返ってきます。Markdownレンダリングやコードのシンタックスハイライトにも対応しています。
まだできていないこと
Rewind（巻き戻し）
CLIの /rewind に相当する機能は実装できていません。
（Claude Codeが）調査した結果、stream-jsonモードでは --rewind-files がheadlessモードで無効化されており、現時点では技術的に難しい状況？
将来のアップデートに期待。
許可プロンプト
現状 --dangerously-skip-permissions オプションで全許可をスキップしています。
つまりClaude Codeがやりたい放題です。ファイル削除してくれるなよ、というお祈り運用。
（Claude Codeによると）本来は --permission-prompt-tool でMCPサーバー経由の許可UIを実装するのが正しいやり方なので、そのうち対応したいところ。
差分イラスト・アニメーション
処理中に目をパチパチさせたり、完了したら笑顔になったり……みたいなアニメーションをつけたいのですが、（Geminiで）差分イラストをまだ作っていません。
技術メモ
Windows環境でのハマりポイント（Claude Codeがハマってた）
spawn("claude", args) で起動するとき、Windowsでは shell: true が必須です。これがないとPATHが解決できずコマンドが見つかりません。
また、プロセスのkillも要注意。process.kill() だと cmd.exe だけ死んで子プロセスのClaudeが残ります。taskkill /T /F /PID でツリーごと落とす必要があります。
まとめ
技術の無駄遣いでなんか作ると楽しいですね。
実は、この記事自体もClaude Codeに下書きしてもらい、デモ動画の撮影もPlaywrightで自動化、アイキャッチ画像もMarpで自動生成、動画のmp4変換もスクリプト一発……と、記事を書く過程すらほぼClaude Code任せでした。秘書が優秀すぎる。
stream-jsonプロトコルを使えば、Claude Code CLIの全機能を好きなUIで包めるので、「このUIで仕事したい」という妄想がある人は試してみると面白いかもしれません。
コメント