USER'S GUIDE

Where Imagination Meets Innovation.

SPARK103 turns a chat prompt into a Vite + React app: it writes the files, checks the build, and streams a live preview. This guide covers building, sharing samples, and recovering when something goes wrong.

Get started

Sign in from the home page with Google, GitHub, or Vercel, create an email and password account, or continue as a guest. Either way you get a project dashboard at /projects.

Create a project (Vite + React is the default), then describe the app in chat. SPARK103 writes files, runs a verify pass, and starts a live sandbox preview in the right-hand pane.

Credits are shown on your projects page and under Usage. Generation, preview, publish, and deploy spend credits. If a run stops with insufficient credits, buy more from the dashboard and send the prompt again.

Samples, remix, and reuse a prompt

The home page shows featured apps made with SPARK103. Explore lists every public app. Open a card to see the published snapshot and the original prompt.

Action	What it does
Remix this app	Copies the sample files into a new private project in your account. Env vars and .env files are not copied. You can keep editing from there.
Use this prompt	Creates a blank project and starts a new generation from the sample’s first prompt — SPARK103 rebuilds the app from scratch.

If you are signed out, SPARK103 sends you to sign in (Google, GitHub, Vercel, email, or guest), then finishes the remix or prompt. Your copy is always private until you choose to share it.

The IDE

Each project opens a three-pane workspace: chat on the left, files in the middle, live preview and console on the right.

Area	What to use it for
Chat	Describe features, attach screenshots or source files, stop a run, or restore an earlier checkpoint from a message.
File tree and editor	Inspect diffs, edit by hand, lock a file so later AI turns cannot overwrite it, import a ZIP, or download the project.
Preview	The running Vite app in an E2B sandbox. Use Restart preview if the sandbox expired. Device widths (390 / 768 / Full) are in the preview toolbar.
Console	Compiler and runtime output from the sandbox. Check this before you re-prompt.

SPARK103 does not treat a run as done until verify passes (TypeScript, and a production build when you deploy). If verify fails, keep prompting with the console error — or just say “fix the build.”

Preview, publish, and deploy

These are three different URLs. Mixing them up is the usual source of “it works in the IDE but not in the other tab.”

Kind	When to use it	How long it lasts
Live preview	While you are building. Watch it in the IDE Preview pane. Copy the live preview link from Project ▾ if you need to share it.	The sandbox sleeps after idle time (about 20 minutes) and E2B VMs last about 30 minutes. Restart preview for a fresh URL. Do not bookmark these links.
Publish app	A static snapshot at /apps/your-slug. Required before you can make the project public. Gallery cards iframe this URL.	Stays up until you publish again or unlist the project.
Deploy	Push the app to your own Vercel or Netlify account (Project ▾ → Deploy). Set env vars in the deploy dialog first if the app needs them.	Whatever that host keeps live. Independent of SPARK103 preview.

Private and public

There are two visibility settings, both under Project ▾.

Setting	Options	Meaning
Project visibility	Private or Public	Private is only you. Public appears on Explore and can be remixed. You must Publish app first. Public does not put secrets or env vars on the listing.
Preview visibility	Private, unlisted, or public	Controls who can open the live sandbox URL. Unlisted works with the link; private needs an access token. This is not the Explore gallery — sandboxes still expire.

To share a sample that stays up: Publish app, then set project visibility to public. SPARK103 will refuse public if it finds secret-looking values in files (API keys, .env, private keys). Remove those, store real secrets as env vars instead, and try again.

Env vars and secrets

Use the deploy / env dialog to set keys like VITE_* or NEXT_PUBLIC_* for client apps, and secret server keys when you deploy. SPARK103 stores secret values encrypted and never copies them when someone remixes your public app.

Do not paste API keys into source files, prompts you plan to share, or .env files in the tree if you might make the project public. Ask chat to use setEnv rather than writing secrets into code.

How to prompt

Same IDE, same loop, same file-based approach. Stronger models infer more from context; faster models fill gaps by inventing. Be explicit either way — name the file, the element, and what not to touch.

Attach a logo or screenshot if you have one, then tell SPARK103 to use that file path. Vague “add a logo” prompts often produce a made-up SVG.

Reusable prompt template

1. WHAT to change: exact file, exact element or function
2. HOW to reference it: exact path and syntax
3. WHAT NOT to touch: list what should stay untouched

In App.tsx, replace the header logo <img> tag.
Use /logo.png directly: <img src="/logo.png" alt="App logo" className="main-logo" />.
Do not redraw, regenerate, or substitute a different icon. Do not modify navigation, routes, or footer in this same file.

Add an uploaded logo

Use /logo.png as the header logo. Reference it as <img src="/logo.png" alt="App logo" />. Do not redraw, regenerate, or substitute a different icon.

Match existing brand colors

Update .cta-primary and .cta-secondary in App.css to use the existing --color-primary and --color-secondary CSS variables already defined in :root. Do not introduce new color values.

Fix one bug without extra refactors

In ProfileSwipe.tsx, the onClick handler for .demo-btn.like isn't firing. Fix only that handler. Do not modify styling, other components, or unrelated logic in this file.

Keep prompts small. “Polish the whole app” will retouch headers and assets you already fixed. One screen or one component per turn is slower to type and faster overall.

Protect your progress

Lock files you edited by hand so later chat turns cannot overwrite them. Click the lock if SPARK103 needs to patch that path.
Undo last generation restores the file checkpoint from before that turn. Use it immediately if a broad prompt wrecks something.
Checkpoints are saved with chat messages. Restore from a message, or from Project ▾ → Other checkpoints.
Download ZIP regularly. In-app history is convenient; it is not your only backup.
Don't bookmark live preview URLs. They go stale. For something durable, Publish app (or Deploy).

Troubleshooting

Match what you see before re-prompting. The console (bottom right) has the real error; the browser tab often does not.

Symptom	Likely cause	Fix
Broken image / alt text instead of a picture	<img src> points to a file that is not at that path	Check the file tree for the real name, then correct the path (often /logo.png in public/)
Logo was fixed, then reverted	A later prompt rewrote the same file	Re-apply the fix, then lock the file — see Protect your progress
Preview fine in the IDE, wrong in another tab	The other tab is an old sandbox URL	Always open a fresh preview from Project ▾. Restart preview issues a new URL.
“Unauthorized” on a preview URL	Sandbox expired, or preview visibility is private	Open preview from the IDE. If it is private, stay signed in as the owner or use the access link from Copy live preview.
Cannot make the project public	Not published yet, or files look like they contain secrets	Publish app first. Remove .env files and hardcoded API keys, then try Public again.
Remix created an empty-looking app	The sample had no files, or only secret files which are stripped	Use this prompt instead to regenerate, or pick a sample that shows a published preview.
500 / Failed to load resource	Generic browser message	Read the CONSOLE panel for file and line. Prompt with that error text.
Failed to resolve dependency	Import without install in the sandbox	The repair pass usually installs it. If not: “Install [package], it’s imported but missing.”
Insufficient credits	The run costs more than your balance	Buy credits from the projects page or Usage, then send the prompt again.

Ready? Start building · Explore public apps