メインコンテンツへ移動
AIチュートリアル

オープンソースAIアプリビルダーでフルスタックNext.jsアプリを構築・セルフホストする

WindowsへのオープンソースAIアプリビルダーのインストール、必要なAPIキーの設定、フルスタックアプリの生成、ビジュアルまたはコードでの編集、データ管理、GitHubとドメインの接続、安全な本番環境へのデプロイに向けたビルダーの準備方法を学びます。

約14分で読了
オープンソースAIアプリビルダーでフルスタックNext.jsアプリを構築・セルフホストする

このAIアプリビルダーでできること

このオープンソースのWebアプリケーションは、自然言語のプロンプトを完全なフルスタックNext.jsプロジェクトに変換します。フロントエンド、バックエンド、データベース、ホスティング環境、認証フロー、デプロイパイプラインを手作業で組み立てる代わりに、作成したいアプリケーションを説明し、ライブブラウザプレビューで構築の様子を確認できます。

オープンソースAIアプリビルダーのインターフェース

生成されるアプリケーションは、ロックされたノーコード成果物ではなく、実際のNext.jsプロジェクトです。すべてのファイルを確認・変更でき、プロジェクトをGitHubに接続したり、カスタムドメインを設定したり、Vercel、Docker、その他のNode.js環境にデプロイしたりできます。

このビルダーはマルチテナント利用にも対応するよう設計されています。プロジェクトは分離されたサンドボックスで実行され、ユーザー、チーム、顧客ごとに分離できます。そのため、個人開発だけでなく、別のプロダクトにアプリ生成機能を組み込む用途にも適しています。

主な機能

プロンプトからアプリケーションを生成

自然言語でアプリケーションのアイデアを入力すると、AIがフルスタックのNext.jsアプリケーションを生成します。エージェントの作業中はライブプレビューが更新されるため、別途ビルドとデプロイが完了するまで待たずに進捗を確認できます。

ビジュアル編集とソースコード編集

プレビュー上で要素を選択し、テキストや色などのプロパティを変更できます。ビルダーは変更内容を該当するソース行に反映し、プロジェクトを自動的に再ビルドします。より大きな変更には、統合されたMonacoエディターから生成されたすべてのファイルにアクセスでき、Visual Studio Codeに似た編集体験を利用できます。

組み込みのプロジェクト基盤

  • 各プロジェクト専用のSQLデータベース。開発環境と本番環境は分離されています。
  • レコードの閲覧、クエリの実行、スキーマとマイグレーションの確認、バックアップを行うツール。
  • 分析、制限、環境変数、シークレット、スケジュールジョブ、ランタイムログ、モバイルビルド、決済、設定を管理するプロジェクト機能。
  • 生成アプリケーション向けのホスティング、SSL、CDN対応、デプロイパイプライン。
  • プロジェクトがアイドル状態になると、必要に応じて起動する分離サンドボックス。

バージョン管理と移植性

AIによるビルドのたびに、復元可能なチェックポイントが作成されます。差分ビューアーでバージョン間の変更を確認でき、生成された更新が意図した結果にならない場合は以前の状態に戻せます。プロジェクトはインポートコードを使って複製または移行することもできます。

連携とデプロイオプション

  • 変更のプッシュとプルに対応した双方向GitHub同期。
  • エージェントがデザインソースとして利用できるFigmaフレームリンク。
  • ガイド付きDNS設定とHTTPSに対応したカスタムドメイン。
  • Vercel、Docker、または標準的なNode.js環境へのデプロイ。
  • 顧客向けプロダクトのためのホワイトラベルおよびマルチテナント基盤。

技術スタック

このビルダーは、App Router、サーバーコンポーネント、ストリーミングを含むNext.js 16とReact 19を使用しています。TypeScriptがエンドツーエンドの型安全性を提供し、Tailwind CSS 4がスタイリングシステムを担います。

ブラウザベースのコードエディターにはMonacoを使用しています。インターフェースでは、Radix UI、Lucideアイコン、Sonner通知、cmdkコマンドパレットも利用しています。依存関係は意図的に最小限に抑えられており、認証、決済、AI SDKはバンドルせず、単一のAPIキーを介して通信します。

