AIを搭載したウェブ開発エージェントのbolt.newを触ってみた
bolt.newとは
bolt.newはブラウザベースの開発環境を提供しているStackBlitz社が開発した、テキストのみでフルスタックアプリケーションを開発できるAIを搭載したウェブ開発エージェントです。
ブラウザから直接フルスタックアプリケーションをプロンプト、実行、編集、デプロイすることができます。
従来のAIコード生成ツールとは異なり、bolt.newはStackBlitzのWebContainers技術を利用して、開発環境をブラウザ内に再現しています。
ログインすると最初はこのような画面が表示されます。
真ん中のテキストボックスに作業内容の指示を書けば実装してくれます。
近しいツールにはvercel v0というものがあります。
v0の記事はこちら
実践
今回はクラウド版で試してみました。
bolt.newはオープンソースで公開されているため自身のローカル環境で実行することも可能です。
環境構築の詳細は以下から
Get Started Building with Bolt
読書記録ツールの作成
読書記録ができるツールを作ってもらいます。
ものの数秒でこのような形でツールが実装されます。
このスクリーンショットでは左側にAIとのチャットスペース、右側に実際にbolt.newが作成したプログラムや実行されているアプリが表示されます。
チャット欄を見ていただければ分かりますが指示が日本語でも問題なく動作しています。
ただしAIからの回答が一部英語になっていたりします。
以下に解答の全文を載せておきます。
回答
I'll help you create a book tracking tool in Japanese. I'll create a clean and functional interface for managing your reading records.
Japanese Reading Tracker Application
I've created a Japanese reading tracker application with the following features:
- Clean and modern UI with a responsive design
- Ability to add new book records with:
・タイトル (Title)
・著者 (Author)
・開始日 (Start Date)
・終了日 (End Date)
・評価 (Rating) with a 5-star system
・メモ (Notes) - Book list display in a grid layout
- Search functionality
- Interactive star rating system
- Modal form for adding new books
The interface is fully in Japanese and uses Tailwind CSS for styling and Lucide React for icons. You can start adding your reading records by clicking the "新しい記録" (New Record) button in the top right corner.
不具合の修正などもこちらで指示すればすぐに改善されます。
今回は新しく記録を押下時に表示されるモーダルより上に検索窓が表示されていたのでその修正を依頼しました。
この日本語の短文の指示でも意図を汲み取ってしっかりと修正を実施してくれます。
デザインの変更もサクッと実施できます。
またこのようなざっくりとしたデザイン変更の指示に対しても、回答と実装修正を行なってくれます。
デザイン変更の際の生成AIからの回答を以下に載せておきます。
回答
はい、デザインをよりスタイリッシュなものに更新します。モダンで洗練された見た目に変更しましょう。
Update design to be more stylish
src/App.tsx
npm run dev
デザインを以下のように改善しました：
- 全体的な変更：
・グラデーションの背景を追加
・角丸を大きくしてモダンな印象に
・アニメーションとトランジションを追加
・シャドウ効果を強化 - ヘッダー部分：
・グラデーションを追加
・ロゴを半透明の背景で囲む
・「新しい記録」ボタンをよりスタイリッシュに - フォーム：
・モーダルの背景にブラー効果を追加
・入力フィールドのデザインを改善
・星評価のインタラクションを改善 - 書籍カード：
・シャドウと角丸を強化
・ホバー効果を追加
・情報の配置を整理
これらの変更により、より現代的でスタイリッシュな見た目になりました。
検証終了
ここで無料クレジットが切れたのでここまで...
完成したのはこのような読書記録ツールとなりました。
実際にプログミングされたソースコードもこのような感じで見ることが可能です。
自分の手で修正も可能
Open in StackBlitzを押下することで自分の手で修正が可能な画面に切り替わります。
こちらは実際に開いたStackBlitzの画面となります。
StackBlitzとはWebブラウザ上で直接動作するオンラインコードエディタであり、統合開発環境（IDE）です。 主にJavaScript、TypeScript、React、Angular、Vue.jsなどのフロントエンドフレームワークやライブラリの開発に利用できます。
デプロイも可能
右上にあるDeployoのボタンを押すと
実際にこのようにデプロイされました。
今回完成したツールは下記のURLで実際に触っていただけます。
まとめ
大きなバグもなくサクッと自分が作りたいものを作ることができました。
本格的にプロダクトを作成することもできる可能性があります。
今回は無料枠では基本的な機能しか試せていないため有料契約などを視野に入れてもよいかもしれません。
Discussion