App builder

Build a website with App Builder

Start a website from a prompt or template, refine it through chat, inspect preview and code, and manage project history safely.

App and Website Builder is a $79 monthly workspace add on. It activates App
Builder and Orders for the workspace. See Plans, add ons, and pricing.

The interface is named App Builder, but its supported publishing scope is customer facing websites. Use it for landing pages, multi page business sites, portfolios, and storefronts connected to agaro. It does not build a separate ERP, CRM, admin platform, or standalone application. Products, orders, and forms run in agaro. Sign in for your site's visitors, and data they save, need a backend of your own: connect a Supabase project as described under Visitor accounts and saved data.

Start a project

Open App Builder from the sidebar. On the start screen you can enter a prompt or choose a starter template.

Good prompts describe:

The business and intended visitor
The site's main goal
Required pages or sections
Desired tone and visual direction
Products or services to feature
The primary call to action
Whether the site needs a contact form, booking link, or storefront

For example:

text

Build a five page website for a commercial HVAC company in Northern Virginia.
Include Home, Services, Maintenance Plans, About, and Contact. Use a calm,
professional style. The main action should request a service estimate.

Avoid asking the builder to rebuild business functions that already exist in agaro, such as a product database, orders, or a CRM. Those belong inside agaro modules.

Build mode and Plan mode

The prompt control offers two modes:

Mode	Result
Build	Starts generation immediately
Plan	Produces a plan for review before code generation

Use Plan for larger multi page sites or when the navigation and conversion path need agreement first. Use Build for a focused landing page or a small revision with clear requirements.

Starter templates

The start screen includes curated prompt templates. A template is not a static theme file. Selecting one launches a real generation using its prepared structure and visual direction.

After generation starts, the editor opens with chat and live preview. Each project keeps its own session, files, versions, and deployment state.

Refine through chat

Ask for one coherent change at a time. Effective requests identify both the target and the result:

text

On the home page, replace the generic features row with three service cards for
installation, emergency repair, and preventive maintenance. Keep the current
typography and spacing.

The builder streams progress and updates the preview. If the build fails its health check, automatic repair can run when enabled. An error card remains visible when repair cannot produce a healthy preview.

What the builder tells you

Before it builds, the builder answers you in the chat in everyday words, the way a designer talks to a client. On a first build the reply is two to four short sentences of plain prose, with no headings or lists. It says what the builder is making for you, meaning the pages and what a visitor can do there, and how the site will look and feel, for example warm and friendly, cream and saffron, big serif headlines.

If something you asked for cannot work in a browser, or no photo fits, the reply says so in plain words and says what the builder did instead.
The reply ends by naming the sample text you should replace, such as a testimonial, a figure, or a name, when there is any.
After a later edit, the builder starts with one to three plain sentences about what it changed.

The reply keeps technical detail out of what you read: no colour codes, file names, framework names, or token and class names. Those decisions go where only the builders read them.

DESIGN.md records the design

The design decisions behind a build are written to a file in the project called DESIGN.md. It is the design record: the kind of site and what it should evoke, the palette and the two fonts, the signature element, the sections and routes, the image plan, the sample copy to replace, and any known gaps. Every later edit reads it first, so a change stays consistent with the look the site was built from. In a build that splits the work between several agents, the plan's brief carries the same decisions to each agent, and DESIGN.md is written from the finished project.

You do not need to read or edit DESIGN.md. It appears in Code, marked Generated, with a note: "Written by the builder. Hand edits to its Known gaps, Data and Edit log sections are replaced the next time it builds." The brief, palette, and routes are kept as they are.

While a build runs

The chat panel shows what the builder is doing. The preview shows your page assembling in a browser frame, block by block, as each file is written. Each block is a real file of the plan: it is marked Waiting, Writing, Done, or Failed, and a line under the frame names the file being written now.

When several agents build at once, one row shows their faces with a summary such as "5 of 8 finished, 1 failed". Select it to open the list with each agent's role and status, and select an agent to open it in the side panel. Your choice to show the list or the faces is remembered.

While you wait, short tips rotate beside the working line, for example that you can type / to find a skill, type /goal to set a standing goal, use Select to pick a part of the preview, or send another message that waits in the queue.

If the AI service fails

If the AI service cannot write a file, the builder retries once, in a lighter form on the same or a smaller request, and shows which file it is retrying. If that fails too, the message names the files and ends with a reference you can quote to support. Some failures are not retried, and the message says so. If a build is interrupted before it finishes, or the project or the workspace details change while it runs, the builder asks you to send your request again.

