Boltオープンソースコードベースへようこそ！このリポジトリには、StackBlitzのWebContainer APIを利用したAIによるソフトウェア開発ツールの構築を始めるのに役立つ、bolt.newのコアコンポーネントを使用したシンプルなサンプルアプリが含まれています。
BoltとWebContainer APIを使用して構築する理由
BoltとWebContainer APIを使用して構築することで、ユーザーが仮想マシンを必要とせず、ブラウザ上で直接フルスタックWebアプリをプロンプト、実行、編集、デプロイできるブラウザベースのアプリケーションを作成できます。WebContainer APIを使用すると、AIがユーザーのブラウザタブ内のNode.jsサーバー、ファイルシステム、パッケージマネージャー、開発ターミナルに直接アクセスし、完全に制御できるアプリを構築できます。この強力な組み合わせにより、主要なJavaScriptライブラリとNodeパッケージをすぐに使用できる新しいクラスの開発ツールを作成できます。しかも、リモート環境やローカルインストールは必要ありません。
Bolt（このリポジトリ）とBolt.newの違いは何ですか？
-
Bolt.new: これはStackBlitzの商用製品です。ホスト型のブラウザベースAI開発ツールで、ユーザーがブラウザ上で直接フルスタックWebアプリケーションをプロンプト、実行、編集、デプロイできます。Boltオープンソースリポジトリの上に構築され、StackBlitzのWebContainer APIを利用しています。
-
Bolt（このリポジトリ）: このオープンソースリポジトリは、Bolt.newを作成するために使用されるコアコンポーネントを提供します。このリポジトリには、Remix Runを使用して構築されたBoltのUIインターフェースとサーバーコンポーネントが含まれています。このリポジトリとStackBlitzのWebContainer APIを活用することで、ブラウザ上で完全に動作する独自のAI駆動開発ツールやフルスタックアプリケーションを作成できます。
Boltを使った開発を始めよう
BoltはAIの能力とサンドボックス開発環境を組み合わせ、アシスタントとプログラマーが一緒にコードを開発できる協調的な体験を作り出します。BoltはRemixとAI SDKを使用してWebContainer APIとClaude Sonnet 3.5を組み合わせています。
WebContainer API
BoltはWebContainersを使用して、生成されたコードをブラウザで実行します。WebContainersはWebContainer APIを使用して、Boltにフルスタックのサンドボックス環境を提供します。WebContainersはクラウドホスト型AIエージェントのコストとセキュリティの懸念なしに、フルスタックアプリケーションをブラウザで直接実行します。WebContainersはインタラクティブで編集可能であり、BoltのAIがコードを実行し、ユーザーからの変更を理解することを可能にします。
WebContainer APIは、個人利用およびオープンソース利用に無料です。商用利用のアプリケーションを構築している場合は、WebContainer APIの商用利用価格についてこちらで詳細を確認できます。
Remixアプリ
BoltはRemixで構築され、CloudFlare PagesとCloudFlare Workersを使用してデプロイされています。
AI SDK統合
BoltはAIモデルと統合するためにAI SDKを使用しています。現在、BoltはAnthropicのClaude Sonnet 3.5の使用をサポートしています。Anthropic APIコンソールからBoltで使用するAPIキーを取得できます。BoltがAI SDKをどのように使用しているかをご覧ください。
前提条件
始める前に、以下がインストールされていることを確認してください：
- Node.js (v20.15.1)
- pnpm (v9.4.0)
セットアップ
- リポジトリをクローンします（まだの場合）：
git clone https://github.com/stackblitz/bolt.new.git
- 依存関係をインストールします：
pnpm install
- ルートディレクトリに
.env.localファイルを作成し、Anthropic APIキーを追加します：
ANTHROPIC_API_KEY=XXX
オプションで、デバッグレベルを設定できます：
VITE_LOG_LEVEL=debug
重要：.env.localファイルをバージョン管理にコミットしないでください。すでに.gitignoreに含まれています。
利用可能なスクリプト
-
pnpm run dev: 開発サーバーを起動します。 -
pnpm run build: プロジェクトをビルドします。 -
pnpm run start: Wrangler Pagesを使用してビルドされたアプリケーションをローカルで実行します。このスクリプトはbindings.shを使用して必要なバインディングを設定するため、環境変数を複製する必要はありません。 -
pnpm run preview: プロジェクトをビルドしてからローカルで起動します。本番ビルドのテストに便利です。注意：HTTPストリーミングは現在wrangler pages devで期待通りに動作しません。 -
pnpm test: Vitestを使用してテストスイートを実行します。 -
pnpm run typecheck: TypeScriptの型チェックを実行します。 -
pnpm run typegen: Wranglerを使用してTypeScriptの型を生成します。 -
pnpm run deploy: プロジェクトをビルドしてCloudflare Pagesにデプロイします。
開発
開発サーバーを起動するには：
pnpm run dev
これによりRemix Vite開発サーバーが起動します。
Boltを取り敢えずローカルで起動できました！！！ https://t.co/EOGMeZrGXt pic.twitter.com/RTfwugT6wQ
— Maki@Sunwood AI Labs. (@hAru_mAki_ch) October 7, 2024
テスト
テストスイートを実行するには：
pnpm test
デプロイ
アプリケーションをCloudflare Pagesにデプロイするには：
pnpm run deploy
必要な権限があり、WranglerがCloudflareアカウントに正しく設定されていることを確認してください。
リポジトリ