Bolt.new アプリケーションの構造と機能解説

## はじめに

このドキュメントは、Bolt アプリケーションのコードベースの構造と各部の機能について解説します。Bolt は、StackBlitz の WebContainer API を活用し、ブラウザ上でフルスタック Web アプリケーションのプロンプト入力、実行、編集、デプロイを可能にする AI 駆動の開発ツールです。このリポジトリは Bolt.new のコアコンポーネントを提供するオープンソース版であり、独自の AI 駆動開発ツール作成を支援します。Cole Medin氏によってフォークされたこのバージョンでは、プロンプトごとに使用するLLMを選択可能です。

<blockquote class="twitter-tweet" data-media-max-width="800"><p lang="ja" dir="ltr"><a href="https://t.co/V3VdBQED4i">https://t.co/V3VdBQED4i</a>をgemini, openAi, ollama, anthropic対応に改造したmulti-providersをベースにしてBedrockを組み込んでみた！！！<br>めちゃ普通に動くぞ！！！ <a href="https://t.co/oFa2W5IkVY">https://t.co/oFa2W5IkVY</a> <a href="https://t.co/yXAVIA8UC3">pic.twitter.com/yXAVIA8UC3</a></p>&mdash; Maki@Sunwood AI Labs. (@hAru_mAki_ch) <a href="https://twitter.com/hAru_mAki_ch/status/1846843626024018123?ref_src=twsrc%5Etfw">October 17, 2024</a></blockquote> 

## 主要な機能と構造

Bolt は Remix Run を使用して構築され、フロントエンド UI、バックエンドサーバーコンポーネント、WebContainer API との統合、AI モデルとの連携といった主要な機能を備えています。

### ルートレベル

- `.editorconfig`: エディタの設定ファイル。
- `.env.example`: 環境変数のサンプルファイル。
- `.env.local`: ローカル開発用の環境変数ファイル。
- `.prettierignore`: Prettier の設定ファイル(除外対象指定)。
- `.prettierrc`: Prettier の設定ファイル。
- `.tool-versions`: Node.js と pnpm のバージョン指定ファイル。
- `bindings.sh`: 環境変数からWranglerバインディング文字列を生成するシェルスクリプト。
- `CONTRIBUTING.md`: 貢献方法のドキュメント。
- `load-context.ts`: Cloudflare Platform Proxy の型定義ファイル。
- `README.md`: プロジェクト概要ドキュメント。
- `tsconfig.json`: TypeScript の設定ファイル。
- `vite.config.ts`: Vite の設定ファイル。
- `worker-configuration.d.ts`: Cloudflare Workers の環境変数の型定義ファイル。
- `wrangler.toml`: Wrangler の設定ファイル。

## .husky ディレクトリ

- `.husky/commit-msg`: commit メッセージのフォーマットチェック設定。

## .wrangler ディレクトリ

- `.wrangler/state`: Wrangler の状態情報。
- `.wrangler/tmp`: Wrangler の一時ファイル。

## app ディレクトリ (フロントエンド)

- `app/entry.client.tsx`: クライアントサイドのエントリポイント。
- `app/entry.server.tsx`: サーバーサイドのエントリポイント。
- `app/root.tsx`: ルートコンポーネント。

### app/components ディレクトリ

#### app/components/chat: チャットインターフェース関連

- `Artifact.tsx`: AI生成成果物表示コンポーネント。
- `AssistantMessage.tsx`: AIアシスタントメッセージ表示コンポーネント。
- `BaseChat.module.scss`: `BaseChat`のスタイル。
- `BaseChat.tsx`: チャットの基本UIコンポーネント。
- `Chat.client.tsx`: クライアントサイドチャットコンポーネント。
- `CodeBlock.module.scss`: `CodeBlock`のスタイル。
- `CodeBlock.tsx`: コードブロック表示コンポーネント。
- `Markdown.module.scss`: `Markdown`のスタイル。
- `Markdown.tsx`: Markdown表示コンポーネント。
- `Messages.client.tsx`: メッセージ履歴表示コンポーネント。
- `SendButton.client.tsx`: 送信ボタンコンポーネント。
- `UserMessage.tsx`: ユーザーメッセージ表示コンポーネント。

