> ## Documentation Index
> Fetch the complete documentation index at: https://help.teable.ai/llms.txt
> Use this file to discover all available pages before exploring further.
# App Builder
> Transform your data into custom web applications using AI.
Available on all Cloud plans; Self-Hosted requires Business or higher.
Teable App Builder allows you to turn your data bases into fully functional, customized web applications without writing code. By combining the power of your data structure with AI-driven design, you can launch internal tools, customer portals, and data dashboards in minutes.
## Overview
The App Builder follows a "Prompt to App" workflow. You describe what you want, and AI builds the application structure, pages, and logic for you. You can then fine-tune every detail using the visual editor or code.
Use App Builder to create custom interfaces and standalone apps. For interactive data analysis and ad-hoc questions inside the database, use [AI Chat](/en/basic/ai/ai-chat).
## Creating an App
There are two main ways to create an app:
1. **From Base**: In any Base, click "Create App" to generate an application linked to your current data.
2. **From Chat**: Open AI Chat and say "Create a CRM app for this customer table".
## The App Editor Interface
The App Builder provides a dual-interface for both non-technical users and developers.
### 1. Chat Interface (AI-Driven)
The command center for your app.
* **Natural Language Editing**: Describe changes like *"Make the header blue"* or *"Add a submission form for new records"*.
* **Auto-Routing**: The AI understands which component or page you are referring to and modifies it directly.
* **Clear Conversation**: If the current conversation has drifted, click **Clear Chat** in the bottom-right corner of the panel to start a new session. This clears the chat history for the current conversation but does not delete the app itself. The first use shows a confirmation, and you can choose not to show it again next time.
### 2. Live Preview Panel
* **Multi-Device Simulation**: Use the switcher at the top to toggle **Desktop**, **Tablet**, and **Mobile** views.
* **Instant Feedback**: Changes render immediately.
### 3. Developer Mode (Code Editor)
For infinite customization, you have direct access to the code.
* **Monaco Editor**: A VS Code-like experience right in the browser.
* **React Components**: Edit the underlying React code, Tailwind CSS classes, and logic.
* **File Tree**: Navigate through the project structure.
#### Download Code
You can download the entire app as a ZIP archive at any time:
1. Switch to the **Code** tab in the editor.
2. Click the **`...`** menu in the tab bar.
3. Select **Download code** to save a ZIP archive that includes all source files.
If the app uses custom environment variables, the downloaded archive can include a root `.env` file. Review it before sharing the ZIP.
#### Import Code
You can update the app's code by importing a ZIP:
1. Switch to the **Code** tab in the editor.
2. Click the **`...`** menu in the tab bar.
3. Select **Import code** and choose a ZIP file (≤ 5 MB) containing your source files.
* Include source files only — do not include `node_modules`, `.next`, or other build artifacts.
* Zip the outermost project folder itself (right-click the folder → compress), not files selected from inside it.
* If you import only one file from a nested folder, include one unchanged source file from another top-level folder as a path anchor. For example, include both `app/page.tsx` and `components/widgets/chart.tsx` so the component keeps its full `components/widgets/...` path.
* Import merges with the existing project and overwrites any files that share the same path.
* A root `.env` file in the ZIP is read into the app's **Secrets**. Other `.env*` variants, such as `.env.local`, are ignored.
#### Secrets
Use **Secrets** for API keys, credentials, and configuration values your app needs while it runs. In the App Builder chat panel, open the **+** menu and choose **Secrets**.
| Detail | Behavior |
| ------------ | --------------------------------------------------------------------------------------------------- |
| Availability | App Secrets are available in the app preview environment and the published app |
| Code access | Server-side app code can read them from environment variables such as `process.env.MY_API_KEY` |
| Saved values | Secret values are write-only after saving; enter a new value to update one |
| Key format | Keys must start with an uppercase letter and can contain uppercase letters, digits, and underscores |
After you add, delete, or change a Secret value, the app preview environment uses the new value. The published app uses it only after you republish. Editing only a Secret description does not require republishing.
#### Add AI Features to an App
Add AI when your app needs to summarize records, classify requests, draft replies, or answer questions for app users.
You can tell App Builder what you want, such as: "Add an AI reply assistant for support tickets" or "Summarize each form submission." App Builder can turn on **AI access** and add the code for the feature.
After App Builder adds the AI feature, the app preview uses the new version. The published app uses it only after you republish.
## Publishing & Management
### Publishing Your App
When your app is ready, click the **Publish** button (arrow icon) in the top right corner.
* **Public URL**: Teable generates a secure, publicly accessible URL for your app.
* **Custom Domain**: Map your own domain to the app.
* **Unpublish**: For a published app, use **Unpublish** in the publish menu to take the public link offline.
* **App configuration changes**: If the publish menu shows **App configuration changed — redeploy to apply**, click **Redeploy** to apply pending Secret value, AI access, or login changes to the published app.
### Unpublish an App
To take a published app offline, open the **Publish** menu and click **Unpublish**. After you confirm, the public app URL can no longer be accessed.
Unpublishing does not delete the app or its edit history. You can keep editing the app and publish it again later.
### Custom Domains
Custom domains require the Business plan or above.
Use **Custom domain** to bind a domain to the published app. A subdomain is recommended, such as `app.yourdomain.com`. After you enter the domain, Teable shows the DNS records to add. Add the records with your DNS provider, wait for propagation, then verify the domain in Teable.
You can also use an available subdomain under `teable.app` and edit the `teable.app` prefix, such as `your-name.teable.app`.
### App Login
Click **Add login** in the app header to require visitors to sign in before they can use the app. Once login is configured, the button changes to **Login settings**.
When you enable login:
1. Choose where to store app users. You can create a **Users** table or reuse an existing table with an email field. Each signed-in user is stored as one record, and the same user table can be reused by multiple apps.
2. Choose at least one sign-in method, such as **Email OTP**, **Google**, or **Teable**. Available methods depend on your instance's authentication settings.
3. Choose an access policy: **Anyone can sign up**, **Allowed email domains**, or **Invite only**.
Login changes appear in the app preview environment after it reloads. Publish the app again to apply those changes to the published app.
### Version History & Rollback
Teable automatically tracks every deployment.
* Click the **History** (clock icon) button to view a list of all deployed versions.
* **One-Click Rollback**: If a new update causes issues, you can instantly revert the live app to any previous stable version.
### Auto-fix
If your custom code changes cause a build error, the deployment will fail.
* Teable provides an **Auto-fix** button alongside the error log.
* Clicking this lets AI analyze the compilation error and automatically patch the code to resolve the issue.
### Deleting an App
To delete an app, click the **Settings** (gear icon) button in the header and select **Delete**.
## Best Practices
For prompt patterns, build tips, rollback advice, and common troubleshooting, see [App Builder Practical Guide](/en/basic/ai/app-builder-practical-guide).
## FAQ
No. Clearing the conversation only removes the chat history for the current app conversation. It does not delete the app itself. Use it when the conversation has drifted and you want to start again.
Switch to the **Code** tab in the editor, click the **`...`** menu in the tab bar, then choose **Download code** or **Import code**. When importing a ZIP, include source files only. Do not include `node_modules`, `.next`, or other build artifacts. A root `.env` file is imported into app **Secrets**.
Login settings appear in the app preview environment after it reloads. Publish the app again to apply those changes to the published app.
Tell App Builder what AI feature you want, such as a reply assistant, submission summary, or request classifier. App Builder can enable **AI access** and add the code for the feature. The app preview uses the new version after App Builder finishes the change. The published app uses it only after you republish. AI calls made through this app appear as **App AI** in the credit usage details.
Click the **History** (clock icon) button to view deployed versions, then restore the live app to a previous stable version.
Each user can run up to 3 Agents at the same time, including AI Chat and App Builder. If App Builder says an Agent is busy in another conversation, another task is still running. Wait for the previous task to finish before continuing.
One App Builder run can include multiple processing steps. The conversation and billing page both show the total credits for that run. Work that Cuppy already completed and saved can still be used. If the final step is interrupted by an unexpected error, credits for that interrupted step are refunded automatically. You can continue working in the same app conversation.
If you are running Teable self-hosted, follow the setup on the [AI Settings](/en/basic/admin-panel/ai-setting) page. That page is the source of truth for **AI Chat Runtime**, **Vercel deployment settings**, **public access testing**, and the related troubleshooting notes for App Builder.
Before publishing, make sure both your Teable instance and object storage (MinIO / S3) are publicly accessible. If you are unsure, use **Test Public Access** on the [AI Settings](/en/basic/admin-panel/ai-setting) page.