Architecture
High-level structure of the frontend, backend, and embedded Codex subsystem.
Frontend
The frontend/ app is a Next.js application that provides:
- the code editor
- file explorer
- terminal tabs
- preview tabs
- AI chat
- global session/configuration modal
The editor UI talks to the backend over:
- HTTP for file operations and Codex APIs
- WebSocket for PTY and terminal events
- SSE for Codex streaming events
Backend
The backend/ app is an Express server that owns:
- workspace file operations
- PTY lifecycle and WebSocket terminal multiplexing
- explorer root state
- AI provider integrations used by the editor
- embedded Enrai session control under
/api/enrai/*
Embedded Codex subsystem
backend/codex/ is not a separate deployed service anymore. It is mounted inside the backend and manages:
- Codex startup and restart
- thread start and thread resume
- rollout discovery
- session history
- Codex workdir state
- queueing of Codex tasks
Documentation app
The documentation/ app is a standalone Fumadocs-powered Next.js site. It exists beside frontend/ and backend/ so product docs stay isolated from the editor runtime.
Suggested screenshots
Show the coding agent panel open while a real file is visible in the editor.
Replace documentation/public/images/editor-chat-flow.png. Keep the chat readable and the code editor visible in the same frame.
- Chat panel open on the left
- One meaningful assistant answer visible
- A file reference or action result visible in the message
- The code editor still visible on the right
Show that Enrai can inspect a live app, not only edit code.
Replace documentation/public/images/editor-preview-runtime.png. Use a real app state, not an error page or blank preview.
- Preview tab selected
- A real app or page loaded successfully
- No localhost error page
- Toolbar and address bar visible