> ## 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.

# 应用构建器

> 利用 AI 将您的数据转化为定制化的网络应用。

<Note>云端版本所有方案可用；私有部署版本需要商业版及以上方案。</Note>

Teable 应用构建器 (App Builder) 允许您在不编写代码的情况下，将数据库转化为功能齐全、定制化的 Web 应用程序。结合数据结构的力量和 AI 驱动的设计，您可以在几分钟内发布内部工具、客户门户和数据仪表板。

## 概览

应用构建器（App Builder）遵循 "Prompt to App"（提示词即应用）的工作流。您描述想要的内容，AI 为您构建应用结构、页面和逻辑。然后，您可以使用可视化编辑器或代码微调每一个细节。

<Note>
  应用构建器用于创建自定义界面和独立应用。如果需要在数据库内部进行交互式数据分析和临时提问，请使用 [AI 对话](/zh/basic/ai/ai-chat)。
</Note>

## 创建应用

主要有两种创建应用的方式：

1. **从数据库创建**：在数据库中，点击 "+ 创建" 选择 "新应用" 生成一个链接到当前数据的应用。
2. **从对话创建**：打开 AI Chat 并说 "为这个客户表创建一个 CRM 应用"。

## 应用编辑器界面

应用构建器为非技术用户和开发者提供了双重界面。

<img src="https://mintcdn.com/teablecn/TO9j-Q8_3sjEReNV/images/docs/ai/2026-05-21-app-builder-editor-interface.png?fit=max&auto=format&n=TO9j-Q8_3sjEReNV&q=85&s=4d9d297239302df4c9f2b7dcb4a1ab62" alt="应用构建器编辑器界面" className="docs-screenshot" width="1600" height="1081" data-path="images/docs/ai/2026-05-21-app-builder-editor-interface.png" />

### 1. 对话界面 (AI 驱动)

这是您的应用控制中心。

* **自然语言编辑**：描述您想做的更改，如 *"把标题改成蓝色"* 或 *"添加一个新记录提交表单"*。
* **智能路由**：AI 能够理解您指的是哪个组件或页面，并直接对其进行修改。
* **技能**：打开 **+** 菜单，选择 **技能**，可以管理当前应用对话可用的技能。App 技能仅在当前应用中可用。在输入框中输入 `/`，可以选择已启用的技能。
* **文件管理**：打开 **+** → **更多** → **文件管理**，可以查看当前应用沙箱中的文件，用于预览支持的文件类型、下载生成文件，或删除不再需要的文件和文件夹。
* **清除对话历史**：如果当前对话已经跑偏，可点击面板右下角的 **清除对话**，重新开始一个新的会话。这样会丢失当前对话的历史上下文，但不会删除应用本身。首次使用会弹出确认，并可选择下次不再提示。

### 2. 实时预览面板

* **多设备模拟**：使用顶部的切换器在 **桌面**、**平板** 和 **移动** 视图之间切换。
* **生成中预览**：应用构建器生成应用时，你可以在预览面板看到界面逐步成形。
* **即时反馈**：应用构建器完成修改后，预览会刷新为最新保存的版本。

### 3. 开发者模式 (代码编辑器)

为了实现无限的定制能力，我们提供了直接访问代码的权限。

* **Monaco Editor**：浏览器中类似 VS Code 的编码体验。
* **React 组件**：直接编辑底层 React 代码、Tailwind CSS 类和逻辑。
* **文件树**：完整浏览项目文件结构。

#### 下载代码

您可以随时将整个应用下载为 ZIP 压缩包：

1. 切换到编辑器中的 **Code** 标签页。
2. 点击标签栏中的 **`...`** 菜单。
3. 选择 **下载代码**，包含所有源文件的 ZIP 压缩包将保存到您的电脑。

如果应用使用了自定义环境变量，下载的压缩包可能包含根目录 `.env` 文件。分享 ZIP 前请先检查其中内容。

#### 导入代码

您可以通过导入 ZIP 来更新应用代码：

1. 切换到编辑器中的 **Code** 标签页。
2. 点击标签栏中的 **`...`** 菜单。
3. 选择 **导入代码**，导入不超过 20 MB 的 ZIP。

<Note>
  * 仅需包含源代码文件，`node_modules`、`.next` 等构建产物会被自动忽略。
  * ZIP 会替换现有项目。未放入 ZIP 的现有文件，会从新版本中移除。
  * 如果 ZIP 中包含一个公共外层文件夹，Teable 会自动剥离这一层。你可以直接压缩最外层项目文件夹。
  * 导入的项目根目录必须包含 `package.json`。
  * ZIP 根目录中的 `.env` 会导入应用的 **密钥管理**。其他 `.env*` 变体（如 `.env.local`）会被忽略。
</Note>

<img src="https://mintcdn.com/teablecn/TO9j-Q8_3sjEReNV/images/docs/ai/2026-05-21-app-builder-code-editor-zh.png?fit=max&auto=format&n=TO9j-Q8_3sjEReNV&q=85&s=378f93febe0af27db14bf1b00740495b" alt="应用构建器代码编辑器" className="docs-screenshot" width="1600" height="588" data-path="images/docs/ai/2026-05-21-app-builder-code-editor-zh.png" />