#### app/components/editor: コードエディタ関連

##### app/components/editor/codemirror: CodeMirrorエディタ関連

- `BinaryContent.tsx`: バイナリファイル内容表示コンポーネント。
- `cm-theme.ts`: CodeMirrorのテーマ設定管理。
- `CodeMirrorEditor.tsx`: CodeMirrorエディタコンポーネント。
- `indent.ts`: CodeMirrorのインデント処理定義。
- `languages.ts`: CodeMirrorの言語設定管理。

#### app/components/header: ヘッダー関連

- `Header.tsx`: ヘッダーコンポーネント。
- `HeaderActionButtons.client.tsx`: ヘッダーアクションボタンコンポーネント。

#### app/components/sidebar: サイドバー関連

-  `date-binning.ts`: チャット履歴の日付グループ化ユーティリティ。
-  `HistoryItem.tsx`: チャット履歴アイテムコンポーネント。
-  `Menu.client.tsx`: サイドバーメニューコンポーネント。

#### app/components/ui: 共通UIコンポーネント

- `Dialog.tsx`: ダイアログコンポーネント。
- `IconButton.tsx`: アイコンボタンコンポーネント。
- `LoadingDots.tsx`: ローディングアニメーションコンポーネント。
- `PanelHeader.tsx`: パネルヘッダーコンポーネント。
- `PanelHeaderButton.tsx`: パネルヘッダーボタンコンポーネント。
- `Slider.tsx`: スライダーコンポーネント。
- `ThemeSwitch.tsx`: テーマ切り替えスイッチコンポーネント。


#### app/components/workbench: ワークベンチ関連

##### app/components/workbench/terminal: ターミナル関連

- `Terminal.tsx`: ターミナルコンポーネント。
- `theme.ts`: ターミナルテーマ設定。

- `EditorPanel.tsx`: エディタパネルコンポーネント。
- `FileBreadcrumb.tsx`: ファイルパスブレッドクラムコンポーネント。
- `FileTree.tsx`: ファイルツリーコンポーネント。
- `PortDropdown.tsx`: プレビューポート選択ドロップダウン。
- `Preview.tsx`: プレビュー表示コンポーネント。
- `Workbench.client.tsx`: ワークベンチコンポーネント。

### app/lib ディレクトリ

#### app/lib/hooks: カスタムフック

- `index.ts`: hooksのエクスポートまとめ
- `useMessageParser.ts`: メッセージ解析フック。
- `usePromptEnhancer.ts`: プロンプト改善フック。
- `useShortcuts.ts`: ショートカット処理フック。
- `useSnapScroll.ts`: スクロール制御フック。

#### app/lib/persistence: データ永続化関連

- `ChatDescription.client.tsx`: チャット説明表示コンポーネント。
- `db.ts`: IndexedDB操作ユーティリティ。
- `index.ts`: エクスポートまとめ
- `useChatHistory.ts`: チャット履歴管理フック。

#### app/lib/runtime: 実行時処理関連
- `action-runner.ts`: AIアクション実行クラス。
- `message-parser.spec.ts`: `message-parser.ts`のユニットテスト。
- `message-parser.ts`: メッセージ解析クラス。

#### app/lib/.server: サーバーサイド処理関連

##### app/lib/.server/llm: LLM関連処理

- `api-key.ts`: APIキー管理。
- `constants.ts`: LLM関連定数。
- `model.ts`: AIモデル選択・設定。
- `prompts.ts`: プロンプトテンプレート。
- `stream-text.ts`: テキストストリーミング処理。
- `switchable-stream.ts`: ストリーム切り替え機能。

#### app/lib/stores: 状態管理

