Elements and Codex

Codex is OpenAI's coding agent, and it is a pleasure to build with. You hand it a task in plain words, and it reads the code, makes the changes, runs the commands that check them and reports back. The same agent runs in your terminal through the open-source Codex CLI, in VS Code and Cursor through its IDE extension, in the cloud against your GitHub repositories with changes returned as pull requests, and in the Codex desktop app, which is superb: your tasks and their changes side by side.

Elements and Codex are a match made in heaven. Codex writes the code, and Elements, the integrated app environment, builds it, checks it and deploys it, so what Codex ships runs right on the first try and stays that way. The build catches each error within milliseconds, whether it comes from type checking, a test, a migration or program analysis, and no release reaches your server until the build is clean and the tests pass (build, deploy). Elements and the Codex desktop app together are a magical developer experience: a better way to vibe code, on your own computer, with apps built quickly and correctly.

Elements makes the environment Codex builds in, not a model or an agent of its own. Elements works well with agents because it has a manual baked into the binary. Licenses are per machine, and Codex can run the build as often as it likes with no meter running (pricing).

A New Project Is Ready From the First Task

elements create makes a project Codex can build in before it writes a line (start). Codex knows the project already has its bundler, test runner and migrations, so it builds on them instead of installing its own, and it checks every edit as it goes.

One Command Reports Every Mistake

Codex checks its work by running the tools on your machine and reading their output. On most stacks that is a type checker, a test runner and a migration tool, each started on its own with its own output format.

In an Elements project Codex runs one. elements build -json returns every build error as one structured reply, each with its file, line and column, and exits 1 when there are errors, so a script or a codex exec run can branch on the result (build). Since a single build does the type checking, the tests and the migrations, all three kinds of failure come back together. elements test -json adds a tree of which tests passed, failed or did not run (tests). The reply always matches what is on disk, even when Codex asks the instant after writing a file.

The Project Server Runs While Codex Works

The command is answered by a project server that runs while you work and keeps running from one command to the next. It holds the build graph and build state in memory, so on every save the build state is updated almost instantly, rebuilding just what that save affected and hot reloading the running app. It builds in milliseconds and answers agents and humans in microseconds (build).

The same server answers your terminal, your editor and every agent in the project. When Codex runs subagents, or you keep a Codex session in the terminal and another in the IDE, they all read one build state (build).

Seeing the App Codex Builds

A clean build means the code compiles, not that the page looks right. elements start serves the app and hot reloads it on every save, so the page Codex opens always shows its latest edit (start). From the CLI, Codex can screenshot any route at desktop or phone width with the Chrome already on your machine, with nothing to install (browser). Everything the running app writes, request-time errors included, goes to a log Codex can read (build).

Codex in Your Editor

The Codex IDE extension runs beside your code in VS Code and Cursor. Installing Elements sets up both editors with nothing to configure, so the same window shows Elements diagnostics, completion and go-to-definition for TypeScript, Elements HTML templates, config and CSS (VS Code). The editor runs the checker the build runs, so the editor, the build and Codex report the same errors (editors).

Getting Started

Install Elements, create a project, and start Codex in it:

elements create myapp
cd myapp
codex

Ask Codex to build something, and from the first task it starts the app, checks every edit and builds against the project Elements set up.

Questions

How do Elements and Codex fit together?

Codex writes the app, and Elements is the integrated app environment where it is built, checked and deployed. A new Elements project is ready from Codex's first task, and elements build -json reports every build error in one answer, from type checking to tests and migrations.

Is Elements an alternative to Codex?

No. Codex writes code; Elements is the environment that code is built, tested and deployed in, with a project server, a default app framework, a bundled Postgres database and a deploy command. Elements builds the environment, and Codex is a superb agent to build in it.

How does Codex know a change broke something in an Elements app?

It runs elements build -json, which returns every build error in one list, each with a file, line and column, and exits 1 when there are errors. The project server has already built the latest save, so the reply comes back in microseconds.

Does the Elements VS Code extension work alongside the Codex IDE extension?

Yes. Installing Elements sets up VS Code and Cursor with nothing to configure, so diagnostics in the editor match what elements build -json reports to Codex.