#### 密钥管理

不要把 API Key、访问凭证和应用运行所需的配置直接写进源码。需要让应用读取这些值时，在应用构建器对话面板中打开 **+** 菜单，选择 **密钥管理**。

| 细节     | 行为                                        |
| ------ | ----------------------------------------- |
| 生效范围   | 应用密钥可用于应用预览环境和已发布应用                       |
| 代码读取   | 服务端代码可通过 `process.env.MY_API_KEY` 等环境变量读取 |
| 已保存的值  | 保存后不会明文展示；需要修改时，输入新值覆盖                    |
| Key 格式 | Key 需要以大写字母开头，只能包含大写字母、数字和下划线             |

新增、删除或修改密钥值后，应用预览环境会使用新值；已发布应用需要重新发布后才会使用。只修改密钥描述，不需要重新发布。

#### 管理应用文件

应用构建器会把上传文件、生成结果和运行时文件保存在应用沙箱中。在对话面板中打开 **+** → **更多** → **文件管理**，可以查看这些文件。支持的文件类型可直接预览，也可以下载文件，或删除不再需要的文件和文件夹。

#### 为应用添加 AI 功能

当应用需要总结记录、分类请求、生成回复，或为应用用户回答问题时，可以添加 AI 功能。

你可以直接告诉应用构建器你想做什么，比如“给工单添加 AI 回复助手”或“总结每条表单提交内容”。应用构建器可以帮你开启 **AI 访问**，并添加对应功能所需的代码。

<Info>
  应用构建器添加好 AI 功能后，应用预览会使用新版本；已发布应用需要重新发布后才会使用。
</Info>

## 发布与管理

### 发布您的应用

当应用准备就绪时，点击右上角的 **发布** 按钮（箭头图标）。

* **公开链接**：Teable 会为您的应用生成一个安全的、可公开访问的 URL。
* **自定义域名**：支持绑定您自己的域名。
* **取消发布**：已发布应用可在发布菜单中点击 **取消发布**，让公开链接暂时下线。
* **应用配置变更**：如果发布菜单显示 **应用配置已修改，重新发布后生效**，点击 **重新发布**，将待生效的密钥值、AI 访问或登录配置变更应用到已发布应用。

<img src="https://mintcdn.com/teablecn/TO9j-Q8_3sjEReNV/images/docs/ai/2026-05-21-app-builder-publish-app.png?fit=max&auto=format&n=TO9j-Q8_3sjEReNV&q=85&s=f879543ea5b8d24064eb6503dd5ba397" alt="发布应用菜单" className="docs-screenshot" width="1600" height="771" data-path="images/docs/ai/2026-05-21-app-builder-publish-app.png" />

### 取消发布应用

要让已发布应用暂时下线，打开 **发布** 菜单，点击 **取消发布**。确认后，公开应用链接将无法访问。

<img src="https://mintcdn.com/teablecn/sJyusfMIpxquyt_Q/images/docs/ai/2026-06-05-app-builder-unpublish-zh.png?fit=max&auto=format&n=sJyusfMIpxquyt_Q&q=85&s=2f6a0149ad13127abd7b372d6caf7360" alt="发布菜单中的取消发布按钮" className="docs-screenshot" width="1600" height="568" data-path="images/docs/ai/2026-06-05-app-builder-unpublish-zh.png" />

取消发布不会删除应用或编辑历史。您可以继续编辑应用，并在之后重新发布。

### 自定义域名

<Note>自定义域名需要商业版及以上方案。</Note>

在 **自定义域名** 中可以为已发布应用绑定访问域名。建议使用子域名，例如 `app.yourdomain.com`。输入域名后，Teable 会显示需要添加的 DNS 记录；在域名服务商处添加记录，等待生效后回到 Teable 完成验证。

也可以使用 `teable.app` 下可用的子域名，并编辑 `teable.app` 前缀，例如 `your-name.teable.app`。

<img src="https://mintcdn.com/teablecn/TO9j-Q8_3sjEReNV/images/docs/ai/2026-05-21-app-builder-custom-domain.png?fit=max&auto=format&n=TO9j-Q8_3sjEReNV&q=85&s=0d153fd7343725ebc7581e40f6effd7e" alt="自定义域名设置" className="docs-screenshot" width="1600" height="726" data-path="images/docs/ai/2026-05-21-app-builder-custom-domain.png" />

### 应用登录

在应用顶部点击 **添加登录**，可以要求访问者登录后再使用应用。配置后，该按钮会变为 **登录设置**。

<img src="https://mintcdn.com/teablecn/TO9j-Q8_3sjEReNV/images/docs/ai/2026-05-21-app-builder-login-settings.png?fit=max&auto=format&n=TO9j-Q8_3sjEReNV&q=85&s=35eefaf1fb6f5ffad382cd21e1c3d625" alt="应用登录设置" className="docs-screenshot" width="1600" height="1213" data-path="images/docs/ai/2026-05-21-app-builder-login-settings.png" />

