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

> **Bolt**オープンソースコードベースへようこそ！このリポジトリには、StackBlitzの**WebContainer API**を利用した**AIによるソフトウェア開発ツール**の構築を始めるのに役立つ、bolt.newのコアコンポーネントを使用したシンプルなサンプルアプリが含まれています。

### BoltとWebContainer APIを使用して構築する理由

BoltとWebContainer APIを使用して構築することで、ユーザーが仮想マシンを必要とせず、ブラウザ上で直接フルスタックWebアプリを**プロンプト、実行、編集、デプロイ**できるブラウザベースのアプリケーションを作成できます。WebContainer APIを使用すると、AIがユーザーのブラウザタブ内の**Node.jsサーバー**、**ファイルシステム**、**パッケージマネージャー**、**開発ターミナル**に直接アクセスし、完全に制御できるアプリを構築できます。この強力な組み合わせにより、主要なJavaScriptライブラリとNodeパッケージをすぐに使用できる新しいクラスの開発ツールを作成できます。しかも、リモート環境やローカルインストールは必要ありません。

### Bolt（このリポジトリ）と[Bolt.new](https://bolt.new)の違いは何ですか？

- **Bolt.new**: これはStackBlitzの**商用製品**です。ホスト型のブラウザベースAI開発ツールで、ユーザーがブラウザ上で直接フルスタックWebアプリケーションをプロンプト、実行、編集、デプロイできます。[Boltオープンソースリポジトリ](https://github.com/stackblitz/bolt.new)の上に構築され、StackBlitzの**WebContainer API**を利用しています。

- **Bolt（このリポジトリ）**: このオープンソースリポジトリは、**Bolt.new**を作成するために使用されるコアコンポーネントを提供します。このリポジトリには、[Remix Run](https://remix.run/)を使用して構築されたBoltのUIインターフェースとサーバーコンポーネントが含まれています。このリポジトリとStackBlitzの**WebContainer API**を活用することで、ブラウザ上で完全に動作する独自のAI駆動開発ツールやフルスタックアプリケーションを作成できます。

# Boltを使った開発を始めよう

BoltはAIの能力とサンドボックス開発環境を組み合わせ、アシスタントとプログラマーが一緒にコードを開発できる協調的な体験を作り出します。BoltはRemixとAI SDKを使用して[WebContainer API](https://webcontainers.io/api)と[Claude Sonnet 3.5](https://www.anthropic.com/news/claude-3-5-sonnet)を組み合わせています。

### WebContainer API

Boltは[WebContainers](https://webcontainers.io/)を使用して、生成されたコードをブラウザで実行します。WebContainersは[WebContainer API](https://webcontainers.io/api)を使用して、Boltにフルスタックのサンドボックス環境を提供します。WebContainersはクラウドホスト型AIエージェントのコストとセキュリティの懸念なしに、フルスタックアプリケーションをブラウザで直接実行します。WebContainersはインタラクティブで編集可能であり、BoltのAIがコードを実行し、ユーザーからの変更を理解することを可能にします。

[WebContainer API](https://webcontainers.io)は、個人利用およびオープンソース利用に無料です。商用利用のアプリケーションを構築している場合は、[WebContainer APIの商用利用価格についてこちらで詳細を確認できます](https://stackblitz.com/pricing#webcontainer-api)。

### Remixアプリ

BoltはRemixで構築され、[CloudFlare Pages](https://pages.cloudflare.com/)と[CloudFlare Workers](https://workers.cloudflare.com/)を使用してデプロイされています。

### AI SDK統合

BoltはAIモデルと統合するために[AI SDK](https://github.com/vercel/ai)を使用しています。現在、BoltはAnthropicのClaude Sonnet 3.5の使用をサポートしています。[Anthropic APIコンソール](https://console.anthropic.com/)からBoltで使用するAPIキーを取得できます。[BoltがAI SDKをどのように使用しているか](https://github.com/stackblitz/bolt.new/tree/main/app/lib/.server/llm)をご覧ください。

## 前提条件

始める前に、以下がインストールされていることを確認してください：

- Node.js (v20.15.1)
- pnpm (v9.4.0)

## セットアップ



1. リポジトリをクローンします（まだの場合）：

```bash
git clone https://github.com/stackblitz/bolt.new.git
```

2. 依存関係をインストールします：

```bash
pnpm install
```

3. ルートディレクトリに`.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にデプロイします。

## 開発

開発サーバーを起動するには：

```bash
pnpm run dev
```

これによりRemix Vite開発サーバーが起動します。

<blockquote class="twitter-tweet" data-media-max-width="800"><p lang="ja" dir="ltr">Boltを取り敢えずローカルで起動できました！！！ <a href="https://t.co/EOGMeZrGXt">https://t.co/EOGMeZrGXt</a> <a href="https://t.co/RTfwugT6wQ">pic.twitter.com/RTfwugT6wQ</a></p>&mdash; Maki@Sunwood AI Labs. (@hAru_mAki_ch) <a href="https://twitter.com/hAru_mAki_ch/status/1843263549017383144?ref_src=twsrc%5Etfw">October 7, 2024</a></blockquote>


## テスト

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

```bash
pnpm test
```

## デプロイ

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

```bash
pnpm run deploy
```

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


## リポジトリ

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

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