modem-dev/sideshow

What it solves

터미널 기반 코딩 에이전트는 일반적으로 "text wall"을 통해 통신하므로, 복잡한 아키텍처, UI 스케치 또는 코드 diffs를 시각화하는 것이 어렵습니다. Sideshow는 에이전트가 텍스트 기반 대화와 함께 시각적 콘텐츠를 게시할 수 있는 실시간 시각적 표면(브라우저 기반 뷰어)을 제공하여, 사용자의 인지 부하를 줄이고 전체 HTML 문서를 보내는 대신 데이터를 전송함으로써 출력 토큰을 절약합니다.

How it works

Sideshow는 뷰어를 호스팅하는 Node.js 서버(또는 Cloudflare Workers)로 실행됩니다. Claude Code, Codex 또는 Pi와 같은 코딩 에이전트는 API를 통해 "surfaces"를 게시할 수 있는 설정 블록을 제공받습니다. 이러한 surfaces는 다양한 "parts"(예: Mermaid diagrams, Markdown, HTML fragments, JSON trees, syntax-highlighted diffs)로 구성되며, 뷰어는 미리 정의된 테마를 사용하여 브라우저에서 이를 실시간으로 렌더링합니다.

Who it’s for

워크플로우를 벗어나지 않고 에이전트가 제안한 변경 사항, 아키텍처 다이어그램, 실행 추적(execution traces)을 검토할 수 있는 멀티모달 방식을 원하는 터미널 기반 AI 코딩 에이전트 사용자.

Highlights

• Multimodal Rendering: Mermaid flowcharts, syntax-highlighted diffs, ANSI color가 포함된 터미널 출력, 그리고 접이식 JSON trees를 포함한 매우 다양한 시각적 parts를 지원합니다.
• Token Efficiency: 전체 HTML/CSS 대신 구조화된 데이터(Mermaid source와 같은)를 전송하여 LLM 출력 토큰을 줄여주며, 결과적으로 더 빠른 드로잉과 더 낮은 비용을 가져옵니다.
• Agent Agnostic: Claude Code, Codex, Opencode를 포함하여 셸(shell) 액세스 권한이 있는 모든 에이전트 하네스(agent harness)와 함께 작동합니다.
• Flexible Deployment: Node.js를 통해 로컬에서 실행하거나 원격 액세스를 위해 Cloudflare Workers에 배포할 수 있습니다.
• Interactive Elements: HTML surfaces는 sendPrompt()를 호출하여 에이전트의 스레드에 직접 피드백을 게시할 수 있는 버튼을 포함할 수 있습니다.",