modem-dev/sideshow

解決する課題

ターミナルベースのコーディングエージェントは通常、「テキストの壁」を通じてコミュニケーションを行うため、複雑なアーキテクチャやUIスケッチ、コードの差分を可視化するのが困難です。Sideshowは、ブラウザベースのビューアとしてライブなビジュアル表面を提供し、エージェントがテキスト会話と併せてビジュアルコンテンツを発信できるようにします。これにより、ユーザーの認知負荷を軽減し、完全なHTMLドキュメントを送信する代わりにデータを送信することで出力トークンを節約できます。

動作方法

SideshowはNode.jsサーバー（またはCloudflare Workers上）で実行され、ビューアをホストします。Claude Code、Codex、Piなどのコーディングエージェントは、API経由で「表面（surfaces）」を発信できるセットアップブロックを受け取ります。これらの表面は、Mermaid図、Markdown、HTMLフラグメント、JSONツリー、構文強調付き差分など、さまざまな「パーツ」で構成され、事前に定義されたテーマを使ってブラウザ上でリアルタイムにレンダリングされます。

対象ユーザー

ワークフローを離れずに、エージェントが提案する変更、アーキテクチャ図、実行トレースをマルチモーダルで確認したい、ターミナルベースのAIコーディングエージェントを使用する開発者。

特徴

• マルチモーダルレンダリング：Mermaidフローチャート、構文強調付き差分、ANSIカラー付きターミナル出力、折りたたみ可能なJSONツリーなど、幅広いビジュアルパーツをサポート。
• トークン効率：Mermaidソースなどの構造化データを送信することで、完全なHTML/CSSを送信する代わりにLLM出力トークンを削減し、描画速度を向上させ、コストを低減。
• エージェント非依存：シェルアクセスを持つ任意のエージェントハーネス（Claude Code、Codex、Opencodeなど）と互換性あり。
• 柔軟なデプロイ：ローカルでNode.js経由で実行可能、またはCloudflare Workersにデプロイしてリモートアクセス可能。
• インタラクティブ要素：HTML表面にはsendPrompt()を呼び出すボタンを含めることができ、フィードバックをエージェントスレッドに直接送信できます。