Available on all Cloud plans; Self-Hosted requires Business or higher.
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.
Creating an App
There are two main ways to create an app:- From Base: In any Base, click āCreate Appā to generate an application linked to your current data.
- 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.
- Live Generation: The preview panel can show the app taking shape while App Builder is generating.
- Instant Feedback: After App Builder finishes a change, the preview refreshes with the latest saved version.
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:- Switch to the Code tab in the editor.
- Click the
...menu in the tab bar. - Select Download code to save a ZIP archive that includes all source files.
.env file. Review it before sharing the ZIP.
Import Code
You can update the appās code by importing a ZIP:- Switch to the Code tab in the editor.
- Click the
...menu in the tab bar. - Select Import code and choose a ZIP file up to 20 MB.
- Include source files only.
node_modules,.next, and other build artifacts are ignored automatically. - The ZIP replaces the existing project. Files you leave out are removed from the new version.
- If the ZIP contains one wrapper folder, Teable strips that folder. You can compress the outermost project folder directly.
- The imported project must include
package.jsonat the project root. - A root
.envfile 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 |
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.
Custom Domains
Custom domains require the Business plan or above.
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.
- 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.
- Choose at least one sign-in method, such as Email OTP, Google, or Teable. Available methods depend on your instanceās authentication settings.
- Choose an access policy: Anyone can sign up, Allowed email domains, or Invite only.
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.FAQ
Does clearing the conversation delete the app?
Does clearing the conversation delete the app?
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.
How do I download or import app code?
How do I download or import app code?
Switch to the Code tab in the editor, click the
... menu in the tab bar, then choose Download code or Import code. Imported ZIP files can be up to 20 MB and replace the existing project, so include every source file you want to keep. The imported project must include a root package.json. A root .env file is imported into app Secrets.When do login settings apply to the live app?
When do login settings apply to the live app?
Login settings appear in the app preview environment after it reloads. Publish the app again to apply those changes to the published app.
How can an app call AI models at runtime?
How can an app call AI models at runtime?
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.
How do I roll back to a previous version?
How do I roll back to a previous version?
Click the History (clock icon) button to view deployed versions, then restore the live app to a previous stable version.
Why does App Builder say an Agent is busy in another conversation?
Why does App Builder say an Agent is busy in another conversation?
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.
How are credits refunded when an App Builder run fails?
How are credits refunded when an App Builder run fails?
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.
Where do I configure App Builder for Self-Hosted?
Where do I configure App Builder for Self-Hosted?
If you are running Teable self-hosted, follow the setup on the AI Settings 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 page.