- `chat.ts`: チャット状態管理ストア。
- `editor.ts`: エディタ状態管理ストア。
- `files.ts`: ファイルシステム状態管理ストア。
- `previews.ts`: プレビュー状態管理ストア。
- `settings.ts`: アプリケーション設定ストア。
- `terminal.ts`: ターミナル状態管理ストア。
- `theme.ts`: テーマ状態管理ストア。

#### app/lib/webcontainer: WebContainer API関連

- `auth.client.ts`: WebContainer API認証処理。
- `index.ts`: WebContainer初期化・管理。

### app/routes ディレクトリ: ルーティングとデータローディング

- `api.chat.ts`: `/api/chat`エンドポイントハンドラ。
- `api.enhancer.ts`: `/api/enhancer`エンドポイントハンドラ。
- `chat.$id.tsx`: `/chat/:id`ルートハンドラ。
- `_index.tsx`: ルート(`/`)と`/chat/:id`ルートハンドラ。

### app/styles ディレクトリ: スタイルシート

- `animations.scss`: アニメーション効果定義。
- `index.scss`: メインスタイルシート。
- `variables.scss`: CSS変数定義。
- `z-index.scss`: z-index値定義。

#### app/styles/components: コンポーネントスタイル

- `code.scss`: コードブロックスタイル。
- `editor.scss`: エディタスタイル。
- `resize-handle.scss`: リサイズハンドルスタイル。
- `terminal.scss`: ターミナルスタイル。
- `toast.scss`: トースト通知スタイル。


### app/types ディレクトリ: TypeScript型定義

- `actions.ts`: アクション型定義。
- `artifact.ts`: 成果物型定義。
- `terminal.ts`: ターミナル型定義。
- `theme.ts`: テーマ型定義。

### app/utils ディレクトリ: ユーティリティ関数

- `buffer.ts`: イベントバッファリングユーティリティ。
- `classNames.ts`: クラス名結合ユーティリティ。
- `constants.ts`: アプリケーション定数定義。 **利用可能なLLMとプロバイダを定義。**
- `debounce.ts`: デバウンスユーティリティ。
- `diff.ts`: ファイル差分計算ユーティリティ。
- `easings.ts`: アニメーションイージング関数。
- `logger.ts`: ロギングユーティリティ。
- `markdown.ts`: Markdown変換ユーティリティ。
- `mobile.ts`: モバイル判定ユーティリティ。
- `promises.ts`: Promiseユーティリティ。
- `react.ts`: React関連ユーティリティ。
- `shell.ts`: シェルコマンド実行ユーティリティ。
- `stripIndent.ts`: インデント除去ユーティリティ。
- `terminal.ts`: ターミナル関連ユーティリティ。
- `unreachable.ts`: 到達不可能コードエラーユーティリティ。

## functions ディレクトリ (バックエンド)

- `[[path]].ts`: Cloudflare Pages Functions ハンドラ。

## icons ディレクトリ: アイコンファイル

## public ディレクトリ

- `social_preview_index.jpg`: ソーシャルプレビュー用画像。

## types ディレクトリ

- `istextorbinary.d.ts`: `istextorbinary`ライブラリの型定義。


## データフロー


```mermaid
%%{init: {'theme':'base'}}%%

graph TD
    subgraph ユーザー
        A[ユーザー入力] --> B{プロンプト入力}
        B --> C[メッセージ送信]
    end
    C --> D["/api/chat サーバー"]
    subgraph サーバー
        D --> E[リクエスト解析]
        E --> F{モデル選択}
        F --> G[LLM Anthropic, OpenAI, etc.]
        G --> H{ストリーミングレスポンス}
        H --> I[SwitchableStream]
        I --> J["/api/chat レスポンス"]
    end
    J --> K[クライアント]
    subgraph クライアント
        K --> L[メッセージ表示]
        K --> M{成果物解析 MessageParser}
        M -- 成果物あり --> N[成果物表示 Workbench]
        N --> O[ファイル編集]
        O --> P[unsavedFiles 更新]
        P --> Q{ファイル保存}
        Q -- 保存時 --> R[サーバー ファイル更新]
        B -- プロンプト改善 --> S["/api/enhancer サーバー"]
        subgraph サーバー
            S --> T[プロンプト改善 LLM]
            T --> U["/api/enhancer レスポンス"]
        end
        U --> V[改善されたプロンプト表示]
        V --> B
    end
    R --> F
```

