Build Your Own AI App Builder

Build a prompt-to-app builder with Claude, live previews, versions and forks.

Introduction

30 Second Summary

Turning an app idea into something you can click usually means juggling several tools. A risky change can also wipe out the version that already worked.

In this project, you will build an AI app builder that turns a written request into a working app. You will watch the result appear in a live preview while each project runs in its own sandbox.

What You'll Build

You will type a small app idea, watch a coding agent build it, and see the finished interface appear in a live preview.

By the end of this project, you'll have:

Build from a prompt while the agent streams its response and updates the live preview.
Restore working versions after an unwanted change takes the app in the wrong direction.
Compare project forks side by side as you explore two directions from the same starting point.
Secret Mission: Add pause and wake controls so you can stop an idle project sandbox and resume it from the app.

Are there any prerequisites?

You need Node.js plus a free Upstash account. You also need an Anthropic API key for the coding agent.

Before We Start

Your AI app builder eventually turns a prompt into a live app. That experience depends on a few local tools being ready first.

This readiness check confirms your browser can load the project. It also prepares Visual Studio Code with Node.js for the local app.

In this step, get ready to:

Confirm a modern browser can load the project.
Make a code editor available for the project.
Verify Node.js from the editor's terminal.

Confirm your browser and editor

The browser carries the builder interface plus its live previews. Your editor gives you one place to manage the application files.

Refresh this project page in your browser.

You should see the project reload successfully. This confirms the browser is ready for the live preview you build later.

Choose the tab that matches the editor setup on your computer.

✔️ I already have Visual Studio Code

Press Cmd+Space on macOS or the Windows key on Windows to open system search.
Type Visual Studio Code into the search field.
Press Enter to launch the editor.

You should see the Visual Studio Code welcome screen or an empty editor window.

ⓧ I need a code editor

Visual Studio Code is available for macOS, Windows and Linux. Choose your operating system for the installation steps.

macOS

Visit the official Visual Studio Code download page.
Download the Universal .dmg for macOS.
Open the downloaded .dmg file.
Drag Visual Studio Code.app to the Applications folder.
Press Cmd+Space to open Spotlight.
Type Visual Studio Code into Spotlight.
Press Enter to launch the editor.

You should see the Visual Studio Code welcome screen.

Windows

Visit the official Visual Studio Code download page.
Download the User Installer that matches your processor.
Run the downloaded installer.
Complete the installer with its default options.
Press the Windows key to open system search.
Type Visual Studio Code into the search field.
Press Enter to launch the editor.

You should see the Visual Studio Code welcome screen.

Linux

Visit the official Visual Studio Code download page.
Select the package row that matches your Linux distribution.
Download the package that matches your processor.
Open the downloaded package with your system's software installer.
Complete the installation.
Launch Visual Studio Code from your applications menu.

You should see the Visual Studio Code welcome screen.

The open welcome screen confirms that your editor is installed and ready.

Good progress. Your browser can load the project page. Your editor is ready for the application files.

Check Node.js in the terminal

Node.js runs the Next.js tooling used by the builder. The editor's integrated terminal lets you check Node.js without leaving Visual Studio Code.

Before you run the check, make a quick prediction about whether the terminal can find Node.js.

Select Terminal from the Visual Studio Code menu bar.
Select New Terminal.
Check whether Node.js is available by running this command:

node --version

What Does This Command Check?

The node command starts the Node.js executable installed on your computer.
The --version flag asks Node.js to print its installed version.
A printed version number proves that Visual Studio Code can reach Node.js.

The terminal now shows either a Node.js version number or a message that the command could not be found.

✔️ I see a version number

That's the local toolchain connected. Visual Studio Code can reach Node.js from its integrated terminal.

ⓧ Command not found

A missing command means Node.js is not available to the terminal. The LTS release provides a supported foundation for the project.

macOS

The installer can request your computer password. That approval stays inside macOS.

Visit the official Node.js download page.
Select the LTS release.
Download the installer for macOS.
Open the downloaded installer.
Approve the operating system prompt if it appears.
Complete the installation with its default options.

Windows

The installer can request administrator approval. That approval stays inside Windows.

Visit the official Node.js download page.
Select the LTS release.
Download the installer for Windows.
Run the downloaded installer.
Approve the operating system prompt if it appears.
Complete the installation with its default options.

