皆さん、AIでアプリ開発していますか？

最近はv0、Create、Cursorなど様々なアプリを開発できるAIアプリが
増えており開発者でなくてもWebアプリが開発しやすくなってきています。

今回は、そんなWebアプリ開発用AIアプリの戦国時代にも関わらず
最近話題になってきている「bolt.new」について解説していきます。

bolt.newの特徴と強み

① npmツールやライブラリのインストールと実行

独自のライブラリなどをインストールして実行することができるのはbolt.newの強みです。

② コードの直接編集

ブラウザでAIとの対話で生成したプロジェクト内のプログラムをそのまま直接編集できます。

③ 外部APIとの連携

最近は他のツールもできるようになってきた外部APIとの連携も、boltでも同様にできます。

④ チャットから本番環境へのデプロイ

開発しながら簡単に、直接デプロイが可能です。また、チャット上でDeploy this applicationなど直接指示してデプロイできます。

※エラーが出やすいので何度か試すことを推奨します。

⑤ AIによる環境の制御

以下の画像のように、必要なパッケージをインストールした上で更にそのパッケージを用いてコードの改善も行ってくれます。

パッケージの管理もしてくれるので、ソースコードをダウンロードしても同じ環境で開発を継続することも可能です。

他にもファイル、サーバー、ターミナルなどもAIが制御してくれます。

開発のハードルを下げ、より多くの人が開発可能に

従来の開発の場合開発環境構築、パッケージなどの環境の整理、デプロイなどの工程は開発者だけでなく開発者以外にとっては特に大きなハードルとなっていました。

しかし、環境からAIが管理してくれることでより多くの人が開発に参加することが可能になり、そして開発したアプリを簡単に公開することが可能になっています。

⑦ オープンソース

ここまでの機能を搭載していながら、bolt.newはオープンソースでありローカル環境にも構築することができます。

⑧ 有料プランが比較的安価

一番安価なプランは$9と、他のAIアプリと比べてかなり安価な上に月に1000万トークンもついてきます。APIで利用するよりも安価なので、お得ですね。

また、ブラウザで利用できるコードエディタのStackBlitzの同じレベルのプランも利用可能になります。

しっかりしたアプリを開発したい場合は、プロから試してみるのがおすすめです。

基本操作を実践してみる

今回はまず、画面左下のサジェストにある「Start a blog with Astro」を使って開発の流れを体験してみましょう。

もしない場合は同じ内容をチャット欄に入力して送信すればOKです。

動作が始まると、このようにパッケージのインストールなど環境構築が始まります。

環境構築が終了すると、以下のようにPreview画面が表示されるので完了するまで少し待ちましょう。

実際にどのような操作、コマンドを実行しているかについては左のチャット欄から確認できます。

これをテストでデプロイしてみましょう。

右上の「Deploy」ボタンを押すか、デプロイする旨を直接指示することでデプロイ出来ます。

少し待つと、「Open website」というボタンが出てくるのでこちらをクリックすることでデプロイしたアプリにアクセスできます。

※上手く進まない場合は再度デプロイ操作をしてください。

最新のOSS環境構築機能を使ってみよう

また、以下のURLのように、OSSのリポジトリURLの中にbolt.newとつけることでOSSの環境構築を自動でしてもらうことができます。

上記のURLをbolt.newにログインしているアカウントで開くと、自動で環境構築をしてくれます。

※エラーが比較的出やすい機能です

もちろん、公開されているパブリックリポジトリ限定・大規模なプロジェクトは動作しない等の制限がありますが、それでも今後リポジトリのフォーク機能なども追加予定などかなり将来性に期待できる機能なのでぜひ一度触って見てください。

本格的なアプリを作ってみよう