インストール要件

ドキュメントに記載されたインストーラーはWindowsを対象としており、以下の要件があります。

  • オペレーティングシステム: Windows 10またはWindows 11。
  • シェル: PowerShell 5.1またはPowerShell 7以降。
  • ネットワーク: インストーラースクリプトと必要なプロジェクトファイルをダウンロードするためのインターネット接続。
  • 権限: 標準ユーザーアカウントで十分です。

READMEには、手動でパッケージをインストールするコマンドや、インストーラーのプロンプト一覧は記載されていません。プロジェクトが公開しているPowerShellインストーラーページを使用し、そこに表示される手順に従ってください。

ビルダーをセットアップする

  1. PowerShellのバージョンを確認します。 PowerShellを開き、環境が最小要件を満たしていることを確認します。
  2. インストーラーページを開きます。 プロジェクトが提供するPowerShellインストーラーのリンクにアクセスします。
  3. 実行前にスクリプトを確認します。 リモートからダウンロードしたPowerShellスクリプトと同様に、内容を確認し、提供元が想定されたプロジェクト発行者であることを確認してください。
  4. 記載されたインストール手順を実行します。 掲載されていないコマンドに頼らず、インストーラーページの最新手順に従ってください。
  5. APIキーを設定します。 アプリケーションのビルドにはAPIキーが必要です。READMEには、1つの環境変数を通じて指定するとありますが、その変数名は記載されていません。インストールしたプロジェクトの設定ドキュメントに示されている名前と値の形式を使用してください。
  6. Webアプリケーションを起動します。 インストーラーまたはローカルプロジェクトのドキュメントに記載された起動手順を使用し、表示されたローカルアドレスをブラウザで開きます。

ソースコードは無料で実行できますが、AIによるビルドではAPIクレジットを消費します。READMEによると、初期クレジットは無料で利用でき、使用量が増えると料金が発生します。

最初のアプリケーションを作成する

1. 焦点を絞ったプロンプトから始める

想定するユーザー、主要な画面、データ、期待する操作を説明します。具体的な依頼のほうが、広範な指示よりもエージェントに明確な実装目標を与えられます。

公開投稿フォーム、ステータス別にフィードバックを一覧表示するダッシュボード、各項目をチームメンバーが更新できる詳細ページを備えた顧客フィードバックポータルを構築します。

この例は、ビルダーのドキュメントに記載された機能の範囲内に収まっています。フルスタックのNext.js生成、データベース連携の動作、ブラウザー上での編集に対応しています。生成された実装を本番環境で利用できる状態と判断する前に、必ず確認してください。

2. ライブプレビューを確認する

エージェントがファイルを生成してアプリケーションを再ビルドしている間も、プレビューを表示したままにします。サンドボックスのインターフェースには、アイドル状態の環境が起動中の場合など、その状態が表示されます。失敗したように見える状態が、何の説明もなく表示されることはありません。

3. インターフェースを視覚的に調整する

小さなデザイン調整が必要な場合は、プレビュー内の要素を選択します。たとえば、プレビュー上で見出し、ボタンラベル、色を直接変更できます。対応するソースが自動的に更新され、再ビルドされます。

4. 生成されたコードを確認する

Monacoエディターを開き、生成されたルート、コンポーネント、データベースアクセス、設定を確認します。出力は標準的なTypeScriptおよびNext.jsのコードベースであるため、手動で改良し、成果物を完全に自分で管理できます。

5. プロジェクトデータを扱う

データベースパネルでスキーマとマイグレーションを確認し、レコードの閲覧や編集、SQLクエリの実行を行えます。開発用データと本番用データを分離し、大規模なスキーマ変更やデータ変更を行う前にバックアップを作成してください。

6. アプリケーションを公開する

ライブプレビューは公開アドレスに公開できます。後から既存のドメインを接続したり、インターフェースから購入したりできます。ドメイン設定では、ルートドメイン、www.アドレス、カスタムサブドメインに加え、DNSステータスとHTTPSリダイレクトをサポートしています。

GitHubリポジトリを接続する

