---
title: Use the web app
description: Start a chat, answer the agent's questions, steer the preview with annotations, restore earlier versions, and publish your app from the AINOX App web app.
---

Everything happens in a chat: you describe the app, the agent builds it in its own sandbox, and the preview beside the chat shows the result as it changes.

## Sign in

Open [AINOX App](https://app-builder.poring.arkcube.com) and select **Continue with Google**. Sign-in is open to Google accounts on `@inox.co.th` only.

## Build an app

1. **Describe it**

    Select **New Chat** in the sidebar, describe the app you want, and press Enter. Shift+Enter adds a new line.

    Every chat starts from a Vite, React, TypeScript, Tailwind CSS, and shadcn/ui project. Name another stack in your prompt if you want one.

2. **Answer the agent's questions**

    Before it starts a new app or a major feature, the agent often asks a few questions in a card labelled **Questions from the assistant**. Pick an option, or type an answer, then select **Next**. Optional questions can be skipped with **Skip**. The last button sends your answers, and the agent carries on.

3. **Watch it work**

    The reply lists each step as the agent takes it, such as installing what the app needs or checking for problems, and a task list above the message box tracks its plan. When the agent checks its own work, a screenshot of the app appears under that step.

    Select **Stop Generating** next to the message box to stop a reply.

4. **Ask for changes**

    Send a follow-up describing what to change. A reply ends after at most 40 steps; when it runs out, the agent summarizes what is done and what is left, so send another message to carry on.

## Use the preview

The preview panel runs the app's dev server. Its toolbar has:

- **Preview URL**: type a path and press Enter to open another route.
- **Reload Preview**: reload the page.
- **Dev Server**: see whether the server is running, and start or stop it.
- A viewport switch that cycles between desktop, tablet, and mobile sizes, on wide screens.

On a narrow screen, use **Show Preview** and **Show Chat** to switch between the two.

### Point at what to change

Annotations tell the agent exactly which element you mean.

1. **Pick an element**

    Turn on **Annotate Elements** in the preview toolbar, then click an element in the preview.

2. **Say what should change**

    Type the change and select **Add Annotation**. Repeat for other elements; each one stays marked in the preview.

3. **Send**

    Your annotations collect above the message box. Add anything else you want to say, which is optional, and send. The agent applies every annotation in one reply.

## Restore an earlier version

Each reply that changes files saves a version. Open the version picker at the left of the preview toolbar, which reads **Latest**, and choose a version to restore.

Restoring puts the files back as they were and rebuilds the preview database from that version's migrations, which clears its data. Newer versions stay in the list, so you can restore them later. You can't restore while the agent is replying, or restore a version that lacks database changes your published app already has.

## Publish

1. **Name the app**

    Select **Publish** in the chat header. The first time, name your app; the name sets its web address, such as `https://my-app.app-builder.poring.arkcube.com`, numbered if that address is taken. A name with no Latin letters or digits publishes to a random address.

2. **Wait for the build**

    The button reads **Publishing…** while the app builds. When it's live, **Open site** opens it in a new tab.

3. **Republish after changes**

    Select **Republish** to update the same site. The address stays the same.

If the build fails, publish again to retry, or ask the agent to fix the problem first. **Apps** in the sidebar lists everything you've published.

To take the code elsewhere, select **Download Zip** in the chat header.

## Manage chats

Hover a chat in the sidebar and open its menu:

- **Rename** changes the chat's title. A published app keeps its address.
- **Delete** removes the conversation and its preview data, and stops any reply in progress. If the chat was published, its app and that app's data are deleted too. It cannot be undone.

The account menu at the bottom of the sidebar holds **Agent Access**, where you create API keys for the [MCP server](/mcp), a **Theme** switch, and **Sign Out**.