Linux

The Node.js download page lists installation methods for Linux. Use the method that matches your distribution.

Visit the official Node.js download page.
Select the LTS release.
Choose an installation method listed for Linux.
Follow the displayed installation steps for your distribution.

Close Visual Studio Code.
Reopen Visual Studio Code through your operating system's app search.
Select Terminal from the menu bar.
Select New Terminal.
Check the new installation by running the command again:

node --version

What Does This Command Confirm?

Restarting the editor gives its terminal the latest system configuration. The command should now print the installed Node.js version.

You should now see a version number in the terminal.

Still Missing Node.js?

Close every open Visual Studio Code window.
Reopen the editor after confirming the Node.js installer finished successfully.
Confirm that you selected the LTS release on the official download page.

Ask for help with the local setup: Help me diagnose why Visual Studio Code cannot find Node.js after installation.

That's your local foundation ready. The browser can show the builder. The editor can reach Node.js from its terminal.

Your local toolkit is ready. Next, you will create the cloud resources and credentials that connect the builder.

Configure Your API Keys

The builder needs a secure way to identify itself to every outside service. Credentials provide that proof.

Upstash Redis keeps project records. Upstash Box provides an isolated workspace for each generated app.

Anthropic powers the coding agent. A local environment file gives the Next.js app one private place to read every credential.

In this step, get ready to:

Create a free Upstash account with a Redis database.
Generate the Box API key plus the Anthropic API key.
Store every connection value in .env.local.

Create the Redis database

Your Upstash account owns the database. It also controls the Box access you configure next.

The sign-up flow may ask you to verify your email or authorize a sign-in provider. The browser returns you to the console after that check.

Visit the Upstash Console in your browser.
Complete the free account sign-up flow shown on the page.

You're signed in. This account now becomes the home for your app builder's cloud resources.

Select Redis from the console navigation.
Click + Create Database in the upper right corner.
Enter ai-app-builder in the Database Name field.
Choose the Primary Region closest to you.
Click Next.
Select the no-cost plan shown for your account.
Confirm the plan selection to create the database.

You'll see the database running in its Details view. This confirms that Redis is ready to provide connection credentials.

Return to the Redis database list using the console navigation.

You'll see ai-app-builder in the database list. Your account now owns the storage service for the app.

Create the API keys

A Box API key authorizes the app to manage project sandboxes. An Anthropic API key authorizes the coding agent to respond to prompts.

Keep Your Credentials Private

These keys authorize requests under your accounts. Keep the reveal pages private while you copy each value.

Never paste a key into a validation or screenshot. The final checkpoint only asks about the credential names.

Open the official Upstash Box quickstart in a new browser tab.
Follow the Get your API key step to create a Box API key in your signed-in Upstash account.
Copy the new Box API key when the console displays it.
Keep the Box key tab open for the environment file.

One key is ready. Your app can now authenticate with the Box service.

Open the official Anthropic API keys page in a new browser tab.
Sign in to your Anthropic account using the page's account flow.
Use the key creation flow in Account Settings to generate an API key.
Copy the new Anthropic API key when the page displays it.
Keep the Anthropic key tab open for the environment file.

Both provider keys are now available. The next move stores them where the app can read them.

Store the credentials locally

Environment variables keep configuration outside the application source. The .env.local file stores the four values used by this project.

Each line uses the NAME=value format. The value starts immediately after the equals sign.

Use your code editor's folder picker to open the folder that contains the Next.js app's package.json file.
Create .env.local beside package.json using the file sidebar's new-file control.
Return to the Details view for the ai-app-builder Redis database.
Locate the REST API section on the database page.
Copy the value for UPSTASH_REDIS_REST_URL.
Set UPSTASH_REDIS_REST_URL to the copied URL in .env.local.
Copy the value for UPSTASH_REDIS_REST_TOKEN.
Set UPSTASH_REDIS_REST_TOKEN to the copied token in .env.local.

What Do These Redis Values Do?

The REST URL identifies your database endpoint. The REST token proves that the app has permission to access that database.

Together, these values let the app store project metadata plus chat history without placing credentials in the source files.

