{"slug": "sideshow-a-live-visual-surface-for-your-terminal-coding-agent", "title": "Sideshow – A live visual surface for your terminal coding agent", "summary": "Sideshow, a new open-source tool from developer Modem, provides a live visual surface for terminal-based coding agents, allowing them to render diagrams, UI sketches, and other content in a browser in real time. The tool aims to reduce token usage and speed up agent workflows by sending only content data rather than full HTML documents. It works with existing agent harnesses like Claude Code and Codex, and is available via npm.", "body_md": "**A live visual surface for your terminal coding agent.**\n\nYour agent works in a wall of text; Sideshow gives it a screen. It publishes\n**surfaces** — diagrams, UI sketches, rendered markdown, syntax-highlighted\ndiffs, terminal output, images — and they render live in your browser while it\nworks.\n\n|\n|\n|\n\n**See what your agent means.** An architecture it's proposing, a flow it's tracing, a UI it's about to build — shown, not described in a paragraph you have to picture in your head.**Multimodal.** Combine diffs with mermaid diagrams, terminal output with HTML explainers, and more. Combine surfaces to illustrate ideas better.**Faster, and fewer tokens.** A standalone HTML document re-sends its whole design system every time; a surface sends only the content and the viewer supplies the chrome — far fewer tokens, and a faster draw. See[Token economics](#token-economics).**Works with the agent you already use.** Works with any agent harness: Claude Code (desktop or CLI), Codex (desktop or CLI), Opencode, Pi, etc.\n\nRequires Node 22.18 or newer.\n\n```\nnpm install\nnpx sideshow serve --open   # viewer on http://localhost:8228\n```\n\nThen point your agent at the surface — paste the setup block into its instructions:\n\n```\ncurl -s http://localhost:8228/setup >> AGENTS.md\n```\n\nThat bootstrap tells any agent with a shell (Pi, opencode, amp, codex, Claude Code) to fetch the current instructions from the running server, then publish surfaces and read your comments. Ask it to \"sketch this on sideshow\" and watch the card appear.\n\nThe running viewer has the same handoff built in: its sidebar footer carries an\n**agent setup** link (the block above) and a polished **connect agent** screen, so\nyou can grab the right MCP command without leaving the browser.\n\nNo agent handy? `npx sideshow demo`\n\nseeds two example sessions to look around.\n\n**Going further:** richer integration tiers (CLI, MCP, the Pi extension, and the\nClaude Code skill + plugin) are in ** docs/connecting-agents.md**.\n\nEvery card below is real — published over the API and captured straight from the\nviewer. A surface is an ordered list of **parts**; one card can carry several.\n\nShowing something visually costs tokens — the ones your agent spends *writing*\nit. A standalone HTML document pays for its whole design system (doctype, reset,\npalette, typography, component CSS, often a little JS) on every render. A surface\npays for none of it: it hands the content over as data — mermaid source, a JSON\nvalue, a markdown table, a diff patch — and the viewer supplies the theme. Fewer\noutput tokens also means a faster draw, since a model writes them one at a time.\n\nMeasured both ways on identical content (output tokens):\n\n| Showing… | Hand-built HTML | sideshow surface | Saved |\n|---|---|---|---|\n| Architecture diagram | hand-drawn SVG | mermaid source | ~90% |\n| API response | tree markup + JS | json surface | ~88% |\n| Data table | table + CSS | markdown table | ~83% |\n| Interactive UI mockup | standalone document | themed html fragment | ~42% |\n\nEven an HTML surface you author inherits the viewer's theme tokens and pre-styled controls instead of shipping its own, so it still comes out ahead.\n\nsideshow runs locally as a small Node server, or on Cloudflare Workers when your\nagent and your browser live on different machines (or you want the viewer on your\nphone). See ** docs/deploying.md**.\n\nEach surface has an **open-as-image** action in its footer that renders the\nsurface to a PNG (`/p/:id.png`\n\n) — handy for pasting into a doc or a chat. The\nimage is captured by a headless browser, so it needs Cloudflare's [Browser\nRendering](https://developers.cloudflare.com/browser-rendering/) binding and\nonly works on a Workers deployment. On the local Node server there is no headless\nbrowser, so the action is shown but disabled.\n\n— every integration tier in detail: CLI, MCP, Pi, plain HTTP, and the Claude Code skill + plugin.[Connecting agents](/modem-dev/sideshow/blob/main/docs/connecting-agents.md)— run a shared, tokened instance.[Deploying to Cloudflare](/modem-dev/sideshow/blob/main/docs/deploying.md)— architecture and contributor guide.[AGENTS.md](/modem-dev/sideshow/blob/main/AGENTS.md)**Terminal surface (alpha).** is an early sibling that renders to a TUI instead of the browser. APIs are unstable.`sideshow-term/`\n\n```\nnpm run dev          # server with watch + viewer watch build\nnpm test             # node --test (unit/API + store contract)\nnpm run typecheck    # three tsc programs: node + workers + viewer\nnpm run lint         # oxlint\nnpm run format       # oxfmt\n```\n\nThe server and CLI have no build step — TypeScript runs directly on Node via\nnative type-stripping, and the npm package ships compiled JS built on prepack.\nThe viewer (`viewer/src/`\n\n, Solid) is Vite-built into a single self-contained\n`viewer/dist/index.html`\n\n(`npm run build:viewer`\n\n). See\n[AGENTS.md](/modem-dev/sideshow/blob/main/AGENTS.md) for the full architecture and rules.\n\nSponsored by [Modem](https://modem.dev?utm_source=github&utm_medium=oss&utm_campaign=oss_sideshow&utm_content=readme_footer).", "url": "https://wpnews.pro/news/sideshow-a-live-visual-surface-for-your-terminal-coding-agent", "canonical_source": "https://github.com/modem-dev/sideshow", "published_at": "2026-07-18 18:17:13+00:00", "updated_at": "2026-07-18 18:52:12.661177+00:00", "lang": "en", "topics": ["developer-tools", "ai-tools", "ai-agents"], "entities": ["Modem", "Sideshow", "Claude Code", "Codex", "Opencode", "Pi", "Node.js", "Cloudflare Workers"], "alternates": {"html": "https://wpnews.pro/news/sideshow-a-live-visual-surface-for-your-terminal-coding-agent", "markdown": "https://wpnews.pro/news/sideshow-a-live-visual-surface-for-your-terminal-coding-agent.md", "text": "https://wpnews.pro/news/sideshow-a-live-visual-surface-for-your-terminal-coding-agent.txt", "jsonld": "https://wpnews.pro/news/sideshow-a-live-visual-surface-for-your-terminal-coding-agent.jsonld"}}