日本ではまだあまり話題になっていませんが、Bolt.newというAIツールを紹介します。
最近、私はbolt.newというツールを試す機会がありました。これは、ブラウザ上でAI駆動のフルスタックWeb開発を可能にする新しいプラットフォームです。今回は、その体験談をお伝えしたいと思います。
bolt.newとは？
bolt.newは、AIの力を活用して、ブラウザから直接フルスタックアプリケーションの作成、実行、編集、デプロイを可能にするWebベースの開発環境です。従来のAIコード生成ツールとは異なり、bolt.newはStackBlitzのWebContainers技術を利用して、実際の開発環境をブラウザ内に再現しています。
主な特徴と私の所感
-
ブラウザ上でのフルスタック開発
- npmパッケージのインストールや実行が可能
- Node.jsサーバーの実行ができる
- サードパーティAPIとの連携も簡単
所感：ローカル環境の設定なしで、すぐに開発を始められるのは非常に便利でした。特に、ちょっとしたプロジェクトやプロトタイプ作成に最適だと感じました。一方で、フルスタックかと言われると、そうでもないかなという印象です。理由としては、ブラウザ+webassemblyで実現できる範囲でしかバックエンド動作が記述できないため、どうしても制約が大きいためです。ただ、かなり使いやすいツールであることは間違えなく、v0よりかなり使いやすいかなという印象を受けました。フロントエンドの開発に限って言えばかなり有用な印象です。
-
AIによる環境制御
- AIがファイルシステム、サーバー、パッケージマネージャーなどを制御
- アプリケーション作成からデプロイまでAIがサポート
所感：デプロイまでは試していませんが、AI側で開発環境を自動的に生成し、実行してくれるのはかなりポイントが高いです。一方で、複雑になるとAIが環境をぶっ壊してしまうことが課題として挙げられており、GithubのIssueでは「金返せ！」という声も少なくはないです。おそらくすべてをAIで完結させようとしている人たちだとは思いますが、実行する際には予め覚悟を決めたほうが良いです。
-
使いやすいインターフェース
- チャットベースの対話型インターフェース
- コードエディタ、ターミナル、ブラウザプレビューが一画面に統合
所感：直感的なUIで、初心者でも扱いやすいと感じました。特に、プレビューやエディタに関してはAnthropicのArtifactと同じ様のイメージで使いやすいです。
使用例
さて、実際にbolt.newを使ってみたいと思います。AIのプロンプトは詳細に書けば書くほど良いです。この場合はかなり詳細に指定して行きます。
今回は、XAS界隈で利用されているWebAtomsというwebアプリケーションが最近ダウンしてしまったので、それの代替アプリ用のフロントエンドのプロトタイプを作成したいと思います。（内部の計算ロジックは後々Rust+WASMで作成予定なので途中でやめます。）
１回目のプロンプト：
# WebAtoms.js
Please create a single-page application with the following requirements:
## Tech stack
TypeScript, Next.js 14, App Router, Tailwindcss, Single Page Application, Best pactises, 3dmol.js
## Design
I want to have a modern design with light mode and dark mode. The design should be responsive.
## General description
1. It is a single page application.
2. The layout is header, 2 columns main content, and footer.
3. The header has a logo, then title, and subtitle under the title. On the right part of the header, there is a GitHub link (icon), docs link (icon), and user forum (icon).
### Main content (left column)
1. On the top left, there is a clickable drag and drop area where you can upload cif, xyz files.
2. If the file is uploaded, it shows the file name (with link. if clicked it will pop up a floating window that will show the content of the file), button to remove file.
3. In the top right, there is a box to show the crystal or molecular structure of the given file. (use 3dmol.js) This will be left blank if there is no input.
4. Then there is a select box for Element, Edge, calculation type, and ipot style. Element is a select box with all the elements in the periodic table. Edge is a select box from "K, L3, L2, L1, M", calculation type is ["EXAFS", "XANES(FEFF)", "XANES(FDMNES)"], and ipot style will only show up if the EXAFS or "XANES(FEFF)" is selected and the options are ["FEFF6", "FEFF8"(default)].
5. There is a calculation detail section.
If calculation type is "EXAFS" or "XANES(FEFF)":
- There will be a Cluster size, Longest path, SCF radius.
If calculation type is "XANES(FDMNES)":
--------- There will be a Cluster size, Longest path, SCF radius, Ecut, Ecut1.
6. Then there is a select box to select the input type (Crystal or Molecule).
If "Molecule":
- There is a button "Input xyz coordinates by text" which will pop up a floating window where you can paste the xyz coordinates. The default input will be the xyz coordinates calculated from the tables below. There is an apply button at the bottom to apply it to the table. In case there is an error, do not leave the floating window and provide information about the error in a separate box on the right.
- There will be a table. Columns will be "Abs", "Element", "x", "y", "z", and "tag". "Abs" is a checkbox, "Element" is a select box with all the elements in the periodic table, and "x", "y", "z" are input boxes. "Tags" are automatically generated by "Element" + unique number as default.
If crystal:
- There will be a space group
- A, B, C, alpha, beta, gamma input boxes.
- There will be a table. columns will be "Abs", "Element", "x", "y", "z", and "tag". "Abs" is a checkbox, "Element" is a select box with all the elements in the periodic table, and "x", "y", "z" are input boxes. "tags" are automatically generated by "Element" + unique number as default.
Then there is a button "Calculate" which will output a file specified with the calculation type.
### Main content (right column)
1. It is a text area where the output of the calculation will be shown. It is editable.
2. There is a button "Save" which will save the output to the local storage.
3. In the top right, there is a box where you will have a molecular structure of the output file. (use 3dmol.js)
最初はエラーが出てきたが、ワンボタンで修正ができた。
コンテンツは概ね要求取り、レイアウトを少し変更する必要がある。
2回目のプロンプト：
Following boxes needs to be compact, and put the label left to the box. Put multiple content in one row.
- Select Element
- Select Edge
- Select Calculation Type
- Cluster size
- Longest path
- SCF radius
Remove the up and down button in the text box for numbers.
Remove add atom button in the Atoms section.
Atoms will be automatically added if all of the previous elements are filled by at least one of them
the checkbox in the atoms should be aligned in the center (vertically)
Make the right text box hight fixed size relative the window.
完成図：
２プロンプトでほぼほぼ想定していたものすべて実装が完了して、感動しました。ちなみに、Dark modeなども要求通り実装してくれてかなり嬉しかったです。
良かった点
- セットアップが不要で、すぐに開発を始められる
- AIを使うことで、プロトタイピングがかなり迅速に行える。
- 予めStackBlitzのstarter kitが用意されているため、Next.jsで必要なコンポーネントなどはまとめられており、それをベースにしたpromptingなどが行える。
- 様々なフレームワークやライブラリに対応している(v0はvercelが作っているため、Next.jsのみ)
改善が必要な点
- 複雑なプロジェクトでは、AIの理解が不完全な場合がある
- 無料版のトークン制限がやや厳しい
総評
bolt.newは、Webアプリケーション開発の方法を大きく変える可能性を秘めたツールだと感じました。特に、プロトタイプの作成や小規模プロジェクトにおいては非常に強力です。AIの支援により、開発プロセスが大幅に効率化されるのは間違いありません。
ただし、プロフェッショナルな大規模開発には、まだ課題も残っています。ただ、こちらに関しては例えば最初の取っ掛かりをBolt.newに作らせて、残りをClaude 3.5 Sonnet + Cursor.aiなどで実施するなどでかなり迅速な開発ができうると感じました。
個人的には、アイデアの素早い具現化や、チームでのコラボレーションツールとして、bolt.newを積極的に活用していきたいと考えています。
まとめ
bolt.newは、AI駆動のWeb開発の未来を垣間見せてくれるツールです。まだ発展途上の技術ではありますが、その可能性は計り知れません。Web開発の効率化や、プログラミング教育の新たなアプローチとして、今後の進化が非常に楽しみです。