Return to the Box key tab from earlier.
Copy the Box API key again if it is still displayed.
Set UPSTASH_BOX_API_KEY to the copied Box key in .env.local.
Return to the Anthropic key tab from earlier.
Copy the Anthropic API key again if it is still displayed.
Set ANTHROPIC_API_KEY to the copied Anthropic key in .env.local.
Save .env.local.

✔️ Awesome, I've got everything!

Excellent. Your local environment file now connects the app to Redis storage, Box sandboxes and the Anthropic coding agent.

ⓧ I'd like to double check the full code

Compare the structure of .env.local without sharing or replacing your real values.

Confirm UPSTASH_REDIS_REST_URL contains the Redis connection URL.
Confirm UPSTASH_REDIS_REST_TOKEN contains the Redis connection token.
Confirm UPSTASH_BOX_API_KEY contains the Box API key created in your signed-in Upstash account.
Confirm ANTHROPIC_API_KEY contains the Anthropic API key.
Confirm .env.local sits beside the Next.js app's package.json file.

Before you check, do you expect every credential name to have a non-empty value?

Inspect the four variable names in .env.local without copying their values anywhere else.

You'll see four named variables with a value after every equals sign. This confirms that the Redis credentials, Box API key and Anthropic API key are available to the app.

Is a Credential Missing?

Return to the Redis database's REST API section if either Redis value is blank. Copy the matching value directly into .env.local.

Create a fresh key through the same provider's key page if a key is no longer visible. Replace only the matching value in .env.local.

Help me check my environment file without exposing my credentials.

Your credentials are ready. Next, you'll build the reusable app template that every new project starts from.

Create the Starter Template

Your Upstash Redis database plus service credentials are ready. A fresh project would still spend time installing its frontend dependencies.

You will prepare one Upstash Box with Vite. The starter also includes React plus Tailwind CSS. A reusable snapshot turns that prepared environment into the starting point for future projects.

In this step, get ready to:

Create a Node.js box for the starter environment.
Install the frontend stack inside the box.
Capture the prepared box as a reusable snapshot.

Create the seed box

The seed box provides an isolated filesystem for preparing the starter. Its files become the contents of the snapshot.

Switch back to the signed-in Upstash console from the previous step.
Select Box from the product list.
Choose the control for creating a new box.
Select Node as the runtime.
Create the box.

You should see the new box on its details page with a running status. That box is now the clean workspace for your reusable starter.

Install the starter stack

Every box includes a Linux shell. You will connect through SSH so the setup runs inside the box.

Select the SSH control on the box details page.
Copy the connection command shown by the console.
Open a new terminal window using your operating system's app search.
Paste the copied connection command into the terminal.
Press Enter to connect.
Approve the host confirmation if your terminal asks for it.

Your terminal prompt now belongs to the remote box. Commands from this point change the box filesystem.

Create the Vite project inside the box by running this command:

cd /workspace/home && npx -y create-vite@latest app --template react-ts --no-interactive

What Does This Command Do?

The create-vite@latest scaffolder creates the frontend project.
The react-ts template supplies React with TypeScript support.
The --no-interactive flag completes the scaffold without pausing for setup questions.
The finished project lives at /workspace/home/app.

Confirm the terminal reports that the project was created inside /workspace/home/app.

Did the Scaffold Fail?

Confirm that the SSH connection still points to the new Node box. An existing /workspace/home/app folder means the box already contains a scaffold.

Use the fresh box created in this step before retrying the command.

Help me diagnose the Vite scaffold inside my Upstash Box.

The scaffold contains React source files plus scripts for a development server. Installing its packages prepares that server to run.

Install the scaffold dependencies plus Tailwind by running this command:

cd /workspace/home/app && npm install && npm install tailwindcss @tailwindcss/vite

What Gets Installed?

The first npm install resolves the dependencies declared by the Vite scaffold.
The second installation adds tailwindcss plus its Vite integration.
The installed packages remain inside the box when you capture its snapshot.

The shell prompt returns after the packages finish installing. The prepared environment now contains Vite, React, and Tailwind.

Did the Installation Stop?

Confirm that the scaffold command completed before installing the packages. The installation must run from /workspace/home/app.

A disconnected SSH session also interrupts the installation. Reconnect to the same box before retrying it.

Help me diagnose the dependency installation.

