AI-Powered Code Editors: Build, Fix, and Deploy Apps with AI Builder and CLI

You ask an AI coding tool to build a feature. The first screen looks promising. Then you edit a component locally, the browser preview shows an older version, and the next AI change no longer matches the files you just tested.

That is where a good AI development workflow earns its place. You need a clear way to move between prompts, editable files, checks, preview, and deployment.

This guide shows how to use AI-powered code editors alongside NEXUS AI Builder and its CLI. You will create a small app, work on it in your editor, capture a failed build, review an AI fix, and deploy the reviewed Builder snapshot.

The commands below are real NEXUS AI CLI commands. The scenario is a worked example, rather than a claim that a customer completed these steps or that this particular app has already been generated and deployed.

An AI-powered code editor adds assistance to the place where you read and change source files. Depending on the product, it may offer inline suggestions, code explanations, project search, edits across files, or an agent that runs commands and checks its work.

For example, Cursor Agent can edit code and run terminal commands. AI in Visual Studio Code supports workflows for understanding code, fixing bugs, and building features.

The useful question is how those capabilities fit your task. Can you inspect the generated code? Run your own tests? Keep the preview synchronized? Identify the files that will be deployed?

You can keep your preferred editor. The CLI connects your local work to the Builder project, while the browser gives you a place to check the interface and behavior.

Imagine you are making a support-ticket dashboard prototype. You need to show a teammate a working ticket list, a creation form, search, and status changes.

For this first version, tickets will be saved in browser localStorage. That keeps the local setup focused on the editor and Builder workflow. It also gives the prototype a clear limit: records belong to that browser and origin. They are not shared across users or synchronized between preview and deployment URLs.

Later, we will cover what changes when the prototype needs a shared database and authentication.

You need Node.js 18 or later, a NEXUS AI account, an available AI provider for Builder, and a local editor. The generated app may require a newer Node.js version; inspect its package and setup instructions before running it.

npm install -g nexusapp-cli@latest nexus --version nexus auth login nexus auth whoami nexus builder providers Enter fullscreen mode Exit fullscreen mode nexus auth login opens browser sign-in. whoami confirms the account and organization you will work in. builder providers shows the AI providers available to your account.

AI requests use the applicable Builder allowance or provider configuration. Choose a provider and model available to your account rather than copying a model name from an old tutorial.

Run this command from the parent directory where you want to work:

nexus builder new --name support-desk-demo \ "Build a Next.js App Router and TypeScript support ticket dashboard. Include a ticket list, title and description fields, priority, and Open, In Progress, and Resolved statuses. Add case-insensitive search and required-title validation. For this prototype, use seeded example tickets and browser localStorage, with no backend or database. Handle server rendering safely. Add working npm scripts named typecheck, test, and build. Include tests for title validation and case-insensitive search, plus README instructions for setup and local use." Enter fullscreen mode Exit fullscreen mode The CLI creates a project and prints its project ID. Copy that actual ID, then set a shell variable:

PROJECT_ID = 'REPLACE_WITH_THE_RETURNED_PROJECT_ID' Enter fullscreen mode Exit fullscreen mode This is an ordinary shell variable used in the remaining commands. It is not an AI model ID or a deployment ID.

The prompt defines a small, inspectable product and asks for checks that match its behavior. Review whether the generated project meets those requirements before continuing.

nexus builder files --project " $PROJECT_ID " nexus builder open --project " $PROJECT_ID " Enter fullscreen mode Exit fullscreen mode files lists the current Builder files. open prints the browser Builder URL; open that link yourself.

Try the ticket form, search, status changes, and a page refresh. A plausible screenshot does not confirm that those interactions work.

Use the browser Builder for visual iteration. Depending on the preview mode and project, you can inspect the app beside its conversation and use the available visual tools. Keep the application behavior in your acceptance checks, even when a change is mostly visual.

The NEXUS AI documentation describes the browser Builder and its preview workflow.

You can also stay in the browser and open Builder's Code tab. Its built-in editor lets you read and change generated files, create or delete files, search and replace, and save with Cmd+S or Ctrl+S. Saved changes become checkpoints.

Use this for a precise change while keeping the preview nearby. For example, inspect the ticket form component and adjust its empty-title error message, then save and check the form again. The AI conversation and direct file editing work on the same project.

The browser editor is useful when you want to avoid a local setup. Pulling the project in the next step gives you access to your own editor, installed development tools, and local commands.

Download the Builder snapshot into a new local folder:

nexus builder pull --project " $PROJECT_ID " --out./support-desk-demo cd support-desk-demo Enter fullscreen mode Exit fullscreen mode Open that folder in Cursor, Visual Studio Code, or your preferred editor. Read the generated README.md and package.json first.

List the available package scripts and install dependencies:

