Welcome to App Builder
Chat with the builder, answer a few questions, and get a fully working deployable web app in seconds — powered by Claude AI.
Open the Builder →App Builder turns a plain English conversation into a complete, working web application. Instead of writing a single long prompt, you chat with the builder — it asks you short questions to understand what you want, then builds the app when you're ready.
What gets generated
Every generated app is a single self-contained HTML file with all CSS and JavaScript inlined. No frameworks, no build steps — just a file that works in any browser.
What kinds of apps can I build?
- Todo lists, kanban boards, task trackers
- Data entry forms and trackers
- Calculators and converters
- Dashboards and reporting views
- Simple games and quizzes
- Any app that stores data (DB auto-enables when you ask)
- Apps that use AI features (Claude is available inside generated apps)
Type what you want to build in the chat box at the top. e.g. "I want to build a todo app".
The builder asks one question at a time — layout, features, style, data storage. Answer in plain English.
Once enough info is gathered, a summary card appears and the green Build It button activates. Click it to generate your app.
Interact with the preview. Use the refinement bar to describe changes. Click Publish to make it live at a public URL.
The builder uses a short back-and-forth conversation to gather your requirements before building. This produces much better results than a single long prompt.
How it works
The builder asks one focused question at a time — typically 2–4 questions — then summarises what it understood and shows a Build It button.
Example conversation
| Who | Message |
|---|---|
| You | I want to build a todo app |
| Builder | Great! Would you like a kanban board or a simple list? |
| You | Kanban |
| Builder | Do you want tasks to save across page reloads? |
| You | Yes |
| Builder | 📋 Ready to build: A kanban board with columns… [Build It button appears] |
Skipping ahead
If you already know exactly what you want, just say so in detail in your first message. The builder will recognise it has enough information and offer to build immediately.
You can also say "done", "build it", or "go ahead" at any point to trigger the build with what's been gathered so far.
Database auto-enable
If you mention saving or persisting data during the conversation, the Use DB toggle is automatically switched on — you don't need to do it manually.
| Model | Best for | Speed |
|---|---|---|
| Sonnet 4.6 Default | Most apps — great balance of quality and speed | Fast |
| Opus 4.6 | Complex apps with lots of logic, multi-step workflows, or intricate UI | Slower |
| Haiku 4.5 | Simple apps, quick prototypes, testing ideas fast | Fastest |
Select the model from the dropdown in the controls row before clicking Build It. On mobile, the model selector is hidden and defaults to Sonnet 4.6.
After the app is built, the chat area collapses and a Refine bar appears. Any message you type here is applied as a change on top of the current app — Claude sees the existing code and modifies it.
Examples of refinement prompts
- "Make the button red and larger"
- "Add a search bar at the top"
- "Add an export to CSV button"
- "Change the layout to two columns"
- "Add form validation — email field must be valid"
By default, generated apps are in-memory only — data is lost when the page is refreshed. Enable the Use DB toggle to tell Claude to build in real data persistence.
Auto-enable during chat
If you mention saving or storing data during the requirements conversation (e.g. "yes I want to save tasks"), the DB toggle turns on automatically.
Manual enable
You can also toggle Use DB on manually in the controls row before clicking Build It.
Choosing a backend
Click the ⚙ gear button next to the Use DB toggle to open Database Settings.
| Backend | When to use |
|---|---|
| SQLite Default | Simple personal use. Data is stored as a file on the server. No setup needed. |
| PostgreSQL | Shared or production use. Data is stored in your own database. Multiple users see the same data. |
Testing your connection
After entering your PostgreSQL connection string, click Test Connection in the settings modal to verify it works before building.
Your database settings are stored in your browser only — they are never saved on the server.
Format
postgresql://username:password@hostname:port/database?sslmode=require
AWS RDS example
postgresql://postgres:MyPassword@mydb.abc123.us-east-1.rds.amazonaws.com:5432/postgres?sslmode=require
Where to find each part (AWS RDS)
| Part | Where to find it |
|---|---|
username | The master username set when creating the RDS instance (often postgres) |
password | The master password set when creating the RDS instance |
hostname | RDS console → your instance → Endpoint |
port | Usually 5432 |
database | The initial DB name — often postgres if left as default |
Special characters in passwords
If your password contains special characters, they must be URL-encoded:
| Character | Encoded as |
|---|---|
@ | %40 |
# | %23 |
! | %21 |
$ | %24 |
% | %25 |
Example: password My@Pass#1 → My%40Pass%231
Every time you build an app, it's saved automatically to your browser's local storage. Click History in the top bar to open the history drawer.
- Click any history entry to restore that app into the editor and preview
- Restoring an app puts you straight into refinement mode
- Click the 🗑 icon on any entry to delete it
- History is stored in your browser only — it won't appear on other devices or browsers
- Up to 30 apps are kept; older ones are removed automatically
The Publish button activates once an app has been generated.
A modal will appear asking for an app name.
Use lowercase letters, numbers, and hyphens. Example: my-expense-tracker. This becomes part of the URL.
The app is saved to the server and accessible at https://helloglobal.us/your-app-name.html instantly.
Updating a published app
To update a published app, refine the current version and publish again using the same name. The existing file will be overwritten.
App Builder is fully usable on mobile. On screens up to 1024px wide (phones and tablets), the layout automatically switches to a mobile-friendly view:
- The requirements chat and preview are shown — the code panel is hidden
- The topbar is compacted — non-essential buttons are hidden
- Buttons use icon symbols (→ Send, ▶ Build It, ■ Stop) to save space
- The Help panel resizes to fit the screen width
Say "done" to skip ahead
If you've described enough in the chat, just say "done" or "build it" and the builder will generate immediately without asking more questions.
Use the Name field early
Enter a name in the Name field before building. This makes publishing faster and keeps your history organised.
Edit the code directly (desktop)
The code panel on the left is editable. You can make small manual tweaks — fix a typo, change a colour — without re-generating. The preview updates when you click ↻ Refresh.
Drag the divider (desktop)
The vertical divider between the code panel and the preview can be dragged left or right to give more space to whichever panel you're focused on.
Press Enter to send
In the chat box, press Enter to send your message. Use Shift + Enter to add a new line without sending.
Stop generation early
If the output looks wrong, click the ■ Stop button (or ■ on mobile) to cancel generation mid-stream.
Ask for AI features inside your app
Generated apps can call Claude themselves. Just mention it during the chat — for example: "add a button that uses AI to summarise the notes". The app will use the builder's AI connection automatically.
Build It button never appears
Keep answering the builder's questions. After 2–4 exchanges it will show the summary and the Build It button. You can also type "done" or "build it" to trigger it immediately.
The preview is blank
Click ↻ Refresh in the preview panel header. If still blank, try refining with "fix any JavaScript errors" or rebuild with a slightly different description.
Buttons don't work in the preview
The preview runs in a sandboxed iframe. Most features work, but if you see issues, publish the app and test it at its live URL instead.
DB save failed
- PostgreSQL: Open ⚙ DB Settings and click Test Connection. Check the error message — it's usually a wrong password, incorrect hostname, or a special character in the password that needs URL-encoding.
- SQLite: Should always work. If not, the server may be down — refresh the page and check the status bar at the bottom.
PostgreSQL connection fails
- Check the password — special characters must be URL-encoded (see DB Connection String)
- Check the hostname — copy it directly from the RDS console Endpoint field
- Make sure the RDS security group allows inbound connections on port 5432 from the server's IP
- Try
sslmode=requireinstead ofsslmode=verify-full
No API key detected
The status bar shows a yellow warning if no API key is configured on the server. Contact your server administrator to set the ANTHROPIC_API_KEY environment variable.
Published app shows 404
Make sure the app name contains only lowercase letters, numbers, and hyphens. Re-publish if you changed the name.