Web search

The builder can search the web for current information while it works. An administrator controls this for the whole workspace under Workspace Settings → AI → Configuration → App Builder:

Web search for the App Builder is on by default. Turn it off and no build searches the web, whatever a project's own settings say.
Multi agent builds splits large builds between several agents that work at the same time. When it is off, every build runs as a single pass.

Inside a project, Settings → Agent sets the Max results per search (1 to 25) and the Context depth. The on or off choice is not asked there. It is the workspace setting above.

Preview and Code

Use the center control to switch between Preview, Code, and Settings. Preview shows the live sandbox. Code lets an authorized user inspect and edit project files. Settings opens in the same pane, as described under Settings.

Manual code changes are saved as a version so they can be restored through History. A live preview can restart when its temporary sandbox expires; restarting the preview does not delete the project files.

Use the page selector when a project exposes more than one route. If a page is removed, the preview returns to an available route rather than leaving the editor on a dead path.

Visual editing

The preview supports visual editing controls for selecting an element, editing supported text, and leaving a comment. Use chat for structural changes that affect component logic, navigation, data connection, or several pages.

Settings

Settings is a full view in the editor pane, not a popup. A list of sections sits beside the open section.

Section	What it holds
Publish	The guided publish flow: address, site information, review, and done. Searching for and buying a domain is there too. See Publish sites, SEO, domains, and analytics
Security	The security check that runs before publishing, with the facts about sharing, the published site, and custom domains
Analytics	Page view totals and the analytics identifier
Cloud	The Database connection and your AI Usage
Agent	Web search limits for builds in this project
Secrets	Credentials the app needs, stored encrypted
Collaboration	Who can open the app and who holds the right to edit it
SEO & AI search	Search metadata

A red dot beside Publish and Security means the security check found problems that block publishing.

Visitor accounts and saved data

If your app has sign in, or saves data for each visitor, it needs a backend. The builder says so with a This needs a backend prompt and a Connect Supabase button. Until a database is connected, sign in is a demo that only works in each visitor's browser, and saved data stays in that visitor's browser.

Open Settings → Cloud to connect your own Supabase project:

In Settings → Cloud, open Database, then select Connect Supabase account and sign in to Supabase on the page that opens. The sign in goes through Agaro's app connections, so your password and secret keys stay with Supabase. Connections need a plan that includes connectors.
Choose one of your Supabase projects. You can also paste the project URL and its publishable key instead.
Run the setup SQL in the Supabase SQL editor, then select Check again to confirm that the tables exist.

The app talks to Supabase with the public key only, so row level security is what keeps data private. The setup SQL turns it on for every table and writes the policies. Never paste a secret or service role key. Only a workspace manager can connect or disconnect a database. A paused Supabase project stops answering until you restore it in Supabase, and Supabase pauses free projects after a period of inactivity, so use a paid project for an app people rely on.

After you change the connection, publish again so the live site uses the new settings.

Export to GitHub

Use Export to GitHub in the export menu to push the whole project to a GitHub repository. Only a workspace manager can export.

Select Connect GitHub and sign in to GitHub on the page that opens. Your password and token stay with GitHub and Agaro's app connections. If you use more than one GitHub account, pick the one to export with, or use a different account.
Choose Existing repo and enter the repository address, or choose Create new repo, enter a name, and decide whether it is private.
Select Push files (or Create repo & push). The message reports how many files were pushed in how many commits and links to the repository.

Files already in the repository that are not part of this app are left untouched. If GitHub stops part way, export again to finish. It only adds or updates files.

History and recovery

Open History to review saved versions. Generation turns and manual code saves append version history. Restore a known healthy version when a later edit breaks the design or behavior.

Restoring a version changes the editable project state. It does not silently replace an already published deployment until you publish again.

Project management

Use Projects to switch between project sessions. The project list indicates published state where a live deployment exists.

Deleting a project moves it to Builder trash. You can restore it from the start screen. A deleted project that was already published can continue serving until it is explicitly unpublished, so delete and unpublish are separate decisions.

Storefront and CRM connections

Generated websites can use agaro's public storefront connection instead of inventing a second product database:

Product content comes from the workspace catalog.
Store orders return to the Orders module.
Online payment requires a ready tenant Stripe connection.
Supported lead capture connects visitors to the workspace CRM.

Before publishing a storefront, confirm that at least one sellable product exists and Stripe is connected under Settings → Payments. The publish dialog reports commerce readiness.