Bolt.newとは？AIで簡単に作るWebアプリ

この記事は虎の穴ラボ Advent Calendar 2024の17日目の記事です。

---

こんにちは、虎の穴ラボのHoshiと申します。
今回は最近話題の生成AIでWebアプリをプロンプトの指示だけで作成ができるBolt.newをご紹介したいと思います！

目次

Bolt.newの特徴 ── AIでWebアプリをプロンプト指示だけで生成

上記でも述べました通り、AIへの指示のみで以下のことが実現できるWebアプリケーションになります。

• NodeやTypeScriptで作成されたWebアプリを生成
• 実行結果をリアルタイムで確認できる
• Netlifyというホスティングサービスへデプロイして公開

オンラインIDEを提供しているStackBlitz社が提供しており、制限はありますが無料で使用ができて気軽に触ることができます！ 2024年10月4日にX(旧Twitter)の投稿で発表されました。

What if AI dev products (Claude, v0, etc) let you install packages, run backends & edit code?

Introducing https://t.co/XXroNZNn7H, by StackBlitz:

- Prompt, edit, run & deploy fullstack apps
- Full dev env (npm, Vite, Next.js, …) w/ frontier AI
- Free! pic.twitter.com/dhkKogq3xY

— StackBlitz (@stackblitz) 2024年10月3日

実際に動かしてみた

とりあえず動かしてみましょう。以下からアクセスが可能です。

bolt.new

1. Bolt.newにログイン

使用するためにはGitHubアカウントかメールアドレスでの登録が必要です
左上のSign in、Get Startedボタンから登録が可能です（アカウント作成の入力内容は割愛します）

2. 実際に作成したいWebアプリのプロンプトを入力

アカウント登録、ログインが完了したら作成するWebアプリのプロンプトを入力します。
ここでは画像のように入力してTODOアプリを作成します。

入力すると↓のように、npm installや各種ソースコードの自動生成をしてくれます。

3. アプリの実行

生成が完了すると、自動で実行され画面の右側のPreviewパネルに実行結果が表示されます。
一方Codeパネルには生成されたコードが表示されますので、直接編集することも可能です。

無事、青を基調としたTODOアプリができました。(ﾊﾟﾁﾊﾟﾁﾊﾟﾁ)

ここからボタンの色を緑にしてくださいなどの追加の指示を与えて調整していきます。

プロンプトにはフレームワークの指定などもできるようです。
何も指示しないとReactでアプリを作成するようですが、Vueで作成してくださいなどの指示を入れると対応したフレームワークで作成してくれます。

また、画面左のチャット部分にあるように以下の項目も出力されるので、何が行われてコードが生成されたかも確認できます。

• コード生成の際に実行されたコマンド
• ファイル生成などの履歴
• 生成されたコードの解説

画面右上にあるボタンから以下のことも可能ですが、詳細はここでは割愛します。

• Netlifyへのデプロイ、公開
• 同社のStackBlitzサービスでコードを開く
• 生成したコードのzipダウンロード

ちょっと詳しく紹介

仕組み

Bolt.newはStackBlitzが開発したWebContainerの技術を利用して作成されています。
WebContainerにより、ブラウザ内で直接Node.jsの環境を実行してローカル環境なしにブラウザ上でサーバーサイドコードの実行を可能にしています。

料金について

料金については、StackBlitzのプランごとに使用できるトークン使用量を選ぶことが可能です。

StackBlitz Pricing

StackBlitz | Pricing | Instant Dev Environments | Click. Code. Done.

以下はProプランでのトークン使用量ごとの料金表になります。
年額も選択することができ、2024/12/4時点では10%OFFになるようです。

ただ、Personal（無料）とProプランでは商用利用はできないので、注意が必要です。
※料金プランなどは変更される可能性があるため、公式サイトなどで最新情報を確認してください。

OSSについて

githubからOSS版を取得し、ローカル環境での環境構築も可能です。

github.com

こちらもローカルでの導入方法など詳細を、後日ご紹介できればと思っています。
Pull requestsを見ても様々な方がプルリクエストを出しており、Dockerへの対応などもマージされています。

最後に

今回は、StackBlitz社から発表されたBolt.newのご紹介をさせていただきました。
AI駆動のサービスでWebアプリを生成して、編集・実行・デプロイまでできるサービスができて、AIの日進月歩に驚くばかりです。今回はご紹介のみでしたが、詳細も今後追っていこうかと思っています。
虎の穴ラボ社内でもAIを活用した事例などの情報交換も活発で、社内のエンジニアの方々も勉強熱心な方ばかりで自分も負けずに学習を続けられればと思います！

採用情報

虎の穴ラボでは一緒に働く仲間を募集中です！

この記事を読んで、興味を持っていただけた方はぜひ弊社の採用情報をご覧ください。

toranoana-lab.co.jp