Bolt.new アプリケーションの構造と機能解説
はじめに
このドキュメントは、Bolt アプリケーションのコードベースの構造と各部の機能について解説します。Bolt は、StackBlitz の WebContainer API を活用し、ブラウザ上でフルスタック Web アプリケーションのプロンプト入力、実行、編集、デプロイを可能にする AI 駆動の開発ツールです。このリポジトリは Bolt.new のコアコンポーネントを提供するオープンソース版であり、独自の AI 駆動開発ツール作成を支援します。Cole Medin氏によってフォークされたこのバージョンでは、プロンプトごとに使用するLLMを選択可能です。
主要な機能と構造
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ライブラリの型定義。
データフロー
データフローの詳細解説
-
ユーザー入力 (ユーザー): ユーザーがチャットインターフェースにプロンプトを入力します。
-
メッセージ送信 (ユーザー): ユーザーがメッセージを送信します。
-
リクエスト処理 (/api/chat - サーバー): リクエストがサーバーの
/api/chatエンドポイントに送信されます。 -
リクエスト解析 (サーバー): サーバーはリクエストを解析し、メッセージ履歴と選択されたモデルを取得します。
-
モデル選択 (サーバー): ユーザーが選択したLLMに基づいてモデルを選択します。デフォルトは
DEFAULT_MODELです。 -
LLM 呼び出し (サーバー): 選択された LLM (Anthropic, OpenAI, Groq, Ollama, Bedrockなど) にプロンプトを送信します。
streamText関数はこの処理を担い、getSystemPromptで定義されたシステムプロンプトも併せて送信します。 -
ストリーミングレスポンス (サーバー): LLM からストリーミングレスポンスを受信します。
-
ストリーム変換 (サーバー):
SwitchableStreamは、LLM からのストリーミングレスポンスを処理し、必要に応じてCONTINUE_PROMPTを使用して継続的にメッセージを生成します。トークン制限に達した場合などに、新しいストリームに切り替えます。 -
レスポンス送信 (/api/chat レスポンス - サーバー): ストリーミングレスポンスをクライアントに送信します。
-
メッセージ表示 (クライアント): クライアントはストリーミングレスポンスを受信し、チャットインターフェースにメッセージを表示します。
-
成果物解析 (MessageParser - クライアント): クライアントサイドの
MessageParserは、受信したメッセージを解析し、成果物 (<boltArtifact>) とアクション (<boltAction>) を抽出します。 -
成果物表示 (Workbench - クライアント): 成果物が含まれる場合、
Workbenchコンポーネントに成果物を表示します。 -
ファイル編集 (クライアント): ユーザーは Workbench でファイルの編集を行うことができます。
-
unsavedFiles 更新 (クライアント): ファイル編集が行われると、
unsavedFilesストアが更新され、未保存のファイルが追跡されます。 -
ファイル保存 (クライアント): ユーザーがファイルを保存すると、
saveFile関数が呼び出されます。 -
ファイル更新 (サーバー): クライアントからファイル保存のリクエストがサーバーに送信され、サーバーはファイルシステムを更新します。
-
プロンプト改善 (ユーザー): ユーザーがプロンプトの改善を要求すると、
/api/enhancerにリクエストが送信されます。 -
プロンプト改善 (LLM - サーバー): サーバーは LLM を使用してプロンプトを改善します。
-
改善されたプロンプト表示 (クライアント): 改善されたプロンプトがクライアントに返され、表示されます。
まとめ
Bolt は、WebContainer API と AI モデルを組み合わせることで、ブラウザ上で高度な開発体験を提供します。明確に定義されたコンポーネント構造、状態管理、データ永続化、ストリーミング処理など、洗練された設計により、堅牢で拡張性の高いアプリケーションを実現しています。
リポジトリ
ベースリポジトリ
原点
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
Discussion