启用登录时：

1. 选择登录用户的存储位置。可以创建 **用户** 表，也可以复用已有的、包含邮箱字段的表。每位登录用户会作为一条记录保存，同一用户表可被多个应用复用。
2. 至少选择一种登录方式，例如 **邮箱验证码**、**Google** 或 **Teable**。可选方式取决于实例的认证配置。
3. 设置访问控制：**所有人可注册**、**允许的邮箱域名** 或 **仅邀请用户**。

登录配置会在应用预览环境重新加载后生效。要让已发布应用使用新的登录配置，需要重新发布应用。

### 版本历史与回滚

Teable 自动跟踪每一次部署。

* 点击 **历史** 按钮（时钟图标）查看所有已部署的版本列表。
* **一键回滚**：如果新的更新出现问题，您可以即时将线上应用恢复到任何之前的稳定版本。

<img src="https://mintcdn.com/teablecn/TO9j-Q8_3sjEReNV/images/docs/ai/2026-05-21-app-builder-version-history.png?fit=max&auto=format&n=TO9j-Q8_3sjEReNV&q=85&s=110cb08d3beac9e621c5444d66a5b203" alt="应用版本历史" className="docs-screenshot" width="1600" height="278" data-path="images/docs/ai/2026-05-21-app-builder-version-history.png" />

### 自动修复 (Auto-fix)

如果您的自定义代码导致构建错误，部署将会失败。

* Teable 在错误日志旁提供了一个 **Auto-fix (自动修复)** 按钮。
* 点击它，AI 将分析编译错误并自动修补代码以解决问题。

### 删除应用

要删除应用，请点击顶部的 **设置** (齿轮图标) 按钮，然后选择 **删除**。

## 最佳实践

应用构建器的构建技巧、提示词写法、版本回退建议和常见问题，请参考 [应用构建器最佳实践](/zh/basic/ai/app-builder-practical-guide)。

## 常见问题

<AccordionGroup>
  <Accordion title="清除对话历史会删除应用吗？">
    不会。清除对话只会清除当前应用对话的历史上下文，不会删除应用本身。如果对话已经跑偏，可以用它重新开始。
  </Accordion>

  <Accordion title="如何下载或导入应用代码？">
    切换到编辑器中的 **Code** 标签页，点击标签栏中的 **`...`** 菜单，然后选择 **下载代码** 或 **导入代码**。导入的 ZIP 最大 20 MB，且会替换现有项目，因此请放入需要保留的全部源代码文件。导入的项目根目录必须包含 `package.json`。ZIP 根目录中的 `.env` 文件会导入应用的 **密钥管理**。
  </Accordion>

  <Accordion title="登录配置什么时候会对线上应用生效？">
    登录配置会在应用预览环境重新加载后生效。要让已发布应用使用新的登录配置，需要重新发布应用。
  </Accordion>

  <Accordion title="应用如何在运行时调用 AI 模型？">
    告诉应用构建器你想实现什么 AI 功能，比如回复助手、提交内容总结或请求分类。应用构建器可以帮你开启 **AI 访问**，并添加对应功能所需的代码。应用构建器完成修改后，应用预览会使用新版本；已发布应用需要重新发布后才会使用。通过应用发起的 AI 调用会在算力明细中显示为 **应用 AI**。
  </Accordion>

  <Accordion title="如何回滚应用到之前的版本？">
    点击 **历史** 按钮（时钟图标）查看已部署版本，并将线上应用恢复到之前的稳定版本。
  </Accordion>

  <Accordion title="为什么提示 Agent 正在其他对话中执行？">
    每个用户最多可同时运行 3 个 Agent，包括 AI 对话和应用构建器。如果应用构建器提示 Agent 正在其他对话中执行，说明已有任务正在运行，请等待上一个任务完成后再继续。
  </Accordion>

  <Accordion title="应用构建器运行失败时如何返还算力？">
    一次应用构建器运行可能包含多个处理步骤，对话里和账单里都会汇总展示同一轮运行的算力消耗。已经完成并保存的工作可以继续使用；如果最后一步意外中断，会自动返还中断那一步消耗的算力。你可以继续在同一个应用对话里推进后续工作。
  </Accordion>

  <Accordion title="私有化部署需要在哪里配置应用构建器？">
    如果您使用私有化部署的 Teable，请参考 [AI 配置](/zh/basic/admin-panel/ai-setting) 页面完成配置。Agent Runtime 的私有化部署仍处于早期阶段，配置流程较繁琐；请联系 Teable：**[support@teable.ai](mailto:support@teable.ai)**，获取部署协助。

    <Note>
      发布前，请先确认 Teable 和对象存储（MinIO / S3）都能被公网访问；不确定时，可以在 [AI 配置](/zh/basic/admin-panel/ai-setting) 页面使用 **测试公网访问** 进行验证。
    </Note>
  </Accordion>
</AccordionGroup>