npm run npm install Enter fullscreen mode Exit fullscreen mode The example prompt requested typecheck, test, and build. If any are missing, have Builder add the corresponding working scripts and checks, then sync the updated project. Treat a missing test command as unfinished setup, rather than treating the absence of a failure as a pass.

The local folder also contains Builder checkout metadata. Keep it so the CLI can identify the project and compare local changes with the shared snapshot.

For example, ask your editor's AI assistant:

Review the existing ticket search implementation. Make search ignore leading and trailing whitespace as well as capitalization. Keep the current UI and storage behavior. Update the relevant tests and show which files changed. Enter fullscreen mode Exit fullscreen mode You could make the same change manually. Either way, inspect the diff and keep the change focused enough to verify.

npm run typecheck npm test npm run build Enter fullscreen mode Exit fullscreen mode These are project commands requested in the generation prompt, rather than built-in NEXUS commands. Confirm they exist and inspect what they run. If a check fails, use the captured-failure workflow in Step 7 before publishing the change.

Once the changes pass your checks, push them back from this folder:

nexus builder push --project " $PROJECT_ID " --from. nexus builder check --project " $PROJECT_ID " Enter fullscreen mode Exit fullscreen mode push synchronizes local edits with Builder. If it reports a conflict, resolve it before continuing. When files changed on both sides, the CLI can merge nonoverlapping edits and leave conflict markers where manual resolution is needed.

builder check performs static syntax and relative-import checks against the shared Builder files. It does not replace the local type checker, test suite, production build, or browser checks you just ran.

Refresh the Builder preview after a successful push. Repeat the search test with a term containing spaces, such as login.

For continuous local editing, run this from the pulled project folder:

nexus builder dev --project " $PROJECT_ID " --dir. --open Enter fullscreen mode Exit fullscreen mode The CLI starts a live sync session and attempts to open a supported editor if its launcher is available. If it cannot open one, open the folder manually.

You can now edit local files and use Builder chat in the same terminal session. Changes made in the browser Builder can also arrive in the local workspace through sync.

At the dev> prompt, inspect the session:

/status /diff Enter fullscreen mode Exit fullscreen mode Use /status to see local changes, incoming changes, and pending drafts. Use /diff to review the actual differences.

Finish one focused change before having another assistant rewrite the same files. Shared files still need coordination, even when synchronization is automatic.

/exit Enter fullscreen mode Exit fullscreen mode For a single sync pass instead of a running session, use your normal terminal:

nexus builder sync --project " $PROJECT_ID " --dir. Enter fullscreen mode Exit fullscreen mode Step 7: Fix a failed build using its actual output Suppose a change adds an invalid component prop and the production build fails. A useful AI fix starts with the files and error that produced that failure.

Start interactive Builder chat from the local project folder:

nexus builder chat --project " $PROJECT_ID " --dir. Enter fullscreen mode Exit fullscreen mode At the builder> prompt, capture the build:

/run --capture npm run build Enter fullscreen mode Exit fullscreen mode If it fails, ask Builder to work from that captured result:

/fix --last-run /diff /rerun Enter fullscreen mode Exit fullscreen mode Here is what each step does:

The proposed fix is applied locally as a pending draft. The shared Builder snapshot stays unchanged until you accept it. Automatic sync is held while the draft is pending.

If the rerun succeeds, run the other relevant checks before accepting:

/run npm run typecheck /run npm test Enter fullscreen mode Exit fullscreen mode Inspect the outputs. If the fix meets the requirements and the checks pass:

/accept Enter fullscreen mode Exit fullscreen mode If it is the wrong change:

/reject Enter fullscreen mode Exit fullscreen mode Acceptance saves the local draft as a shared Builder checkpoint, including earlier local edits that are part of that workspace. Review the full diff before accepting.

When the shared Builder project changed while you were testing, acceptance can stop to prevent overwriting newer work. Follow the CLI's instructions, resolve the differences, and retest against the updated files.

The captured-failure workflow is described on the NEXUS AI Builder page. It gives you an explicit sequence: capture, propose, inspect, rerun, and save.

Slash commands belong inside the interactive Builder session. Type /exit to return to your normal terminal before running standalone nexus commands.

nexus builder versions --project " $PROJECT_ID " nexus builder open --project " $PROJECT_ID " Enter fullscreen mode Exit fullscreen mode The versions list includes checkpoint message IDs. Keep the ID of a known working state with your project notes.

If you need to restore an earlier Builder file state, choose its actual message ID:

CHECKPOINT_ID = 'REPLACE_WITH_SELECTED_CHECKPOINT_MESSAGE_ID' nexus builder revert " $CHECKPOINT_ID " --project " $PROJECT_ID " Enter fullscreen mode Exit fullscreen mode Reverting changes the current Builder files and saves a new checkpoint. Sync the result locally and rerun the relevant checks. It does not restore a deployed database or change an already running deployment.

