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
JR東、車内販売中止 新幹線や特急「乗る前に購入して」
くらテク
2021-01-16 17:37
ロジクールのビデオ会議ブース「Project Ghost」を体験–相手がより身近に
IT関連
2023-05-23 18:37
オープンソースのWebAssemblyサーバレス基盤「Wasm Workers Server 1.0」正式リリース。RubyとPythonのWASMランタイムに対応し、Ruby/Pythonでの記述が可能に
JavaScript
2023-03-09 18:07
マイクロソフト、「Windows 11 22H2」の新機能をプレビュー版で提供開始
IT関連
2022-10-08 11:28
モニター裏に設置できる収納ラック、デッドスペースを有効活用 サンワサプライ
企業・業界動向
2021-05-28 13:09
NTTデータの2022年度業績は増収増益–世界市場を狙う一端が鮮明に
IT関連
2023-05-13 10:20
ロボタクシーでモビリティの革命を目指すクロアチアのRimac Automobili
モビリティ
2021-06-14 05:04
「公道を走れる電動キックボード」のシェアサービス開始 4月下旬に
企業・業界動向
2021-04-16 15:43
生成AIによるプログラミング支援のCodeium、VSCodeフォークの「Windsurf」エディタ発表。変数名を1カ所変更して残りの修正を生成AIが行うなど高度な開発支援を提供へ
機械学習・AI
2024-11-15 06:55
住宅建築の技能をビデオで学べるプラットフォーム「Copeland」
EdTech
2021-06-07 22:31
Appleマップ、「評価および写真の紹介」提供開始でGoogle対抗 食べログ掲載店などユーザーが独自評価
IT関連
2021-04-24 08:45
製造業の調達にデジタル革命、先駆者・ミスミに続け 最適な発注先を自動選定
IT関連
2021-03-24 03:33
16歳が作ったバーチャル学習ツール「Hours」を高校生向け学習コミュニティのFiveableが買収
EdTech
2021-05-14 04:37
NSA、TLSプロトコルの更新を連邦機関のシステム管理責任者に勧告–オランダでも
IT関連
2021-01-21 06:26