VisualCode
AI coding agents like Codex can feel like a black box to non-technical users.
Core trick
Parses the agent's plan-first output into a hierarchical tree of features and files, rendered as a growing graph.
Description
AI coding agents like Codex can feel like a black box to non-technical users. Most people don’t think to ask for a plan first, which makes it hard to understand what the agent is doing, what it intends to build, and how the work is unfolding.
VisualCode turns a simple user request into a structured plan and visualizes that plan as a growing tree graph. By breaking the work into clear branches, it gives users an intuitive view of what the AI agent is building, how it is thinking about the task, and how the project is being organized from idea to implementation.
README excerpt
# VisualCode **Live demo:** https://visualcode-production.up.railway.app VisualCode is a Codex-powered planning and build-visualization demo. It pairs: - a left panel that feels like a Codex chat/planning interface - a right panel that turns Codex's plan into a living thought tree The current interaction model is plan-first: - new prompts are treated as requests to plan a new app or demo - Codex is instructed to finish planning before writing code - the visualization expands from build request -> plan -> features -> subfeatures -> planned files ## What It Shows VisualCode is designed to make Codex's intent legible to non-technical people. Instead of showing raw shell commands or low-level logs, the graph focuses on: - the user's request - Codex's build plan - major feature branches - smaller subfeatures - likely files involved in each branch The graph also reveals nodes gradually so the planning process feels alive instead of appearing all at once. ## Stack - React + Vite frontend - Express backend - Codex app-server / JSON-RPC bridge - shared TypeScript session models ## Local Development Install dependencies and run: ```bash npm run dev ``` The default local URLs are: - frontend: `http://localhost:5173` - backend: `http://localhost:3001` ## Build ```bash npm run build ``` ## Smoke Test ```bash npm run smoke:local ``` ## Notes - Generated app work is isolated away from the VisualCode wrapper so the demo UI stays stable while Codex is planning/building