Stackblitz Boltを利用してアプリケーション開発

はじめに

Boltとは

Boltは、フルスタックWebアプリケーション開発のためのブラウザ内AIエージェントです。チャットベースの環境でエージェントにコード変更を指示すると、これらの変更が開発環境内でリアルタイムに実装されます。

Boltでできること

作成可能なアプリケーション

Boltを使用して、WebサイトやJavaScriptベースのフルスタックWebアプリケーションを構築できます。
インスピレーションを得るために、BoltのYouTubeチャンネルでは、成功したユーザー事例が紹介されています。

サポートされるフレームワークとツール

Boltは以下のツールやフレームワークと統合されています：

• Figma: UI/UXデザイン
• Supabase: データベース、認証、ファイルストレージ
• Netlify: 公開、ホスティング、デプロイ
• GitHub: バージョン管理、バックアップ、コラボレーション
• Stripe: 支払い処理
• Expo: モバイルアプリ開発

BoltはJavaScriptを基盤とした技術に特化しており、Node.jsをバックエンド、フロントエンドではブラウザネイティブなJavaScriptフレームワークをサポートします。ただし、PHPやPythonなど他の言語をバックエンドで使用することはできないようです。
SupabaseやFirebaseのようなクラウドベースのデータベースを利用可能で、正しく設定すればローカルデータベースも使用できますが、変更の保存に注意が必要です。

推奨構成:
NetlifyとSupabaseの統合を活用し、単純な静的サイトはNetlifyでホスティング、WebアプリケーションはフロントエンドをNetlify、バックエンドをSupabaseで構築するのがおすすめです。

技術者と学習者の両方に役立つツール

Boltは、シンプルなコンテンツ中心のWebサイト（例: ブログ）からフルスタックのWebアプリケーション（例: 生産性向上アプリ）まで、さまざまなものを構築するためのツールです。

必要なスキル

• コーディング経験不要: Boltは、AIのサポートを受けながら実践的に学べるため、初心者にも適しています。
• 明確な指示が必要: Boltの動作や成果物は、ユーザーの指示次第で決まります。

効果的な利用のために

• 目標とする機能
• ユーザー体験のイメージ
• 成功基準

これらをBoltに明確に伝える必要があります。また、Best practicesで効果的なプロンプトの作成方法を学べます。プロジェクトが巨大になるごとにトークンの減りが激しいので、この内容はまた記事でまとめようと思います。

BoltとStackBlitzの関係

StackBlitzとの統合

StackBlitzはBoltの親会社であり、両プラットフォームは以下の二つの方法で連携しています：

1. BoltはStackBlitzのWebContainersを使用して開発環境を提供。
2. アカウント管理とプロジェクト管理でStackBlitzとのリンクを活用。

料金体系

Boltは、利用目的や規模に応じて複数の料金プランを提供しています。以下にその詳細をまとめます：

無料プラン

• 対象: 個人ユーザーや小規模プロジェクト向け
• 特徴:
  • 限定的なAIエージェントのリソース利用
  • 基本的なフレームワークのサポート
  • 制限されたコラボレーション機能
  • プロジェクト数やストレージ容量に制限あり
• 主な用途例:
  • 学習目的
  • プロトタイプ作成

プロフェッショナルプラン

• 対象: フリーランサー、個人開発者、中小規模プロジェクト向け
• 特徴:
  • より多くのAIエージェントリソース利用
  • 優先的なサポート
  • 無制限に近いプロジェクト数
  • 高度なフレームワークやツールの統合
• 料金: 月額または年額制 $20～

チームプラン

• 対象: 開発チームやスタートアップ向け
• 特徴:
  • チームメンバー間でのシームレスなコラボレーション
  • チーム専用のプロジェクト管理機能
  • 拡張されたリソースとストレージ
  • ガバナンスやアクセス制御の追加機能
• 料金: チーム規模に応じた変動制（$30/人月～）

エンタープライズプラン

• 対象: 大規模組織や企業向け
• 特徴:
  • カスタマイズ可能なリソース割り当て
  • 専属サポートチーム
  • セキュリティ監査やコンプライアンス対応
  • 独自のインフラ統合やプライベート環境の提供
• 料金: 要問い合わせ（企業のニーズに基づいて見積もり）

まとめ

Stackblitz が提供する Bolt についてまとめてみました。
Vercel の V0 や Google の Firebase Studio など，React や Next に限られており、Vue 系のフレームワークをうまく生成できない等が発生します。
Bolt はターゲットとするフレームワークが幅広く、Vue.js や Nuxt、Slidevのようなフレームワークを利用したアプリケーションを作成が可能です。
V0の方がインタフェースや機能等が洗練されている？数が多い？ように思えるほどの差はありますが、Boltも使い始めたころと比べるとGitHubやStripe連携が追加され、充実しつつあります。
インタフェース開発を行うときは、ホットリロード＋AI駆動開発（CursorやAvante.nvim，Gemini CLI等）とBoltのどちらがいいか開発がてら調査し記事にできたらと思います。