{"slug": "mirafold-generative-ui-for-claude-code-and-codex-2026", "title": "Mirafold: Generative UI for Claude Code and Codex (2026)", "summary": "Mirafold, an MIT-licensed open-source tool, launched a browser-based generative UI layer for terminal coding agents Claude Code, Codex, and Gemini CLI, turning raw agent output into live cards, dependency tables, diffs, and architecture diagrams. The tool, requiring Node 22+, runs local-first with no cloud dependency for the core, and its security model sandboxes agent output in iframes with a strict Content Security Policy while keeping credentials in a trusted shell. Mirafold addresses the documented 'terminal blindness' issue where scrollback jumps to the bottom on every update, making it impossible to review agent output while running.", "body_md": "Your terminal coding agent is running. You have no idea what it’s doing. That is the default state for anyone using Claude Code, Codex, or Gemini CLI in 2026 — a wall of scrollback that autojumps to the bottom on every update, wiping out anything you were reading. [Mirafold](https://mirafold.com/) just shipped a fix: a browser-based generative UI layer that turns agent output into live cards, dependency tables, diffs, and architecture diagrams. Run `npm i -g mirafold`\n\n, type `mirafold`\n\nin your project directory, and your next Claude Code session opens in the browser — organized, readable, and actually useful.\n\n## The Problem Is Real and Well-Documented\n\nThe terminal scrollback issue is not a minor annoyance. A [documented GitHub issue](https://github.com/manaflow-ai/cmux/issues/1847) put it plainly: “When a coding agent is running in a terminal pane, the scroll position jumps to the bottom on every output update. Every update from the agent forces the viewport to the bottom, making it impossible to review output while the agent is still running.” Developers coined the term “terminal blindness” for the broader failure mode — you cannot tell if the agent is making progress, about to overwrite something important, or stuck in a loop.\n\nThe deeper issue is attention, not just scrolling. With agents running for hours, the bottleneck shifts from how fast you type to how fast you can understand what is happening. Can you trust this change? Compare two attempts? Tell whether the agent is stuck or actually working? A raw terminal gives you none of that. The [UI problem of AI coding agents](https://cate.cero-ai.com/blog/ui-problem-ai-coding-agents) has had plenty of analysis — but not many actual solutions.\n\n## What Mirafold Renders\n\nMirafold pulls agent output into a browser UI built on schema-validated components. When you ask about your repo, it can display an overview card with a dependency table. As the agent works, you get a live task list, colored console output, diff views, a file explorer, git diffs, and architecture diagrams rendered in sandboxed iframes — all updating in real time. These are not decorative. They are actionable: permission strips let you approve or deny agent actions inline, and the live task list shows what is done, what is running, and what is queued.\n\nThe underlying pattern comes from Anthropic’s generative UI for claude.ai, which ships interactive widgets rendered live as tokens arrive. Michael Livs [reverse-engineered the design system](https://michaellivs.com/blog/reverse-engineering-claude-generative-ui/) in March 2026 — extracting 72K of production rules covering typography, color, Chart.js configuration, and SVG engineering. Mirafold productizes the same pattern for Claude Code, Codex, and Gemini CLI without touching the chat interface.\n\n## The Security Model Holds Up\n\nRunning AI-generated components in your browser demands a serious threat model. Mirafold separates its surface area into two zones. Agent output renders in a sandboxed iframe with an opaque origin and a Content Security Policy that cuts every network path — the component cannot exfiltrate data or make outbound calls. The prompt box, socket, and credentials live in a trusted shell the agent cannot render into. Component actions are validated server-side against an allowlist before execution.\n\nThe `!`\n\nprefix is a clever implementation detail: type `!sudo apt update`\n\nand the command runs in a real PTY on your machine. The password prompt appears natively in the PTY shell — the agent never sees what you type. After the command completes, the agent reads the output and continues. No credential leakage, no behavioral change from your existing workflow.\n\n## Open Source, Local-First, Multi-Agent\n\nMirafold is MIT-licensed and requires Node 22+. There is no cloud dependency for the core. Point Claude Code at Ollama’s Anthropic-style endpoint, Codex at LM Studio or vLLM, and the entire session stays on-device. API keys never reach the browser even in the cloud configuration. Claude Code, Codex, and Gemini CLI each get their own adapter behind a uniform interface — adding a new agent is one adapter, not a rewrite.\n\nThe Pro tier adds QR-code multi-device pairing: scan from your phone or tablet, and the same generative-UI session appears with all pinned widgets intact. The relay is end-to-end encrypted — it sees ciphertext and connection metadata, never your keys or code. The relay code is also MIT-licensed; the hosted relay is what the Pro subscription funds.\n\n## Where This Fits in the 2026 Agent Stack\n\nThe [coding agent toolchain in 2026](https://amux.io/guides/best-ai-agent-multiplexers-2026) has split into two layers: orchestration (Gas Town, amux, cmux coordinate multiple agents) and interface (making output readable and actionable). cmux is macOS-only and does not apply generative UI to output content. amux is recovery-focused with a self-healing watchdog but no visual rendering. Mirafold is the first tool to apply the claude.ai widget model to the terminal agent context directly, and it works across macOS, Linux, and Windows.\n\nIf you are running Claude Code or Codex sessions that last more than 30 minutes, the quality-of-life improvement is substantial. Install it, run it once on a real task, and the terminal-only workflow will feel like a step backward.\n\n```\nnpm i -g mirafold   # Node 22+ required\nmirafold            # Run in your project directory\n```\n\n", "url": "https://wpnews.pro/news/mirafold-generative-ui-for-claude-code-and-codex-2026", "canonical_source": "https://byteiota.com/mirafold-generative-ui-for-claude-code-and-codex-2026/", "published_at": "2026-08-10 00:11:42+00:00", "updated_at": "2026-08-10 00:35:42.669878+00:00", "lang": "en", "topics": ["developer-tools", "generative-ai", "ai-tools"], "entities": ["Mirafold", "Claude Code", "Codex", "Gemini CLI", "Anthropic", "Ollama", "LM Studio", "vLLM"], "alternates": {"html": "https://wpnews.pro/news/mirafold-generative-ui-for-claude-code-and-codex-2026", "markdown": "https://wpnews.pro/news/mirafold-generative-ui-for-claude-code-and-codex-2026.md", "text": "https://wpnews.pro/news/mirafold-generative-ui-for-claude-code-and-codex-2026.txt", "jsonld": "https://wpnews.pro/news/mirafold-generative-ui-for-claude-code-and-codex-2026.jsonld"}}