すべてのCloudプランで利用できます。セルフホストではBusinessプラン以上が必要です。
概要
App Builderは、「プロンプトからアプリへ」というワークフローに従います。必要なものを説明すると、AIがアプリケーションの構造、ページ、ロジックを構築します。その後、ビジュアルエディターまたはコードを使用して、細部を調整できます。カスタムインターフェースや独立したアプリを作成するには、App Builderを使用します。データベース内でのインタラクティブなデータ分析やその場限りの質問には、AIチャットを使用してください。
アプリを作成する
アプリを作成する主な方法は2つあります。- ベースから: 任意のベースで「アプリを作成」をクリックし、現在のデータにリンクされたアプリケーションを生成します。
- チャットから: AIチャットを開き、「この顧客テーブル用のCRMアプリを作成して」と伝えます。
アプリエディターの画面
App Builderには、技術者以外のユーザーと開発者の両方に対応する2つの画面があります。1. チャット画面（AI駆動）
アプリの司令塔です。- 自然言語による編集: 「ヘッダーを青にして」、*「新しいレコードの送信フォームを追加して」*など、変更内容を説明します。
- 自動ルーティング: AIが参照しているコンポーネントまたはページを理解し、直接変更します。
- 連携: アプリのタスクでサードパーティーアカウントへのアクセスが必要な場合、App BuilderはチャットパネルにSlackへ接続などのカードを表示できます。接続をクリックしてOAuth認証を行います。認証をキャンセルするにはスキップをクリックします。AIは、その接続なしで完了できる処理を続行します。
- Skill: +メニューを開いてSkillを選択し、このアプリの会話で使用するSkillを管理します。ここで追加したSkillは現在のアプリでのみ利用でき、アプリのベースとスペースで共有されているSkillも使用できます。入力ボックスに
/と入力すると、有効なSkillを選択できます。 - ファイルを管理: + → その他 → ファイルを管理を開き、アプリのサンドボックス内にあるファイルを表示します。対応ファイルのプレビュー、生成ファイルのダウンロード、不要になったファイルやフォルダーの削除に使用します。
- 会話を消去: 現在の会話が本題から外れた場合は、パネル右下のチャットを消去をクリックして、新しいセッションを開始します。現在の会話のチャット履歴は消去されますが、アプリ自体は削除されません。初回は確認が表示され、次回から表示しないよう選択できます。
2. プレビューパネル
- プレビューと公開版: パネルには2つのタブがあります。プレビューでは、まだ公開していない変更を含め、構築中のバージョンが実行されます。公開版では、公開アドレスから公開済みアプリを読み込み、ユーザーに表示される内容と作業中の内容を比較できます。アプリが公開されるまでは、代わりに公開版へ公開を促すメッセージが表示されます。App Builderは、公開済みのアプリを公開版で、未公開のアプリをプレビューで開き、その後はアプリで最後に使用したタブを記憶します。
- 複数端末のシミュレーション: 上部の切り替えを使用して、デスクトップ、タブレット、モバイルのビューを切り替えます。
- リアルタイム生成: App Builderによる生成中、プレビューパネルにはアプリが形作られていく様子が表示されます。
- 即時フィードバック: App Builderが変更を完了すると、最新の保存済みバージョンでプレビューが更新されます。
- 編集する要素を選択を選び、プレビュー内の要素をクリックします。App Builderがその要素をチャット入力欄へ追加します。指示を追加してメッセージを送信すると、AIがアプリの該当部分を更新します。
- テキストを直接編集を選び、プレビュー内の静的テキストをクリックして置換内容を入力します。保存をクリックする前に複数のテキスト要素を編集できます。保留中のテキスト変更を元に戻すには、編集を破棄をクリックします。
Escを押します。
3. 開発者モード（コードエディター）
制限なくカスタマイズできるよう、コードへ直接アクセスできます。- Monacoエディター: ブラウザー内でVS Codeのような操作感を提供します。
- Reactコンポーネント: 基盤となるReactコード、Tailwind CSSクラス、ロジックを編集します。
- ファイルツリー: プロジェクト構造内を移動します。
コードをダウンロードする
アプリ全体をZIPアーカイブとしていつでもダウンロードできます。- エディターのコードタブへ切り替えます。
- タブバーの**
...**メニューをクリックします。 - コードをダウンロードを選択し、すべてのソースファイルを含むZIPアーカイブを保存します。
.envファイルが含まれることがあります。ZIPを共有する前に確認してください。
コードをインポートする
ZIPをインポートして、アプリのコードを更新できます。- エディターのコードタブへ切り替えます。
- タブバーの**
...**メニューをクリックします。 - コードをインポートを選択し、20MB以下のZIPファイルを選びます。
- ソースファイルだけを含めてください。
node_modules、.next、その他のビルド成果物は自動的に無視されます。 - ZIPは既存のプロジェクトを置き換えます。含めなかったファイルは新しいバージョンから削除されます。
- ZIPにラッパーフォルダーが1つ含まれている場合、Teableはそのフォルダーを取り除きます。最上位のプロジェクトフォルダーをそのまま圧縮できます。
- インポートするプロジェクトには、プロジェクトのルートに
package.jsonが必要です。 - ZIP内のルートの
.envファイルは、アプリのシークレットへ読み込まれます。その他の.env*形式（.env.localなど）は無視されます。
シークレット
実行中のアプリで必要なAPIキー、認証情報、設定値には、シークレットを使用します。App Builderのチャットパネルで**+**メニューを開き、シークレットを選択します。
シークレット値を追加、削除、変更すると、アプリのプレビュー環境では新しい値が使用されます。公開済みアプリでは、再公開した後にのみ使用されます。シークレットの説明だけを編集した場合、再公開は不要です。
アプリファイルを管理する
App Builderは、アップロードファイル、生成された出力、ランタイムファイルをアプリのサンドボックスへ保存します。チャットパネルで**+** → その他 → ファイルを管理を開いて確認します。対応しているファイル形式はプレビューで開けます。ファイルのダウンロードや、不要になったファイルとフォルダーの削除も可能です。アプリへAI機能を追加する
アプリでレコードの要約、リクエストの分類、返信の下書き、アプリユーザーからの質問への回答が必要な場合は、AIを追加します。 「サポートチケット用のAI返信アシスタントを追加して」や「各フォーム送信を要約して」など、必要な内容をApp Builderへ伝えます。App BuilderはAIアクセスを有効にし、その機能のコードを追加できます。App BuilderがAI機能を追加すると、アプリのプレビューでは新しいバージョンが使用されます。公開済みアプリでは、再公開した後にのみ使用されます。
コードをGitHubと同期する
CloudのBusinessプラン以上で利用できます。
アカウントを接続してリポジトリを作成する
最初にアプリを少なくとも1回生成してください。アプリにコードがない間、GitHubボタンにはGitHubへ接続するには、まずアプリを生成してくださいと表示され、操作できません。1
GitHubパネルを開く
アプリのヘッダーにあるGitHubアイコンをクリックして、GitHub同期を開きます。アプリの編集権限が必要です。
2
アカウントを接続する
GitHubへ接続をクリックし、ポップアップウィンドウでインストールを完了します。個人アカウントまたは自分が管理する組織を選択します。ブラウザーでウィンドウがブロックされた場合は、ポップアップを許可してください。
3
アカウントを選択する
GitHubアカウントで接続済みアカウントを選択します。別のアカウントを接続するには**+**をクリックします。
4
リポジトリに名前を付ける
リポジトリ名には、アプリ名から生成された値があらかじめ入力されています。名前には文字、数字、
.、-、_を使用でき、最大100文字です。5
作成してリンクする
リポジトリを作成してリンクをクリックします。個人アカウントの場合は、もう1つのポップアップで作成を許可するようGitHubから求められます。
mainブランチへコミットします。アプリへのリンクと、両者が同期される仕組みを説明したREADMEも追加されます。アプリを既存のリポジトリへリンクすることはできません。
デフォルトでは、接続は作成者に属します。コラボレーターが同じ組織アカウントで構築できるようにするには、接続を選択し、他のメンバーにこの接続の使用を許可をオンにします。アプリの編集権限を持つ他のメンバーは、その組織内で自分のアプリ用リポジトリを作成できるようになります。GitHubではリポジトリの作成にアカウント所有者本人の許可が必要なため、個人の接続は共有できません。
同期の仕組み
環境ファイルがプッシュされることはありません。以下の環境変数とローカル開発をご覧ください。
パネルでは、リポジトリ名の横に現在の状態が表示されます。
競合を解決する
Teableがブランチを強制プッシュすることはありません。履歴が分岐すると、最新のアプリバージョンをteable-syncという名前のブランチへ移し、リンクを競合としてマークします。GitHubでteable-syncをmainへマージしてください。マージ内容が新しいアプリバージョンとして反映され、リンクは同期済みへ戻ります。競合中も、それ以降のアプリバージョンによってteable-syncブランチが更新され続けるため、マージ時には常に最新の作業が取り込まれます。
環境変数とローカル開発
リポジトリにはソースだけが保存されます。Teableは、プロジェクトのルート、サブフォルダー、コミット履歴のいずれにある場合でも、名前が.envで始まるファイルを決してプッシュしません。環境変数の値はアプリのシークレットに保存され、gitへ追加されることはありません。リポジトリの.gitignoreにはすでに.env*が記載されているため、ローカルのクローンから誤ってコミットされることもありません。
自分のコンピューターでアプリを実行するには、次の手順を行います。
1
クローンしてインストールする
リポジトリをクローンし、
pnpm installを実行します。2
変数をコピーする
GitHubパネルでローカル環境変数をコピーをクリックし、クリップボードの内容をプロジェクトのルートにある
.envファイルへ貼り付けます。3
アプリを起動する
pnpm devを実行します。.envからシークレットが作成または更新されることはありません。シークレットを変更した後は、変数をもう一度コピーして、ローカルの.envを更新します。
リポジトリのリンクを解除する
リポジトリ名の横にある削除アイコンをクリックし、確定します。同期は停止しますが、リポジトリとそのコードはGitHubに残ります。後から同じアプリを再度リンクすると、古いリポジトリへ再接続せず、新しいリポジトリが作成されます。公開と管理
アプリを公開する
アプリの準備ができたら、右上の公開ボタン（矢印アイコン）をクリックします。- 公開URL: Teableが、アプリ用の安全で一般公開されるURLを生成します。
- カスタムドメイン: 独自ドメインをアプリへ割り当てます。
- ブランド表示: 公開メニューのブランドを表示を使用して、公開済みアプリにTeableで構築バッジを表示するかどうかを制御します。公開後にこの設定を変更した場合は、再デプロイをクリックして適用します。
- 公開停止: 公開済みアプリでは、公開メニューの公開停止を使用して公開リンクをオフラインにします。
- アプリ設定の変更: 公開メニューにランタイム設定が変更されました。公開中のアプリへ適用するには再デプロイしてくださいまたはブランド設定が変更されました。公開中のアプリへ適用するには再デプロイしてくださいと表示されたら、再デプロイをクリックします。
- 公開済みアプリを開く: アプリを公開すると、公開の横にあるアイコンから、公開中のアプリを新しいタブで開けます。
Teableで構築バッジを非表示にするには、Businessプラン以上が必要です。
アプリの公開を停止する
公開済みアプリをオフラインにするには、公開メニューを開いて公開停止をクリックします。確定すると、公開アプリのURLへアクセスできなくなります。 公開を停止しても、アプリや編集履歴は削除されません。アプリの編集を続け、後から再公開できます。カスタムドメイン
カスタムドメインにはBusinessプラン以上が必要です。
app.yourdomain.comなどのサブドメインを推奨します。ドメインを入力すると、追加するDNSレコードがTeableに表示されます。DNSプロバイダーでレコードを追加し、反映を待ってからTeableでドメインを確認します。
teable.app配下で利用可能なサブドメインを使用し、teable.appの接頭辞を編集することもできます。例: your-name.teable.app
カスタムサイト情報
公開メニューのカスタムサイト情報を使用して、公開済みアプリのブラウザータブアイコン、ページタイトル、説明を設定します。ダイアログには、編集時にそれらを組み合わせた外観がプレビュー表示されます。
フィールドを空のままにすると、App Builderが記述した値を維持します。保存すると変更がアプリのプレビュー環境へ適用され、公開済みアプリでは再公開した後にのみ使用されます。
アプリへのログイン
アプリを使用する前に訪問者のサインインを必須にするには、アプリのヘッダーでログインを追加をクリックします。ログインを設定すると、ボタンがログイン設定へ変わります。 ログインを有効にする場合:- アプリユーザーの保存場所を選択します。ユーザーテーブルを作成するか、メールフィールドを持つ既存のテーブルを再利用できます。サインインした各ユーザーは1件のレコードとして保存され、同じユーザーテーブルを複数のアプリで再利用できます。
- メールOTP、Google、Teableなど、1つ以上のサインイン方法を選択します。利用可能な方法は、インスタンスの認証設定によって異なります。
- アクセスポリシーとして、誰でも登録可能、許可するメールドメイン、招待のみのいずれかを選択します。
バージョン履歴とロールバック
Teableは、すべてのデプロイを自動的に追跡します。- 履歴ボタン（時計アイコン）をクリックし、デプロイ済みのすべてのバージョンを一覧表示します。
- ワンクリックロールバック: 新しい更新によって問題が発生した場合、公開中のアプリを以前の安定版へすぐに戻せます。
自動修正
カスタムコードの変更によってビルドエラーが発生すると、デプロイは失敗します。- Teableは、エラーログの横に自動修正ボタンを表示します。
- クリックすると、AIがコンパイルエラーを分析し、問題を解決するためにコードを自動修正します。
アプリを削除する
アプリを削除するには、ヘッダーの設定ボタン（歯車アイコン）をクリックし、削除を選択します。ベストプラクティス
プロンプトのパターン、構築のヒント、ロールバックに関する助言、一般的なトラブルシューティングについては、App Builder実践ガイドをご覧ください。よくある質問
会話を消去するとアプリも削除されますか？
会話を消去するとアプリも削除されますか？
いいえ。会話を消去しても、現在のアプリの会話にあるチャット履歴だけが削除されます。アプリ自体は削除されません。会話が本題から外れ、最初からやり直したい場合に使用します。
アプリのコードをダウンロードまたはインポートするにはどうすればよいですか？
アプリのコードをダウンロードまたはインポートするにはどうすればよいですか？
エディターのコードタブへ切り替え、タブバーの**
...メニューをクリックして、コードをダウンロードまたはコードをインポートを選択します。インポートするZIPファイルは最大20MBで、既存のプロジェクトを置き換えます。保持するすべてのソースファイルを含めてください。インポートするプロジェクトには、ルートのpackage.jsonが必要です。ルートの.envファイルは、アプリのシークレット**へインポートされます。ログイン設定はいつ公開中のアプリへ適用されますか？
ログイン設定はいつ公開中のアプリへ適用されますか？
再読み込み後、ログイン設定がアプリのプレビュー環境へ表示されます。変更を公開済みアプリへ適用するには、アプリを再公開してください。
実行時にアプリからAIモデルを呼び出すにはどうすればよいですか？
実行時にアプリからAIモデルを呼び出すにはどうすればよいですか？
返信アシスタント、送信内容の要約、リクエスト分類など、必要なAI機能をApp Builderへ伝えます。App BuilderはAIアクセスを有効にし、その機能のコードを追加できます。App Builderが変更を完了すると、アプリのプレビューで新しいバージョンが使用されます。公開済みアプリでは、再公開した後にのみ使用されます。このアプリ経由のAI呼び出しは、クレジット使用量の詳細にアプリAIとして表示されます。
組み込みAIとアプリ内AIにはどのように課金されますか？
組み込みAIとアプリ内AIにはどのように課金されますか？
組み込みAIには、AIフィールド生成、AIチャット、IMボット、App Builderなど、Teableで直接利用できるAI機能が含まれます。現在、これらの機能では大幅に割引されたレートでクレジットが使用されます。アプリ内AIは、App Builderで作成したアプリ内で使用されるAI機能を指します。使用量は選択したモデルプロバイダーの公式API料金で課金され、上乗せや割引はありません。API使用量1米ドルは100クレジットに相当します。
以前のバージョンへロールバックするにはどうすればよいですか？
以前のバージョンへロールバックするにはどうすればよいですか？
履歴ボタン（時計アイコン）をクリックしてデプロイ済みバージョンを表示し、公開中のアプリを以前の安定版へ戻します。
App Builderでエージェントが別の会話で処理中と表示されるのはなぜですか？
App Builderでエージェントが別の会話で処理中と表示されるのはなぜですか？
各ユーザーは、AIチャットとApp Builderを含め、同時に最大3つのエージェントを実行できます。App Builderでエージェントが別の会話で処理中と表示された場合、別のタスクがまだ実行中です。前のタスクが完了するまで待ってから続行してください。
App Builderの実行に失敗した場合、クレジットはどのように返還されますか？
App Builderの実行に失敗した場合、クレジットはどのように返還されますか？
App Builderの1回の実行には、複数の処理ステップが含まれることがあります。会話ページと請求ページの両方に、その実行の合計クレジットが表示されます。Cuppyがすでに完了して保存した作業は、引き続き利用できます。予期しないエラーによって最後のステップが中断された場合、その中断されたステップのクレジットは自動的に返還されます。同じアプリの会話で作業を続けられます。
セルフホスト版のApp Builderはどこで設定しますか？
セルフホスト版のApp Builderはどこで設定しますか？
Teableをセルフホストで実行している場合は、AI設定ページの手順に従ってください。App Builderで独自キー（BYOK）を使用する場合、チャットモデルはOpenAI CompatibleまたはAnthropicプロバイダーから選択する必要があります。デプロイのサポートについては、support@teable.aiまでお問い合わせください。
デプロイエンジンでVercelを選択する場合は、Teableインスタンスとオブジェクトストレージ（MinIO / S3）の両方が一般公開でアクセスできることを確認してから、AI設定ページの公開アクセスをテストを使用します。Teable Infraを選択した場合、この確認は不要です。