Before you start the server, do you expect the terminal to return immediately or stay attached to the running process?

Start the development server by running this command:

npm run dev

What Does This Command Prove?

The command starts the Vite development server from the prepared app. A successful start proves that the scaffold plus its installed dependencies can run inside the box.

You should see a local development URL in the terminal. The terminal stays attached because the server keeps running.

Stop the development server by pressing Ctrl+C.

Did the Server Fail to Start?

Confirm that the dependency installation finished successfully. Confirm that the current folder is /workspace/home/app.

Help me start the development server.

Capture the reusable snapshot

A snapshot preserves the prepared filesystem after the server test. New projects can begin with these files plus installed packages already in place.

Snapshot creation took about 36 seconds in the published Upstash test. A short wait here is part of capturing the full workspace.

Switch back to the Upstash console.
Select the seed box you prepared.
Open its snapshot controls.
Choose the control for creating a snapshot.
Enter vite-react-tailwind as the snapshot name.
Create the snapshot.

Before you refresh the snapshot list, do you expect to see the temporary box name or the reusable snapshot name?

Open the snapshot list in the Upstash console.
Refresh the list after the capture finishes.

You should see vite-react-tailwind with a ready status. You now have a reusable Vite project with React plus Tailwind installed.

Is the Snapshot Missing?

Confirm that you returned to the same Upstash account used to create the box. Refresh the snapshot list after the capture finishes.

Help me find my template snapshot.

Your starter environment is saved as a reusable snapshot. Next, you will create a new project from it and load the first live preview.

Launch a New Project

Your reusable Upstash Box snapshot already holds a Vite app built with React plus Tailwind. This step turns that saved starting point into an isolated project.

The Next.js builder reads the credentials you stored earlier. A successful launch proves the local interface can write to Upstash Redis through the Box API.

In this step, get ready to:

Start the local Next.js builder.
Create Project 1 from the reusable template.
Verify the project through its Box-backed live preview.

Start the local builder

The local development server exposes the builder in your browser. The app loads its service credentials from .env.local when this server starts.

Open your code editor's integrated terminal for the Next.js app folder that contains .env.local.
Start the local development server by running this command:

npm run dev

What Does This Command Do?

The command starts the development script defined by the Next.js app.
Next.js serves the builder through a local browser address.
The running process keeps handling requests until you stop it.

The terminal prints the local address for the builder. Keep this terminal process running throughout the step.

Open http://localhost:3000 in your browser.

You'll see the AI app builder interface. Your local builder is now online and ready to create a Box-backed project.

Does the Builder Fail to Load?

Confirm the terminal is running from the same app folder as .env.local.
Use the local address printed in the terminal if port 3000 was unavailable.
Check that the development server process is still running before refreshing the browser.

Get help diagnosing why the local Next.js builder did not load.

Create Project 1 from the template

The template snapshot lets each new Box begin with the starter dependencies already installed. The builder only needs to create the workspace plus start its development server.

Expect an 8 to 15 second wait while Upstash Box creates the project workspace. A quiet loading preview during this window is normal.

Switch back to the browser tab showing the local builder.
Enter Project 1 in the project name field.
Choose the reusable template snapshot you created earlier.
Submit the project creation form.

You'll see Project 1 added to the builder. Its preview begins loading from the new Box.

What Happens During Creation?

The builder writes a project record to Upstash Redis.
The Box.fromSnapshot() method creates an isolated Box from your prepared template.
The initCommand starts the Vite development server whenever the Box starts.
A public URL for port 5173 carries the running starter app into the preview.

Is Project Creation Stuck?

Confirm the local development server is still running.
Check that .env.local remains in the Next.js app folder.
Return to the Upstash console from earlier to confirm the template snapshot is still listed.

Get help diagnosing a project that remains on its loading state.

Verify the Box and live preview

Before you check, predict whether the local builder plus the Upstash console will both confirm that Project 1 exists.

Refresh the browser tab running the local builder.

You'll still see Project 1 listed. Its return after the refresh confirms that the builder loaded the saved project record from Upstash Redis.

Return to the signed-in Upstash console from earlier.
Open the list of Boxes in your account.

You'll see a project-specific Box separate from the reusable template snapshot. This confirms that Project 1 has its own isolated workspace.

