概要

boltは、自然言語から簡単にWebサイトを作成できる生成AIツールです。本記事では、有料のProプランを使って検証した事例を紹介します。

TODOアプリの作成例

まず、https://bolt.new/ へアクセスしてサインアップします。
次に、ChatGPTへboltでTODOアプリを作成するときにどのようなプロンプトを入力したら良いか聞いて、その回答を参考にして、次のようなプロンプトをboltへ入力します。

ユーザーがタスクを追加、編集、削除できるシンプルなタスク管理アプリを作成してください。以下の機能を含めてください：

- タスクはタスク名を持ち、詳細な説明(description)は不要
- タスクの追加、編集、削除機能
- タスクの優先度設定（高、中、低）
- タスクの締め切り日設定
- タスクのステータス管理（未完了、進行中、完了）
- レスポンシブデザインで、デスクトップとモバイルの両方に対応
- Supabaseをバックエンドとして使用し、ユーザーのタスクデータを管理してください

これにより、ブラウザ上のエディタでコードが実装され、Preview画面でUIのデバッグが可能になります。

実装されたアプリをデバッグしながら機能も思いつくままに日本語でboltのプロンプトへ入力して以下のような機能も実装してもらいました。

- low、medium、high以外にも優先度を持たせてタスクのカードを上下にドラッグアンドドロップしたら優先度を並び替えられる
- Task Managerの一番上にタスク名のみを入力するフォームを用意して、そこに文字を打ち込んでエンターを押したらタスクが作成される
- タスクの状態に応じてフィルターできるような機能を追加して、完了したタスクと未完了のタスク、優先度(high, medium, low)
- タスクの作成と編集ボタンを押したときに、エスケープキーを押したら編集フォームを閉じる
- 削除ボタンを押したときは、1度本当に削除して良いか確認する
- タスクをカンバンボードとして見れるページも用意する
- カンバンボードでカードをドラッグアンドドロップしたらTODO, InProgress, Completedが変化する

タスクをカンバンのように表示するUIも簡単に作ることができました。

エラーの自動修正機能

コード生成後、localhostでUIを操作して動作確認している際にエラーが発生すると、エラー内容が表示され、「Attempt fix」を押すと自動的にコードが修正されます。

Supabaseとの連携

右上のSupabaseボタンを押すと、認証やデータベース連携が自動実装され、boltの実力を実感できます。自然言語で機能追加を指示し、データベース変更が必要な場合は「Supabase Migrations」に変更内容が表示され、「Applying changes」を押すとMigrationが実行されます。

実際、Supabaseには以下のような tasks テーブルが作成され、UIからタスク追加を行うとレコードがどんどん蓄積されていく様子が確認できます。

利用料金とtoken

Proプランの月額利用料金は20ドルで、10M tokensが利用可能です。2～3時間の利用で1M tokensが消費される印象です。

NetlifyへのDeploy

右上のDeployボタンを押すと、Netlifyを利用してWebサイトがデプロイされます。これにより、サイトを公開して他ユーザーに使用してもらったり、モバイル端末での検証が容易になります。

生成したコードをローカルで動かす

生成したコードは「Export」ボタンからダウンロードすることができ、以下のようにシンプルなReactアプリケーションになっており、手動でもメンテナンスはしやすいかと思います。

.
├── dist
│   └── assets
├── eslint.config.js
├── index.html
├── package-lock.json
├── package.json
├── postcss.config.js
├── src
│   ├── App.tsx
│   ├── components
│   ├── index.css
│   ├── lib
│   ├── main.tsx
│   ├── types
│   └── vite-env.d.ts
├── supabase
│   └── migrations
├── tailwind.config.js
├── tsconfig.app.json
├── tsconfig.json
├── tsconfig.node.json
└── vite.config.ts

OSS版bolt

今後はOSS版のboltやfork版のbolt.diyをローカル環境でtokenを気にせず検証したいと思います。

https://github.com/stackblitz/bolt.new
https://github.com/stackblitz-labs/bolt.diy

まとめ

このように、boltは自然言語からWebサイトを簡単に構築できるだけでなく、エラー修正やSupabase連携、Netlifyへのデプロイなど、多彩な機能を持つ非常に強力なツールです。ぜひ試して、その可能性を体感してみてください。