For the ticket prototype, finish with the five acceptance checks from the start of this guide. Check a narrow viewport as well as a desktop screen, and test the empty-result state in search.

Make sure your local changes have been accepted or successfully pushed before deploying. The deployment command uses the shared Builder snapshot, rather than uncommitted changes sitting only on your laptop.

nexus builder deploy \ --project " $PROJECT_ID " \ --name support-desk-demo \ --provider docker nexus deploy list --project " $PROJECT_ID " Enter fullscreen mode Exit fullscreen mode Here, --provider docker selects NEXUS AI managed deployment infrastructure. It is separate from the AI provider that generated your code.

builder deploy submits a new deployment and prints its ID. It does not run your local checks first, and this command does not have a --wait flag in CLI 4.3.2.

DEPLOYMENT_ID = 'REPLACE_WITH_THE_RETURNED_DEPLOYMENT_ID' nexus deploy status " $DEPLOYMENT_ID " --watch Enter fullscreen mode Exit fullscreen mode After inspecting the status, press Ctrl+C to stop watching. For a build failure, inspect build logs. For an app that starts but behaves incorrectly, inspect runtime logs:

nexus deploy logs " $DEPLOYMENT_ID " --type build --lines 100 nexus deploy logs " $DEPLOYMENT_ID " --type runtime --lines 100 Enter fullscreen mode Exit fullscreen mode Open the actual public URL from the status output. Create a ticket, search for it, change its status, and refresh the page.

Because this prototype uses localStorage, you will create fresh demo records on the deployed origin. Records you made on the preview origin will not appear automatically.

Checkpoint: the deployed app passes the same user checks as the reviewed version. A submitted deployment request alone is not confirmation that the app works.

The CLI Builder guide covers project creation, file editing, checkpoints, preview links, and snapshot deployment.

Once several people need access to the same tickets, browser storage no longer meets the requirements. Treat that as a new feature with its own review and checks.

Ask Builder to plan the data change before implementing it:

Turn this ticket prototype into a team app using a backend and PostgreSQL through Prisma. Replace browser-local ticket storage with server-side persistence. Keep the current search and status behavior. Explain the schema, migration, environment requirements, and tests before changing files. Do not deploy the change yet. Enter fullscreen mode Exit fullscreen mode For a persistent-data app, Builder supports a Next.js and Prisma workflow. Add authentication and authorization as a separate follow-up so you can verify which users may access which tickets.

Database work introduces new acceptance checks: records must persist across sessions, permissions must hold, migrations must run against the intended database, and preview data must be distinguished from deployed data. Follow the generated environment instructions and configure credentials through the platform's secure settings.

Before migrating an existing database, take a backup and test the recovery procedure. See the companion database backup and migration guide, including its current engine-specific caveats.

Use the source deployment path when your existing repository is the release source. You do not need to create a duplicate Builder project just to deploy it.

After committing and pushing the code you intend to deploy, replace the repository URL and branch below:

nexus deploy source \ --repo https://github.com/YOUR_USERNAME/YOUR_APP.git \ --branch main \ --name editor-built-app \ --provider docker \ --environment DEVELOPMENT \ --wait Enter fullscreen mode Exit fullscreen mode This is an alternative to the Builder snapshot deployment in Step 9. Select the path that matches the source you want to release.

For a private repository, configure repository access in NEXUS AI. For a database-backed app, configure its required database, environment, and migrations as part of that deployment setup.

The NEXUS AI developer workflow covers working in an editor, using GitHub, and deploying through developer tools.

No. Pull the Builder project and edit the local files in your preferred editor. Use push or live sync to return the changes to Builder.

They overlap in generating and editing code, but serve different parts of this workflow. The editor gives you direct local file work. Builder maintains the shared project, conversation, and browser preview. The CLI connects those files and release actions.

In interactive chat with a local checkout attached, proposed file changes use the pending-draft workflow. You review and accept them before they become the shared checkpoint. Other Builder operations, such as browser edits or standalone snapshot commands, have their own effects; check the source you are changing.

In interactive Builder chat or dev mode, /provider and /model show available choices. Access depends on your account and configured providers. These settings control code generation, while the deployment provider selects where the app runs.

Use checkpoints to revisit Builder file states. Keep Git for the repository history, branches, review, and CI workflow your team needs. Neither a source checkpoint nor a Git commit is a database backup.

Confirm deployment status, inspect relevant logs, and complete the main user journey on the public URL. For apps with a database or authentication, include persistence and access-control checks.

Choose a small app or a single change in an existing project. Write down the expected behavior, build the first version, and keep the files visible in your editor.

Then use the same loop each time: inspect the change, run the relevant checks, save the reviewed version, and verify it after deployment. Explore NEXUS AI Builder when you are ready to connect that workflow to your next app.