【bolt.new】AIの力を借りてお手軽にUIを作成する

Last updated at 2024-10-13Posted at 2024-10-13

はじめに

こんにちは。
先日、AIを使ってUIを簡単に作成できるツールのv0を試してみたのですが、他にも同様のサービスがないか気になり、調べてみました。

すると、bolt.newというAIサービスでもUIを作成できるということがわかったので、試してみることにしました。

1. bolt.newの概要

1.1 bolt.newとは？

bolt.newは、StackBlitz社が開発した、AI を使って簡単にUIとコードを生成してくれるツールです。
以下のような画面から作りたいアプリケーションの要件や機能を入力することで、AIがいい感じに生成してくれます。

公式のGitHub以下になります。

β版なので、まだ開発段階のツールとなります。
この後、機能など変更される可能性があります。

1.2 bolt.newの特徴

①コードだけでなく実行環境もAIが準備してくれる

特徴の1つとして、他の生成AIと異なり、AIが環境設定を整えてくれます。

例えば、よく知られている生成AIとしては、ClaudeやChatGPTがありますが、
これらのAIに「xxxのUIを作成してください」と指示すると、いい感じのコードを生成してくれます。

ただし、生成されたコードを実行するためには、ビルド環境の構築やnpmでのパッケージインストールなど、環境を整備する必要があります。使いたいライブラリを指定しても生成されるコードに組み込まれていなかったりと、何かと融通が利かないです。

bolt.newはそのあたりの環境設定もAIがいい感じやってくれるようです。

補足：WebContainersについて
WebContainersは、同社が開発しているNode.js環境をブラウザ内で実行できるようにする仕組みです。
そのためbolt.newが生成したコードをWebContainersで実行できるようすることで実現できているようです。

公式GitHub
https://github.com/stackblitz/webcontainer-core

②ワンタッチでNetlifyにデプロイできる

Netlifyは、静的なWebサイトをホスティングしてくれるCDNサービスです。
画面上からボタンワンタッチで生成したコードをNetlifyを使用して自動でデプロイしてくれます。

③簡単にStackBlitz(オンラインコードエディタ)と統合できる

StackBlitz社が開発元のStackBlitzというオンラインコードエディタがあります。
bolt.newで生成したコードをこのStackBlitzで表示し、コードを修正したりすることができます。
(これはStackBlitzとbolt.newの開発元が一緒という強みかなと思います)

当記事では、StackBlitzの詳細には触れないので、以下などを参考にしてみてください。

2. bolt.newの使い方

2.1 UIコードを生成する

bolt.newでは、以下の方法でUIのコードを生成することができます。

プロンプトの入力
ファイルのアップロード

2.2 プロンプトを拡張する

bolt.newでは、入力したプロンプトをより具体的に書き直してくれる機能があります。

例えば、漠然と思うがままに、プロンプトを入力して、EnhancePromptを押します。

ショッピングアプリを作りたい

するとAIが勝手にこんなの作りたいんじゃないの？と、プロンプトを書きなおしてくれます。

日本語に直すとこんな感じ。

ユーザーフレンドリーなインターフェイス、製品カタログ、ショッピング カート機能、安全なチェックアウト プロセスを備えたショッピング アプリを作成します。
ユーザー認証、製品検索、注文追跡などの機能が含まれます。
モバイルとデスクトップで使用するためのレスポンシブ デザインの実装を検討してください。

2.3 デプロイする

デプロイするには、UIを生成後に画面右上の「Deploy」ボタンを押します。

するとチャットでDeploy URLを教えてくれるので、ブラウザでアクセスするとアプリを確認することができます。

2.4 StackBlitzで開く

「Open in StackBlitz」を押すと、StackBlitzで生成したコードを確認できます。

4. 料金プラン

4.1 トークンのサブスクライブ

bolt.newの機能を利用するためには、トークンを消費します。

トークンには、1日あたりと月あたりの上限が設けられており、上限に達すると、プランをアップグレードするか、次の日または月を待つ必要があります。

無料プランでは、以下の上限が設定されています。

