AIにフルスタックアプリの生成を指示、Webブラウザ上のNode.js環境でそのまま実行できる「bolt.new」、StackBlitzが公開

今回は「AIにフルスタックアプリの生成を指示、Webブラウザ上のNode.js環境でそのまま実行できる「bolt.new」、StackBlitzが公開」についてご紹介します。

関連ワード (無料、発生、選択等) についても参考にしながら、ぜひ本記事について議論していってくださいね。

本記事は、Publickey様で掲載されている内容を参考にしておりますので、より詳しく内容を知りたい方は、ページ下の元記事リンクより参照ください。


WebAssemblyを用いてWebブラウザ上でNode.js環境を実現する「WebContainer」などを提供するStackBlitzは、Webブラウザ上でAIにフルスタックアプリの生成を指示し、そのままWebブラウザ上のNode.js環境で実行やデバッグなどを行える新サービス「bolt.new」を公開しました。

bolt.new

StackBlitz CEOのEric Simons氏がViteConf 2024の基調講演で発表しました。

StackBlitz CEOのEric Simons氏

bolt.newはGitHubでサインオンすることにより誰でも無料で試すことができます。

bolt.newの大きな特徴は3つあります。

1つ目は、AIがフルスタックアプリケーションの生成を、必要なパッケージやライブラリの導入からコードの生成、ビルドまで含めて最初から最後まで実行してくれる点。

2つ目は、AIが生成したフルスタックアプリケーションはそのままWebブラウザ上に構築されているNode.js環境へデプロイ、実行されるため、フルスタックアプリケーションの開発、実行、デバッグがWebブラウザだけで完結する点。

3つ目は、実行環境とAIのプロンプト領域が連係しており、エラーメッセージがコンソールではなくAIのプロンプト領域に直接通知されることで、コンソールなどからコピーすることなく、速やかにエラーメッセージへの対応をAIに指示できる点です。

生成AIがフルスタックアプリを自動生成

下記は実際にbolt.newを試したところです。

AIにプロンプトで、ToDoアプリをReactとTailwindを使って開発せよ(「build a todo in react using tailwind」)と入力すると、AIによってファイルが次々に生成されます。

bolt.newを試したところ

最後にAIが「npm install && npm run」を実行し、プレビューが表示されます。

AIが「npm install && npm run」を実行

下記はデモ動画から。プロンプトでデプロイせよ「Deploy some where」と指示したところ。

すると、AIが自動的にNetlifyを選択してデプロイを実行してくれます(赤線はPublickeyによる)。人間がNetlifyへログインすることも不要で、デプロイが完了してアプリケーションが実行されるまで、すべてをAIが自動的にやってくれます。

AIが自動的にNetlifyを選択してデプロイ

また、下記はAIがアプリケーションを開発している途中でエラーが発生した場合。AIがエラーメッセージを取得してプロンプト領域に表示します。

AIと実行環境が連係していることで、このように実行時やビルド時のエラーを人間がコピーしてAIに入力するなどの作業をすることなく、AIがエラーを受け取れるようになっているわけです。

その上で、人間が修正せよ(「Fix errors」)と指示すれば、AIがエラーメッセージを参照して解決してくれます。

AIがエラーメッセージを取得してプロンプト領域に表示

このようにbolt.newは生成AIによるアプリケーション開発機能と、Webブラウザ上に構築されたNode.js環境との組み合わせにより、これまでのコードエディタ上で生成AIを用いたコード生成などとは異なる開発者体験を得ることができるサービスとなっています。

StackBlitz CEOのEric Simons氏は、bolt.newのコア部分をオープンソース化することも発表しました。

AIの進化とWebAssemblyの進化が開発環境を変える

このbold.newはStackBlitzが開発したWebブラウザ上のNode.js環境であるWebContainerを実行環境として用いています。

WebContainerはWebAssemblyを用いてWebブラウザ上にNode.js環境を実現していますが、今後WebAssemblyの進化によって、これまでDockerコンテナなどが実現してきたような汎用のアプリケーション実行環境やパッケージング環境がWebブラウザも含めたWebAssemblyランタイム上で実現されることが期待されます。

参考:WebAssemblyをコンテナイメージとし、コンテナレジストリなどで配布可能にする「Wasm OCI Artifact layout」仕様が登場

またローカルマシンにおける生成AIの能力も今後さらに発展していくことでしょう。

この両者の進化が組み合わされることで、今後のローカルマシン上でのAIを用いたアプリケーション開発環境は大きな進化を迎えることになるのではないでしょうか。

COMMENTS


Recommended

TITLE
CATEGORY
DATE
グーグルが次期Androidアップデート内容を発表、危険なパスワードの警告機能やSMSの送信予約機能が追加
ソフトウェア
2021-02-25 22:20
「複数のクラウド環境にまたがる作業」が障壁と88%が回答–ネットアップ調査
IT関連
2023-04-11 16:04
JR九州、AI活用した案内システム内「AI駅員」の実証実験を開始
IT関連
2023-09-14 02:16
Datadog、日本法人の社長に正井拓己氏が就任
IT関連
2024-02-10 15:38
グーグルの「Bard」、音声読み上げや会話の固定などが可能に
IT関連
2023-07-15 17:03
WindowsにAIチャットを搭載した「Windows Copilot」、プレビューが開始
IT関連
2023-07-04 06:25
大和ハウス子会社にランサムウェア攻撃、個人情報15万件が暗号化
セキュリティ
2021-06-17 06:56
「コンポーザブル」な企業で重要性を増す技術者の役割
IT関連
2022-09-10 19:52
川崎汽船、「ChatGPT」導入コンサルティングサービスを導入
IT関連
2023-08-31 02:33
アップルが(ついに)天気アプリをアップデート、ダイナミックな背景や天気図、詳しいデータを提供
ソフトウェア
2021-06-09 16:07
食事の計画と食料品のコンシェルジュサービスを組み合わせたドイツKitchenfulの新事業
フードテック
2021-07-25 02:25
第一生命保険、エクサウィザーズのAI開発環境を導入–書類のひな型作成に活用
IT関連
2023-11-03 23:47
Slack、立ち話感覚の「ハドルミーティング」など複数の新機能
IT関連
2021-07-02 00:24
弁護士ドットコム、AI搭載型の「企業法務向け書籍検索サービス」を提供開始
IT関連
2023-12-17 17:46