コードをチームの通常の開発ワークフローに組み込みたい場合は、生成されたプロジェクトをGitHubリポジトリに接続します。同期は双方向で機能するため、生成した変更をリポジトリにプッシュし、外部の変更をビルダーに取り込めます。

  1. アプリケーションを保存するリポジトリを作成または選択します。
  2. ビルダーのGitHub連携を通じて接続します。
  3. 動作確認済みの生成チェックポイントをプッシュします。
  4. 通常のレビュー手順で外部変更を行います。
  5. 変更をビルダーに取り込み、ライブプレビューで確認します。

両方の場所で同じ領域を同時に編集することは避けてください。頻繁に小さな単位で同期すると、競合の把握と解決が容易になります。

高度な利用のヒント

Figmaデザインから生成する

すでにデザインがある場合は、Figmaのフレームリンクをチャットに貼り付けます。エージェントがそのフレームから直接構築できるため、デザインを手動でプロンプトに変換する手間を減らせます。静的デザインには表現されていない可能性があるレスポンシブ動作とアプリケーションロジックを確認してください。

大規模な修正の前にチェックポイントを作成する

大規模なアーキテクチャ変更や視覚的変更を依頼する前に、安定したチェックポイントが存在することを確認します。生成後は差分ビューアーを使い、変更内容を正確に確認します。更新によって回帰が発生した場合は、すべてのファイルを手動で元に戻すのではなく、以前のチェックポイントを復元してください。

開発用データと本番用データを分離する

まず開発用データベースに対してマイグレーションとクエリをテストします。本番スキーマを変更する前に重要なレコードをバックアップし、環境変数とシークレットが意図した環境に割り当てられていることを確認してください。

適切なデプロイ先を選択する

VercelはNext.jsアプリケーションに自然なデプロイ先です。一方、Dockerはランタイムの移植性を高め、より細かな制御を可能にします。標準的なNode.jsホストもサポートされています。どの選択肢を採用する場合でも、Next.js 16、プロジェクトの環境変数、データベース接続、SSL、ドメイン設定との互換性を確認してください。

マルチテナントの所有権ルールを計画する

プロジェクトの分離機能は組み込まれていますが、顧客向け製品には明示的な認可と所有権チェックが必要です。各プロジェクトについて、どのユーザーまたはチームが作成、閲覧、変更、公開、エクスポート、削除できるかを定義してください。

本番環境でのセキュリティに関する警告

このビルダーには意図的にログイン機能がありません。公開されたビルダーのURLにアクセスできる人は、設定されたAPIキーのクレジットを使用できる可能性があります。認証とプロジェクト所有権チェックを追加せずに、信頼できないユーザーへビルダー自体を公開しないでください。

  • 公開する前に、任意の認証システムを追加します。
  • すべてのプロジェクト単位の操作に認可を適用します。
  • APIキー、プロジェクトシークレット、環境変数を保護します。
  • 利用量と支出の上限を設定します。
  • 予期しない活動がないか、ランタイムログと分析情報を確認します。
  • 顧客のアクセスを許可する前に、テナント分離をテストします。

READMEには、これらの追加に必要なフックがすでに用意されていると記載されています。ただし、初期インストールが制限のない公開アクセスに対して安全であるとは記載されていません。

ライセンスに関する注意

READMEのライセンスセクションには、プロジェクトがMIT Licenseのもとで公開されており、法的条件についてはリポジトリのLICENSEファイルを参照するよう記載されています。しかし、提供されたREADMEの上部に表示されているバッジはLGPL 2.1を示しています。これらの記載は矛盾しているため、ソフトウェアを変更、再配布、組み込み、販売する前に、インストールするバージョンの実際のLICENSEファイルを確認してください。

まとめ

このAIアプリビルダーは、プロンプトベースの生成とライブプレビュー、ソースコードへの完全なアクセス、SQLデータツール、GitHub同期、チェックポイント、ドメイン、柔軟なデプロイを組み合わせています。まずWindows PowerShellインストーラーを使い、ドキュメントに記載されたAPIキー変数を設定して、範囲を明確に定義したアプリケーションを生成します。その後、ビジュアルエディターとコードエディターの両方で改良を重ねます。実際のユーザーに提供する前に、認証、所有権の適用、利用額の制限を追加してください。