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
沖縄銀行、NI+C支援のもとSAS活用–収益管理システムを更改
IT関連
2023-03-26 04:05
NEC、ESGの取り組み公開–環境やセキュリティ、働きがいなどに注力
IT関連
2022-08-07 06:20
ESGが投資基準として重要な時代に–既存のESGファンドは玉石混交
IT関連
2021-04-20 09:03
働きながら旅する「デジタルノマド」–リモートワークならではの新ライフスタイル
IT関連
2022-04-21 02:04
世界IT支出、2022年は5.1%増–ガートナー
IT関連
2022-01-20 02:08
これからのワークスタイルはどうあるべきか–IBMとシスコの取り組みから探る
IT関連
2024-02-09 23:14
Twitter版Clubhouseの「Spaces」、ブラウザ版からも参加可能に
企業・業界動向
2021-05-29 06:25
富士通、データ&セキュリティ領域の新研究拠点をイスラエルに開設
IT関連
2022-11-30 05:00
生産地も分かる“ニコンのデジタル一眼史”  :荻窪圭のデジカメレビュープラス(1/3 ページ)
くらテク
2021-04-15 10:46
Instagramが全ユーザーへ「セキュリティの確認」を通知 数カ月以内に案内
企業・業界動向
2021-07-15 17:14
消費者庁、スクエニなど2社に措置命令 スマホゲーム「FFBE幻影戦争」のガチャに優良誤認
企業・業界動向
2021-06-30 17:56
Reactベースのフレームワーク「Next.js 13.5」正式リリース。使用メモリ40%削減、ローカルサーバ起動の高速化など性能向上
JavaScript
2023-10-03 03:10
大学VCの慶應イノベーション・イニシアティブが2号ファンドを103億円で募集終了
VC / エンジェル
2021-01-26 18:28
AGC、手作業が多い貿易業務をSaaSで効率化–全社統一システム導入
IT関連
2024-12-15 20:01