1日あたり: 150,000トークン
1か月あたり: 1,000,000トークン
(おおよそアプリを3〜4つ生成すると、1日の上限に達しますね)

トークンの消費量を増やすには、トークンサブスクリプションに登録することができます。サブスクリプションプランと提供されるトークン数は以下の通りです。

プラン	料金	トークン数
Pro	20$/月	1,000,000
Pro50	50$/月	25M 2,500,000
Pro100	100$/月	5,500,000
Pro200	200$/月	10,000,000

2024/10/13時点の料金になります。

4.2 契約プラン

エンタープライズなどのプランもあるようです。
こちらはトークンというよりは、StackBlitzのエディタなども含めて、沢山使えるよーというプランのようです。

5. 実際にショッピングアプリ作ってみる

では実際にbolt.newを使って、簡単なショッピングアプリを作ってみたいと思います。

5.1 bolt.newにプロンプトを入力する

bolt.newに以下のプロンプトを入力します。

ユーザーフレンドリーなインターフェイス、製品カタログ、ショッピング カート機能、安全なチェックアウト プロセスを備えたショッピング アプリを作成します。
ユーザー認証、製品検索、注文追跡などの機能が含まれます。
モバイルとデスクトップで使用するためのレスポンシブ デザインの実装を検討してください。

5.2 プロンプトの実行結果

プロンプトの実行結果は以下になります。
実行結果として画面の左側にアプリの説明、右側に実際に生成されたコードとアプリの見た目が表示されます。

アプリの説明

アプリの説明は以下になります。

確かに！ 
React と TypeScript を使用して、ご要望の機能を備えたショッピング アプリを作成します。
まずテンプレートのコンテンツを取得し、ショッピング アプリに必要なコンポーネントを変更して追加します。

テンプレートのコンテンツが完成したので、要求された機能を備えたショッピング アプリを作成しましょう。
既存のファイルを変更し、新しいコンポーネントを追加して、ショッピング アプリの機能を実装します。

ご要望の機能を備えたショッピング アプリを作成しました。実装の内訳は次のとおりです。
1. ユーザーフレンドリーなインターフェイス: このアプリは、スタイリングに Tailwind CSS を使用したクリーンで直感的なデザインを備えています。

2.製品カタログ: ProductCatalog コンポーネントには、画像、名前、価格、および「カートに追加」ボタンを含む製品のグリッドが表示されます

3.ショッピング カートの機能: カート コンポーネントは、カート内のアイテムを表示し、アイテムの削除を可能にし、合計価格を表示します

4.安全なチェックアウト プロセス: チェックアウト コンポーネントには、ユーザー情報と支払い詳細のフォームが含まれています。 (注: 実際のアプリケーションでは、実際の支払い処理とセキュリティ対策を実装する必要があります。)

5.ユーザー認証: 簡単にするために、この例には完全なユーザー認証は含まれていません。実稼働アプリでは、適切な認証システムを実装する必要があります。

6.製品検索: ヘッダーには検索入力フィールドが含まれています。 (注: この例では検索機能が完全には実装されていません。)

7. 注文追跡: 注文後、成功メッセージが表示されます。実際のアプリケーションでは、より堅牢な注文追跡システムを実装する必要があります。

8. レスポンシブ デザイン: レイアウトはレスポンシブで、モバイル デバイスとデスクトップ デバイスの両方で適切に動作します。

アプリは状態管理に React フックを使用し、タイプ セーフに TypeScript を使用します。リクエストに応じて、Lucide React ライブラリがアイコンに使用されます。

このアプリをさらに改善するには、次のことが考えられます。

1. 実際のユーザー認証とアカウント管理を実装します。
2. 製品、注文、ユーザー データを管理するためのバックエンド API を追加します。
3. 検索機能を実装します。
4. さらに詳細な商品ページを追加します。
5. 大規模なアプリケーションには、Redux や React Context などのより堅牢な状態管理ソリューションを実装します。
6. コンポーネントと機能の単体テストと統合テストを追加します。

開発サーバーが実行中です。プレビューでショッピング アプリを表示し、操作することができます。