bolt.newで出来ない独自のコミットを求めてbolt.diyをいじってみた
経緯
bolt.new でfrontendの開発が簡単にできる・・・・とは言い難いことがあります。それはバージョン管理との噛み合わせが極端に悪いことです。
ある程度できあがった画面をデプロイやgithubにプッシュした後、さらにboltで編集しようとすると差分の取り込みができずプロジェクトを丸々更新もしくはリポジトリのフォークをすることになってしまうからです。
そこである程度まではbolt.newを使いgithubにプッシュ。そのあとに自分のマシンにインストールしいるbolt.diyで以後の開発を進めていけるか試してみようかと考えました。
bolt.new? bolt.diy?
bolt.new
bolt.newは、AIを活用したフルスタックWebアプリケーション開発ツール。最近だとcursorのcomposer, github copilotのedit, clineのようなものですが、frontend部分に注力したものになります。
無料でも使えますが1日のTOKEN上限があり、毎月$20のプランに加入すればもうちょっと使えるといった感じです。
主な特徴
-
自然言語による指示
プログラミングの知識がなくても、日常的な言葉で指示を出すだけでアプリケーションを開発できます。 -
ブラウザ内でのフルスタック開発
フロントエンドからバックエンドまで、ブラウザ上で一括して開発が可能です。 -
AIによる自動コード生成
ユーザーの指示に基づき、AIが適切なコードを自動で生成します。 -
多様なフレームワークのサポート
Vite、Next.jsなど、様々な開発フレームワークをサポートしています。 -
簡単なデプロイ機能
開発したアプリケーションを簡単にデプロイできます。 -
バグやエラーの自動検出と修正
プログラムの不具合やエラーを検出し、自動で修正することが可能です。 -
StackBlitzとの連携
StackBlitz上でアプリを公開、管理、ダウンロードが可能です。
bolt.newを使用することで、プログラミングの専門知識がなくても、アイデアを迅速にWebアプリケーションとして具現化することが可能になります。
実際使ってみた動画はyoutubeにたくさんあり、アカウント作成からレコメンドされているキーワード的なものをタップすると勝手にページを作成してくれます。
bolt.diy
bolt.diyは、AI搭載Web開発ツール「Bolt.new」のオープンソース版です。ざっくり言えばローカルマシンにインストールできるアプリです。
bolt.newとの違いは各種AIベンダーのAPI KEYが必要ということです。なので、こちらは少額ではありますがAIベンダーが無料のクレジットを配布しているなどがなければ課金必須となります。
まずはbolt.newでコード生成
bolt.newで生成したページについてはこちらにてシェアしました。
生成方法などについては今回は触れませんが、自分のやりたいことをつらつらとプロンプトで指示したらできるといった感じです。工夫とかもほとんどないです。
そしてデプロイやgithubにpushしました・・・・っていうのが本記事の序章です。
ここから先、項目や機能などの追加をしようにもbolt.newに付随しているStackBlitzでのgithub連携とかも試したのですが、連携のたびに新しいリポジトリを作成しないとコード管理できなかったり、フォークするとしてもある意味１コミット単位でフォークしたリポジトリを増やすことになったり。
もっというとbolt.newで編集しバージョン的には先に進んだソースをStackBlitzではデグレと判断され巻き戻すコミットを発行してきたり、履歴を残すということにものすごい不便さが出てきます。
それをなんとか解決しようと調べたらbolt.diyならローカルで稼働し、githubとの連携が可能とのことなので試してみましょうって感じです。
（苦戦していた記録は取ってません・・・より使えやすくなることをマジでお祈りいたします・・・）
bolt.diy を触ってみる
インストールするまで
インストーラーも配布してはいるのですが、なんだったらということでgitでcloneしてdockerで立ち上げるという方法にしました。
基本的にはページに書いてあるインストールコマンドをポチポチするだけでなんとかなるのですが、最後の方に .env.local がないというエラーが発生するので、このファイルは手動で作成しました。
touch .env.local
また特に何も考えないと既存で実行しているnpmやpnpmなどとポート競合するので、自分のものを停止するかbolt.diyのexposeするポートを変更するかどちらかをすることになります。僕は既存のものを停止しました。
github連携
デフォルトの状態で起動すると http://localhost:5173/ にアクセスすることになります。そして、画面左上にあるメニューアイコンをホバーすると左下に歯車のマークが出てきますのでそれをクリック。
そこからconnectionというメニューからgithubの設定を行います。必要とする権限はrepoなのでtokenを発行して貼り付けます。
上手くできたらgithubのプロフィール画像が設定画面に表示されるので接続されたことがわかると思います。
そしてトップ画面に戻り Clone a Git Repo をクリック、編集対象となるリポジトリやブランチを選択していきます。
そうすると編集画面に遷移、かつnpmが起動し画面を表示してくれます。この時点でbolt.newでは出来なかったgithubをpushだけではなくpullしてくるということができてかなり満足。
果たして編集できるのか？？
とりあえず編集だけしたいのでREADME.mdに適当な文章を加えてみます。僕の場合は生成はbolt.newでやったけど、編集はbolt.diyでやるよ的な文章を加えることにします。
そして、Push to Github からリポジトリ名をcloneしたリポジトリ名を指定してpush...
なんか成功したように見えますが・・・
Initial commit from your app というコミットメッセージと変更点をアップしているようです。そしてbolt.diyを立ち上げた時にフォーマットやツールのバージョン変更もしているようです。バージョンの変更についてはdiyを使うのでしかたがないものだと割り切ってしまおうかと思います。そのほかの変更は空白行の除去をしてくれた感じです。
さすがにコミットメッセージは自分で決めたい・・・
ということで・・・
ローカルのファイルアップロードからならもしかしたらファイルをボリュームで繋いで変更点を自分でコミットできるんじゃないか？？と思い取り込んで適当な変更点を作ってみたのですが、アップロードした元のファイルには変更点が見られませんでした・・・
diyのディレクトリにアップロードしたファイルが何かしらコピーされてるならそれを拾ってコミットできれば・・・
と思ったのですがコレもなし・・・
しかたないので、githubにpushする時はどんなコードつかってるんだ？ってことでソースを確認していきます。すると・・・
ありました！commitMessageのパラメーター！！
が、このパラメーターをもつコンポーネントを呼び出す場所で・・・
undefined！！なんでやねん！！
一旦ここでコミットメッセージを既存の画面で設定するのは普通だと難しいということがわかりました・・・
しかし、コードをいじれるのでcommitMessageを追加する変更を行ってみます。変更するファイルは以下の２点。
- app/components/@settings/tabs/connections/components/PushToGitHubDialog.tsx
- app/components/workbench/Workbench.client.tsx
コレら二つにcommitMessageに関する画面上の項目を追加して、パラメーターに設定し、pushする既存の関数に埋め込めば・・・
こんな感じのダイアログができて
pushしてみると・・・できました・・・
githubのコミット履歴はこんな感じ
できてますね・・・
おわりに
一応、ソース上ではコミットメッセージを扱える実装が存在しているのでそのうち差分をコミットにしてpushするという機能がbolt.newでもbolt.diyでも期待していいんじゃないか？とは思います。
なんでコミット機能が潰されているかまでは調べませんでしたが、コード生成のAIツールに今後も期待してみようかと思いました。
Discussion