Return to the local builder.
Select Project 1.

You'll see the starter app from your template inside the live preview. The visible page confirms that the Box development server is running.

That's the full launch confirmed. The saved project now has its own Box plus a working preview.

Your builder can now launch isolated projects from one reusable template. Next, you will prompt the coding agent and watch it change the preview.

Build with the Coding Agent

Your Next.js app builder already loads Project 1 from its own Upstash Box. The next goal is to turn the starter screen into a small app through Claude Code.

A concrete target gives the agent a result it can build. Clear acceptance criteria give you a checklist for the live preview.

In this step, get ready to:

Send a detailed small-app request to Project 1.
Watch the agent's streamed response while it changes the Box project files.
Test the generated app through the live preview.

Describe the small app

Your prompt acts as a lightweight specification. Each requested interface element gives Claude Code an observable success condition.

Return to Project 1's chat panel beside the live preview.
Select the prompt input.
Enter Build a small habit tracker. Add a text input labeled New habit. Add an Add Habit button. Show habits in a list. Let each habit be marked complete. Save habits in localStorage. Replace the starter screen with the finished app. into the prompt input.

In published test runs, a first small-app prompt took 36 to 49 seconds. A short pause is expected while the agent changes files inside the Box.

Submit the prompt using the send control beside the input.

You'll see response text arrive progressively. File-edit activity shows that Claude Code is changing the project inside Project 1's Box.

How Does Streaming Help?

Streaming delivers each response chunk as the agent works. You can follow its progress before the full task finishes.

File-edit activity connects the response to real changes inside the Box. The live preview exposes the result of those changes.

Follow the streamed build

The response records how the agent interprets your requirements. The file-edit activity tells you when that plan becomes a project change.

Keep Project 1's chat panel in view.
Watch the streamed text for the agent's plan.
Watch the file-edit activity for project changes.
Keep the live preview in view.
Wait for Claude Code to report that the task is complete.

Your starter screen should change into a habit tracker. You should see a field labeled New habit plus an Add Habit button.

The page should also include a list area for habits. Each habit should have a control for marking it complete.

Good progress. Claude Code has turned your prompt into running project files inside the Box.

Is the Agent Still Quiet?

If no response arrives after about a minute, return to the terminal running your local builder. Check for a request failure or an authentication problem.

Confirm that the Anthropic API key entry remains present in .env.local. Keep the key value private.

If the response finishes without changing the preview, confirm that the file-edit activity appeared in the chat. Help me diagnose why my coding agent did not update the live preview.

Test the generated app

The live preview proves that the agent's edits produce a working app. The requested interactions give you a direct way to test the result.

Before you test it, which state do you expect the habit tracker to preserve after a refresh?

Select the New habit field in the live preview.
Enter Stretch for five minutes.
Click Add Habit.

You'll see Stretch for five minutes appear in the habit list.

Use the completion control beside Stretch for five minutes.

You'll see the habit change to its completed state.

Refresh the live preview.

You'll see the habit remain in the list. Its completed state should remain because the generated app saves habits in localStorage.

You have closed the full prompt-to-preview loop. Project 1 now contains an app created through your own coding agent.

Your generated app now responds inside Project 1's preview. Next, you will save this working state before deliberately changing it.

Save and Restore a Version

Project 1 now contains a working app created by your coding agent. Every new prompt can change the files inside its Upstash Box.

A saved version protects that working state before an experiment. You will prove the recovery loop through the live preview.

In this step, get ready to:

Save the working generated app as a version.
Submit a deliberately bad change to Project 1.
Restore Project 1 to the saved working version.

Save the working version

A snapshot preserves the Box files at one moment. It gives Project 1 a recovery point before another prompt changes those files.

Switch back to Project 1 in the locally running AI app builder.
Confirm its live preview still shows the generated small app.
Use Project 1's version-saving control in its workspace to save the current state.

You see a saved version listed for Project 1. It represents the working app currently shown in the live preview.

Good call. Project 1 now has a recovery point for the generated app.

Why Save Before Prompting?

The current Box can keep evolving as the agent edits its files. The saved snapshot preserves a known working state outside that editing loop.

This pattern gives you room to experiment with prompts. A poor result becomes reversible.

Make a deliberately bad change

