Zenn
👍

Boltオープンソースコードベースへようこそ

2024/10/09に公開
Bolt
stackblitz
webcontainerapi
remixrun
tech

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)

セットアップ

  1. リポジトリをクローンします（まだの場合）：
git clone https://github.com/stackblitz/bolt.new.git
  1. 依存関係をインストールします：
pnpm install
  1. ルートディレクトリに.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開発サーバーが起動します。

テスト

テストスイートを実行するには：

pnpm test

デプロイ

アプリケーションをCloudflare Pagesにデプロイするには：

pnpm run deploy

必要な権限があり、WranglerがCloudflareアカウントに正しく設定されていることを確認してください。

リポジトリ

https://github.com/stackblitz/bolt.new

<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

Discussion