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.
When to use App Builder vs AI Chat: Use App Builder to create custom interfaces and standalone apps. For interactive data analysis and ad-hoc questions within 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.
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.
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 (Coming Soon): Map your own domain to the 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
- Start Simple: Let AI build the basic structure first, then iterate on specific features.
- Check Mobile: Many users access apps on mobile devices, so frequently check the Mobile preview.
- Version Control: You can save versions or reset edits if you want to experiment with different designs.
Self-Hosted Configuration
If you’re running Teable self-hosted, configure App Builder settings in Admin panel → AI settings → App builder.
Required Settings
| Setting | Description |
|---|
| v0 API Key | Get from v0.app/chat/settings/keys |
The v0 API requires a paid v0 subscription. Free tier credits are not sufficient. If you see “Internal Server Error” when creating apps, please upgrade your v0 plan.
Custom Domain (Optional)
Apps built with App Builder are deployed to Vercel. There are two ways to use a custom domain:
Option A: Vercel Domains (Automatic)
Domains purchased from Vercel get automatic binding configured for you.
- Purchase a domain from Vercel Domains
- Enter the domain in Custom Domain field in Admin Panel
- Add your Vercel API Token from Vercel Settings
Option B: External Domain (Manual DNS)
If you already own a domain from another registrar (e.g., Cloudflare, GoDaddy):
- In Teable Admin Panel, enter your root domain in Custom Domain (e.g.,
example.com)
- Add your Vercel API Token
- When you publish an app, note the App ID from the URL (e.g.,
appXXX123)
- In your DNS provider, add a CNAME record for each app:
| Field | Value |
|---|
| Type | CNAME |
| Name | The app ID (e.g., appXXX123) |
| Target | cname.vercel-dns.com |
| Proxy | DNS only (if using Cloudflare) |
- In Vercel Dashboard (Project → Settings → Domains), add the full domain (e.g.,
appXXX123.example.com) and click Verify
- Once verified, HTTPS will be provisioned automatically
Each app gets a unique subdomain based on its App ID. Path-based URLs (e.g., yourdomain.com/app/xxx) are not supported.
API Proxy (Optional)
For regions with restricted access to v0/Vercel APIs, you can configure proxy URLs:
| Setting | Description |
|---|
| v0 Base URL | Proxy URL for v0 API |
| Vercel Base URL | Proxy URL for Vercel API |
AI Gateway (Optional)
If you use Vercel AI Gateway, you can configure your API key here to enable:
- Centralized monitoring and logging of AI requests
- Rate limiting and cost controls
- Caching to reduce API costs
| Setting | Description |
|---|
| AI Gateway API Key | Get from your Vercel AI Gateway settings |