AIチュートリアル

Puter AI Builderでウェブサイトを構築・公開

Puter AI Builderをローカルにインストールして実行し、自然言語の指示からウェブサイトやアプリケーションを作成する方法を解説します。チャットやビジュアル編集による改善、完成したプロジェクトの公開に加え、統合サービス、バージョン履歴、サポート窓口、ライセンスについても説明します。

2026年9月22日約8分で読了

AI Builderのロゴ

AI Builderは、コードを書く代わりに自然言語の指示でウェブサイトやアプリケーションを作成できるオープンソースのツールです。AI支援による作成、ライブプレビュー、ビジュアル編集、公開機能を、ブラウザ上のワークフローに統合しています。

このプロジェクトは、Lovable、Replit、v0などのツールに代わるオープンソースの選択肢として位置付けられています。Apache License 2.0の下で公開されているため、フォークしてカスタマイズしたり、ニーズに合わせて変更したりできます。

AI Builderでできること

AI Builderは、アイデアを実際に動作するウェブサイトやアプリケーションに変えます。作りたいものを説明すると、ビルダーで結果を確認し、変更を依頼して、準備が整ったプロジェクトを公開できます。

このプラットフォームはPuter.jsを使用して、認証、ストレージ、データベース、AI、ネットワーク、リアルタイム機能、サーバーレス関数、ホスティングなどの統合アプリケーションサービスを提供します。READMEでは、プロジェクトに追加設定を行わなくても、これらのサービスを統合して利用できると説明されています。

主な機能

AI支援による構築: コーディングや技術的な知識がなくても、平易な言葉でウェブサイトやアプリケーションを説明できます。
ライブプレビュー: プロジェクトが形になっていく様子を確認し、変更しながら実際に試せます。
チャットベースの編集: 会話を通じて、プロジェクトの一部を更新するようAIに依頼できます。
ビジュアル編集: プレビュー内の要素を選択し、何を変更したいのかをAIに正確に伝えられます。
統合サービス: Puter.jsを通じて、認証、ストレージ、データベース、AI、ネットワーク、リアルタイム機能、サーバーレス関数などを利用できます。
公開: 共有する準備が整ったプロジェクトを公開URLで公開できます。
バージョン履歴: 保存したバージョンを確認し、試行錯誤中に以前の状態へ復元できます。

AI Builderをローカルにインストールする

ソースリポジトリからプロジェクトを実行するには、開発環境でGit、Node.js、npmが利用できることを確認してください。その後、リポジトリをクローンし、ディレクトリに移動して依存関係をインストールし、開発サーバーを起動します。

git clone https://github.com/HeyPuter/builder
cd builder
npm install
npm run dev

git cloneコマンドはリポジトリをダウンロードします。npm installは依存関係をインストールし、npm run devはローカルの開発プロセスを起動します。開発サーバーに表示されたURLを開き、ブラウザでビルダーを使用してください。

ライブデモを試す

最初にプロジェクトをインストールしたくない場合は、公式のAI Builderライブデモを利用してください。作成、編集、プレビュー、公開のワークフローをすぐに試せます。

最初のプロジェクトを作成する

アイデアから始める: ローカルアプリケーションまたはライブデモを開き、作りたいウェブサイトやアプリケーションを平易な言葉で説明します。
生成されたプロジェクトを確認する: ライブプレビューで、アイデアがどのように動作するインターフェースへ変換されたかを確認します。
チャットで変更を依頼する: 何を追加、削除、調整したいのかを説明します。AI Builderは、会話を通じた更新に対応するよう設計されています。
ビジュアル編集を使う: プレビュー内の特定の要素を選択し、その要素に対する具体的な指示を入力します。
反復しながらテストする: 変更するたびにライブプレビューを確認し、プロジェクトを段階的に改善します。
必要に応じて以前のバージョンに戻す: バージョン履歴で保存済みの状態を確認し、試行錯誤中に以前のバージョンへ戻します。
結果を公開する: プロジェクトの準備が整ったら、公開URLで公開して他の人と共有します。

プロンプトの例

次のような簡単な説明から始められます。

小規模なソフトウェアプロジェクト向けに、明確な見出し、短い機能紹介セクション、行動喚起ボタンを備えたランディングページを作成してください。

最初の結果が表示されたら、より具体的な指示を続けて入力します。たとえば、セクションの修正、プレビューで選択した要素の変更、レイアウトの調整などをビルダーに依頼できます。READMEでは特定のプロンプト形式を指定していないため、平易な言葉で指示し、ライブ結果を見ながら反復してください。

AI Builderワークフローの応用ヒント

小さな単位で反復する

すべての変更を一度に依頼するのではなく、ライブプレビューを確認しながら、目的を絞った更新を順番に行います。どの指示が特定の結果を生んだのかを把握しやすくなり、プロジェクトの進展に合わせて評価できます。

チャットとビジュアル編集を組み合わせる

プロジェクト全体に関わる変更にはチャットを使い、より正確な更新が必要な場合はプレビューで個別の要素を選択します。この組み合わせにより、会話による操作と要素単位の具体的な指示を両立できます。

試行中にバージョン履歴を使う

さまざまなアイデアを試しながら、バージョンを保存して確認します。試行によってプロジェクトが望ましくない方向に進んだ場合は、手作業で作り直すのではなく、以前の状態に戻します。

統合サービスを活用する

静的なインターフェース以上の機能が必要なプロジェクトでは、Puter.jsが提供するサービスを検討してください。このプラットフォームは、認証、ストレージ、データベース、AI、ネットワーク、リアルタイム機能、サーバーレス関数を統合しており、Puterベースの環境内でこれらのニーズに対応できます。

準備が整ってから公開する

公開URLを共有する前に、プレビューで変更をテストしてください。プロジェクトが意図した仕上がりになったら、公開して他のユーザーがアクセスできるようにします。

サポートとコミュニティ

バグや機能リクエストについては、リポジトリでIssueを作成してください。また、Xでプロジェクトをフォローするか、Puter開発者向けリソースをご覧ください。

セキュリティ上の問題や不正利用の報告は、security@puter.comまでお送りください。メンテナーへの一般的な問い合わせは、hi@puter.comまでメールしてください。

ライセンス

AI Builderは、コンポーネントに別途記載がない限り、Apache License 2.0の下でライセンスされています。付属するサードパーティ製ライブラリやフォントには、それぞれ独自のライセンスが適用される場合があります。詳細は、リポジトリのサードパーティ通知をご確認ください。

まとめ

AI Builderは、自然言語によるアイデアをウェブサイトやアプリケーションに変える、AI支援の包括的なワークフローを提供します。npmでローカルにインストールするか、ライブデモを試してみてください。AIチャット、ビジュアル編集、ライブプレビュー、バージョン履歴、公開機能を活用して、最初のコンセプトから共有可能なプロジェクトまで進められます。