A poor prompt can replace a useful interface with an unwanted result. This test creates an obvious visual regression with a clear recovery target.

Your saved version makes this deliberately damaging edit safe to test.

Before you submit the next prompt, which state do you think the agent edits?

The coding agent may take around a minute to finish. A continuing response stream shows that it is still working.

Switch back to Project 1's prompt field.
Enter a request to replace the generated app with a blank screen.
Submit the request through the prompt control.

You see the agent's response stream into Project 1.

Wait for the streamed response to finish.
Inspect the live preview.

The useful app is replaced by the blank screen you requested. This regression is intentional.

Does the Preview Still Show the Working App?

Wait for the streamed response to finish before judging the preview.
Submit a more explicit blank-screen request if the agent preserved part of the interface.

Ask for help if the response finishes without changing the preview: Help me diagnose why my coding agent finished its response without updating Project 1's live preview.

Restore the saved version

Restoring a snapshot replaces the current Box files with files from the saved moment. The development server reads those restored files into the live preview.

Return to Project 1's saved versions area.
Select the working version you created before the blank-screen prompt.

The selected version represents the generated app before the bad change.

Before you restore it, which version of the app do you expect the live preview to show?

Restore Project 1 from the selected version.
Wait for the live preview to reload.
Compare the restored preview with the working app you saved earlier.

You see the earlier generated app again in the live preview. The blank-screen change is gone.

That is the recovery loop proven. Project 1 can now survive an experiment that goes in the wrong direction.

What Did the Restore Change?

Project 1's Upstash Box files now match the saved snapshot. Its development server serves the restored working app.

The project record remains in Upstash Redis. The earlier prompts remain available.

The streamed Claude responses also remain available. The restore targets the project files captured by the version.

Does the Bad Change Remain?

Confirm you selected the version created before the blank-screen prompt.
Wait for the development server to reload the restored files.
Refresh Project 1 after the restore finishes.

Ask for help if the restored files do not appear in the preview: Help me diagnose why Project 1's live preview still shows the bad change after restoring its saved version.

Project 1 is back to its saved working state. Next, you will fork it to explore a different direction without changing the original project.

Fork the Project

Project 1 is safely back at its saved working state. Now you can branch from that stable point without risking the restored app.

A fork creates a separate path from the same working state. Each path needs its own Upstash Box so one experiment cannot overwrite the other.

In this step, get ready to:

Create Project 2 by forking Project 1.
Prompt Project 2 in a different direction.
Compare both projects through independent live previews.

Fork Project 1

Forking copies Project 1's restored state into Project 2. Upstash Redis stores the new project as an independent record.

Switch back to the locally running AI app builder from earlier.
Confirm Project 1 shows the restored working app in its live preview.
Open the project controls for Project 1.
Select Fork.
Wait for Project 2 to appear with its live preview.

You have your safe branch. Project 2 appears as a separate project with its own live preview.

Prompt Project 2 in a different direction

Project 2 starts from the restored working app. Its Claude coding agent can now explore another direction while Project 1 stays untouched.

Select Project 2 to make its prompt panel active.
Write a one-sentence prompt that gives the app a visibly different direction.
Enter that sentence in Project 2's prompt field.

Before you submit the prompt, which project do you expect the agent to modify?

Submit the request through the same prompt control you used for Project 1.
Watch Project 2's streamed agent response.
Wait for Project 2's live preview to refresh.

That is the fork taking its own path. Project 2's streamed response leads to a visible change in its preview.

Does Project 2 Stay Unchanged?

Confirm Project 2 is active before retrying the prompt. If the response streams but the preview stays the same, make the prompt request one visible change.

Check that .env.local still contains the Anthropic API key from earlier.

Help me diagnose why Project 2 is not changing.

Compare both projects side by side

Side-by-side previews make the fork's isolation visible. The comparison tests whether each project can hold a different state.

Display Project 1 beside Project 2 in the app.
Wait for both live previews to finish loading.

Before you compare the previews, do you expect the new prompt to appear in one project or both?

Refresh Project 1's live preview from its project card.
Refresh Project 2's live preview from its project card.
Compare the same visible feature in both previews.

Project 1 still shows the restored working app. Project 2 shows the different direction created by its new prompt.

What Does This Comparison Prove?

