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.

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.
• Integrations: When the app task needs access to a third-party account, App Builder can show a card such as Connect Slack in the chat panel. Click Connect to authorize with OAuth. Click Skip to cancel this authorization; AI continues with the parts it can complete without that connection.
• Skills: Open the + menu and choose Skills to manage skills for this app conversation. A skill added here is only available to the current app, and the skills shared with the app’s base and space can be used here as well. Type / in the input box to choose an enabled skill.
• Manage files: Open + → More → Manage files to view files in the app sandbox. Use it to preview supported files, download generated files, or delete files and folders you no longer need.
• 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.

Use the floating toolbar at the bottom of the preview to make targeted changes:

• Choose Select an element to edit, then click an element in the preview. App Builder adds the element to the chat input. Add your instruction and send the message so AI can update that specific part of the app.
• Choose Edit text directly, then click static text in the preview and type your replacement. You can edit more than one text element before clicking Save. Click Discard edits to undo the pending text changes.

Dynamic text, such as content loaded from data or calculated by the app, cannot be edited directly. Select the element and describe the change in chat instead. Element selection and direct text editing pause while AI is generating. Press Esc to exit either mode.

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 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.json at the project root.
• 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.

Manage App Files

App Builder stores uploaded files, generated outputs, and runtime files in the app sandbox. In the chat panel, open + → More → Manage files to inspect them. Supported file types open in preview. You can also download files or delete files and folders you no longer need.

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.

Sync Code with GitHub

Available on Cloud Business plans and above.

Link an app to a private GitHub repository when you want to review code in pull requests, keep a copy outside Teable, or work on the app in your local editor. Once linked, the app and the repository sync in both directions: every new app version is pushed to GitHub, and commits you push to GitHub become new app versions.

Connect an Account and Create the Repository

Generate the app at least once first. Until the app has code, the GitHub button shows Generate the app first to connect GitHub and does nothing.

1. Open the GitHub panel

   Click the GitHub icon in the app header to open GitHub sync. You need edit access to the app.
2. Connect an account

   Click Connect GitHub and complete the installation in the popup window. Choose your personal account or an organization you administer. Allow popups if your browser blocks the window.
3. Pick the account

   Select the connected account under GitHub account. Click + to connect another one.
4. Name the repository

   Repository name is prefilled from the app name. Names may contain letters, digits, ., -, and _, up to 100 characters.
5. Create and link

   Click Create repository & link. For a personal account, GitHub asks you to authorize the creation in one more popup.

Teable creates a new private repository and commits the current app code to the main branch, along with a README that points back to the app and explains how the two stay in sync. You cannot link an app to a repository that already exists.

By default a connection belongs to whoever created it. To let collaborators build on the same organization account, select the connection and turn on Allow other members to use this connection. Other members with app editing access can then create repositories for their own apps under that organization. Personal connections cannot be shared, because GitHub requires the account owner’s own authorization to create a repository.

How Syncing Works

Direction	What happens
App → GitHub	Each new app version is pushed to the main branch of the repository.
GitHub → app	Commits pushed to main become a new app version. A message in the chat panel reports what was synced, and an open preview reloads on the new code.

Environment files are never pushed. See Environment Variables and Local Development below.

The panel shows the current state next to the repository name:

Status	Meaning	What to do
Synced	The repository matches the latest app version.	No action needed.
Syncing	A push is in flight.	Wait; the panel updates on its own.
Conflict	The main branch has commits Teable did not produce, and they cannot be combined automatically.	Merge the teable-sync branch on GitHub. See below.
Paused	Teable stopped syncing because the GitHub App was uninstalled or suspended.	The panel says which. Lifting a suspension resumes syncing on its own.
Error	The last sync attempt failed.	Read the reason in the panel and click Retry.

Resolve a Conflict

Teable never force-pushes your branch. When the histories diverge, it parks the latest app version on a branch named teable-sync and marks the link Conflict. Merge teable-sync into main on GitHub; the merge comes back as a new app version and the link returns to Synced. While the conflict lasts, later app versions keep moving the teable-sync branch forward, so merging it always brings in the newest work.

Environment Variables and Local Development

The repository holds source only. Teable never pushes a file whose name starts with .env: not at the project root, not in a subfolder, and not in the commit history. Environment values live in the app’s Secrets and never enter git. The repository’s .gitignore already lists .env*, so a local clone will not commit one by accident.

To run the app on your own machine:

1. Clone and install

   Clone the repository and run pnpm install.
2. Copy the variables

   In the GitHub panel, click Copy local env variables, then paste the clipboard into a .env file at the project root.
3. Start the app

   Run pnpm dev.

The copied content matches what the app receives in Teable’s own sandbox: your Secrets, plus the variables the platform injects for the app’s API endpoint, access token, and AI access.

The TEABLE_APP_TOKEN line in that file grants access to the app’s data, which is why only members with edit access to the app can copy it. Never commit the file, and never paste it into an issue or a pull request.

To add or change a secret, edit Secrets in Teable rather than the local file. A .env committed to GitHub does not create or update a Secret. After changing a secret, copy the variables again to refresh your local .env.

Unlink the Repository

Click the delete icon next to the repository name and confirm. Syncing stops, and the repository and its code stay on GitHub. Linking the same app again later creates a new repository rather than reconnecting to the old one.

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.
• Show branding: Use Show branding in the Publish menu to control whether the published app shows the Build with Teable badge. If you change this setting after publishing, click Redeploy to apply it.
• Unpublish: For a published app, use Unpublish in the publish menu to take the public link offline.
• App configuration changes: When the publish menu shows Runtime configuration changed. Redeploy to apply it to the live app or Branding setting changed. Redeploy to apply it to the live app, click Redeploy.
• Open published app: Once an app is published, the icon next to Publish opens the live app in a new tab.

Hiding the Build with Teable badge requires the Business plan or above.

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.

Custom Site Info

Use Custom site info in the Publish menu to set the browser tab icon, page title, and description of the published app. The dialog previews how they look together as you edit.

Setting	What it controls
Favicon	The icon shown in the browser tab. Upload a PNG, JPEG, WebP, SVG, or ICO file up to 5 MB; 32×32 is the recommended size. Remove the uploaded file to return to the default Teable icon.
Title	The page title, up to 120 characters.
Description	The site description in the page metadata, up to 500 characters.

Leave a field empty to keep the value App Builder wrote for you. Saving applies the change to the app preview environment; the published app uses it only after you republish.

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.

FAQ

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?

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?

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?

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?

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?

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?

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?

If you are running Teable self-hosted, follow the setup on the AI Settings page. If App Builder uses your own key (BYOK), the chat model must come from an OpenAI Compatible or Anthropic provider. For deployment support, contact Teable at [e-mail].

If you select Vercel under Deployment Engine, make sure both your Teable instance and object storage (MinIO / S3) are publicly accessible, then use Test Public Access on the AI Settings page. This check is not required when you select Teable Infra.