Elements and Claude Code

Claude Code is Anthropic's coding agent, and it is superb at the job. You describe a feature or a bug in plain words, and it reads the codebase, plans the change, edits the files and runs the commands that check it. It works in the terminal, in VS Code and JetBrains, in the browser and in the Claude desktop app, which is a wonderful place to build: the conversation, the changes and the running app sit side by side. For a large task, it splits the work across several agents running in parallel.

Elements and Claude Code are a match made in heaven. Claude Code writes the app, and Elements is the integrated app environment where it is built, checked and deployed, so the app works the first time and keeps working. Every build error, from type checking to tests, migrations and program analysis, is caught in milliseconds, and a deploy goes live only when the build is clean and every test passes (build, deploy). Elements and the Claude 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 builds the environment your agent works in; it does not make a model or a coding agent. Elements works well with agents because it has a manual baked into the binary. You pay for Elements by the machine, and it puts no meter on how often Claude Code builds (pricing).

A New Project Is Ready From the First Turn

elements create makes a project Claude Code can build in from its first turn (start). Claude Code knows what the project already includes, so it builds on the bundler, test runner and database that ship with Elements instead of adding its own, and it checks its work from the first edit.

One Command Reports Every Mistake

An agent learns what it broke by running something and reading the output. On most stacks that is three programs (type checker, test runner, migration tool), three output formats, and the job of working out whether an error came from this edit or an older one.

Elements gives Claude Code one command and one structured reply. elements build -json lists every build error in the project, each with its file, line and column, and exits 1 when there are errors (build). A failing test is one more entry, and so is a broken migration, since the build that type checks the code also runs the tests and the migrations. The reply always describes the file Claude Code just saved, never an older build. For test detail, elements test -json returns the tests as a tree, each marked passed, failed or not run (tests).

The Project Server Runs While Claude Code Works

Each elements build -json is a question put to the project server, which runs while you work and stays up between commands. It holds the build graph and build state in memory, so on every save the build state is updated almost instantly: it redoes only what the change touched, and hot reloads the running app (build). It builds in milliseconds and answers agents and humans in microseconds.

Your terminal, your editor and Claude Code all ask that one server. When Claude Code splits a task across several agents, or you run several sessions side by side, every one of them reads the same build state, and one agent's edit shows up in the next agent's build (build).

Seeing the App Claude Code Builds

A clean build proves the code compiles; it says nothing about how the page looks. Claude Code has three ways to check the result.

• The running app. elements start serves the app and hot reloads it on every save, and in the Claude desktop app the page opens right beside the conversation (start).
• Screenshots. Claude Code captures any route at desktop or phone width with the Chrome already on your machine, with nothing to install (browser).
• The program log. The running app's output, request-time exceptions included, goes to a log any agent can read (build).

Claude Code in Your Editor

Claude Code also runs inside VS Code, with its changes shown beside your files. Installing Elements sets up VS Code with nothing to configure, so those changes sit beside Elements diagnostics, completion and go-to-definition across TypeScript, templates, config and CSS (editors). The editor runs the build's own checker, so a red underline in the editor is an error Claude Code will also find in its next build.

Getting Started

After installing Elements, three commands get Claude Code going in a new project:

elements create studio
cd studio
claude

From the first request, Claude Code starts the app, checks every edit and builds against the project Elements set up.

Questions

How do Elements and Claude Code fit together?

Claude Code writes the app, and Elements is the integrated app environment where it is built, checked and deployed. A new project is ready from Claude Code's first turn, and one command, elements build -json, gives it every build error in one reply, from type checking to tests and migrations.

Is Elements an AI coding agent or a Claude Code alternative?

No. Claude Code is the agent, and Elements is where it builds: a project server that answers its build queries, a test runner, a bundled Postgres database and a deploy command, ready from the first elements create.

How does Claude Code check its work in an Elements project?

It runs elements build -json. Because the latest save is already built, the reply arrives in microseconds, giving each error with its file, line and column, and it always reflects the edit Claude Code just made.

Can several Claude Code agents work on one Elements project at once?

Yes. Every client of a project, including the terminal, the editor and each agent, talks to the same project server and sees the same build state, so parallel agents and sessions all read one build.