Each project has its own Box with an independent development server. A prompt sent to Project 2 changes its preview without rewriting Project 1.

That is the branching workflow complete. Project 2 now explores a new direction without touching Project 1.

Secret mission

Test an Idle Project Recovery

Put idle recovery to the test with Project 2. Wake its paused box through the live preview. Prove both projects kept their independent state.

Clean Up Your Resources

Choose whether to keep your resources running, pause them for later, or delete them entirely. This project uses cloud resources that can consume plan capacity or paid API usage.

Cost warning

Running Upstash Box sandboxes use plan capacity. Anthropic API requests can incur charges.

Delete boxes you no longer need to stay inside the free plan's 10-box limit. Keep only the resources you plan to reuse.

Resources you used:

The Project 1 Upstash Box running the restored generated app.
The Project 2 Upstash Box running the forked app.
The Project 1 saved version snapshot.
The reusable Upstash Box template snapshot.
The Upstash Redis database storing project metadata plus chat history.
The locally running Next.js AI app builder.
The local .env.local file containing the app's credentials.
The Upstash Box API key created for the app.

Keep everything running

No action needed. Choose this if you are still comparing the two apps or planning more prompts.

Leave the local Next.js app running.
Keep the Project 1 Upstash Box running with its restored app.
Keep the Project 2 Upstash Box running with its forked app.
Keep the Upstash Redis database available to the app.
Preserve the Project 1 saved version plus the reusable template snapshot.
Keep the Upstash Box API key active.
Keep .env.local with the local Next.js app.
Confirm that your signed-in Upstash account has no more than 10 boxes.

Pause - I'll come back to this later

Stop active processes while preserving the work needed for another session. Your two projects remain ready to continue later.

Stop the local Next.js app from its running terminal by pressing Ctrl+C.
Pause the Project 1 Upstash Box from its box page in the signed-in Upstash console.
Pause the Project 2 Upstash Box from its box page in the signed-in Upstash console.
Confirm that the Project 1 Upstash Box is no longer running.
Confirm that the Project 2 Upstash Box is no longer running.

Your Upstash Redis database remains available. Both snapshots plus your local credentials stay ready for another session.

Delete - I don't want to use this again

Deleting these resources is permanent. Choose this path only when you are finished with both projects.

Stop the local Next.js app from its running terminal by pressing Ctrl+C.

Remove the local credential file:

macOS

Use Finder to open the Next.js app folder from earlier.
Delete .env.local from the app folder.
Confirm that .env.local no longer appears in Finder.

Windows

Use File Explorer to open the Next.js app folder from earlier.
Delete .env.local from the app folder.
Confirm that .env.local no longer appears in File Explorer.

Linux

Use your file manager to open the Next.js app folder from earlier.
Delete .env.local from the app folder.
Confirm that .env.local no longer appears in your file manager.

Remove the two project environments:

Remove the Project 1 saved version from the version history you used to restore it.
Confirm that Project 1's version history no longer lists the saved version.
Remove the Project 1 Upstash Box from its box page in the signed-in Upstash console.
Confirm that the Upstash console no longer lists the Project 1 Upstash Box.
Remove the Project 2 Upstash Box from its box page in the signed-in Upstash console.
Confirm that the Upstash console no longer lists the Project 2 Upstash Box.

Remove the remaining cloud resources:

Delete the Upstash Redis database from its database page in the signed-in Upstash console.
Confirm that the Upstash console no longer lists the database.
Delete the reusable Upstash Box template snapshot from the snapshot page you used earlier.
Confirm that the Upstash console no longer lists the template snapshot.
Revoke the Upstash Box API key from the API key page you used earlier.
Confirm that the revoked key no longer appears as an active API key.

Nice Work!

You did it! Your Next.js AI app builder now turns prompts into live apps inside independent Upstash Box sandboxes.

You've learned how to:

Launch a live preview from a reusable template powered by Vite, React, and Tailwind inside an Upstash Box sandbox.
Watch streamed responses from the Claude coding agent as the preview changes. Keep each project's prompts and chat history in Upstash Redis.
Protect experiments with saved versions. Restore a working app after a bad change. Fork a project into an independent direction with its own live preview.
Secret Mission: Complete an optional extension that pushes your AI app builder skills further.

Ready to quiz yourself?