### データフローの詳細解説

1. **ユーザー入力 (ユーザー):** ユーザーがチャットインターフェースにプロンプトを入力します。

2. **メッセージ送信 (ユーザー):**  ユーザーがメッセージを送信します。

3. **リクエスト処理 (/api/chat - サーバー):**  リクエストがサーバーの `/api/chat` エンドポイントに送信されます。

4. **リクエスト解析 (サーバー):** サーバーはリクエストを解析し、メッセージ履歴と選択されたモデルを取得します。

5. **モデル選択 (サーバー):**  ユーザーが選択したLLMに基づいてモデルを選択します。デフォルトは`DEFAULT_MODEL`です。

6. **LLM 呼び出し (サーバー):**  選択された LLM (Anthropic, OpenAI, Groq, Ollama, Bedrockなど) にプロンプトを送信します。`streamText` 関数はこの処理を担い、`getSystemPrompt` で定義されたシステムプロンプトも併せて送信します。

7. **ストリーミングレスポンス (サーバー):** LLM からストリーミングレスポンスを受信します。

8. **ストリーム変換 (サーバー):** `SwitchableStream` は、LLM からのストリーミングレスポンスを処理し、必要に応じて `CONTINUE_PROMPT` を使用して継続的にメッセージを生成します。トークン制限に達した場合などに、新しいストリームに切り替えます。

9. **レスポンス送信 (/api/chat レスポンス - サーバー):**  ストリーミングレスポンスをクライアントに送信します。

10. **メッセージ表示 (クライアント):** クライアントはストリーミングレスポンスを受信し、チャットインターフェースにメッセージを表示します。

11. **成果物解析 (MessageParser - クライアント):**  クライアントサイドの `MessageParser` は、受信したメッセージを解析し、成果物 (`<boltArtifact>`) とアクション (`<boltAction>`) を抽出します。

12. **成果物表示 (Workbench - クライアント):** 成果物が含まれる場合、`Workbench` コンポーネントに成果物を表示します。

13. **ファイル編集 (クライアント):** ユーザーは Workbench でファイルの編集を行うことができます。

14. **unsavedFiles 更新 (クライアント):** ファイル編集が行われると、`unsavedFiles` ストアが更新され、未保存のファイルが追跡されます。

15. **ファイル保存 (クライアント):** ユーザーがファイルを保存すると、`saveFile` 関数が呼び出されます。

16. **ファイル更新 (サーバー):** クライアントからファイル保存のリクエストがサーバーに送信され、サーバーはファイルシステムを更新します。

17. **プロンプト改善 (ユーザー):** ユーザーがプロンプトの改善を要求すると、`/api/enhancer` にリクエストが送信されます。

18. **プロンプト改善 (LLM - サーバー):** サーバーは LLM を使用してプロンプトを改善します。

19. **改善されたプロンプト表示 (クライアント):** 改善されたプロンプトがクライアントに返され、表示されます。



## まとめ

Bolt は、WebContainer API と AI モデルを組み合わせることで、ブラウザ上で高度な開発体験を提供します。明確に定義されたコンポーネント構造、状態管理、データ永続化、ストリーミング処理など、洗練された設計により、堅牢で拡張性の高いアプリケーションを実現しています。

## リポジトリ

https://github.com/Sunwood-ai-labs/bolt.new.bedrock

## ベースリポジトリ

https://github.com/hodachi-axcxept/bolt.new-multiLLM

## 原点

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

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