@Maki-HamarukiLab(Maki Sunwood AI Labs.)

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

Posted at 2024-10-19

はじめに

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

https://t.co/V3VdBQED4iをgemini, openAi, ollama, anthropic対応に改造したmulti-providersをベースにしてBedrockを組み込んでみた！！！
めちゃ普通に動くぞ！！！ https://t.co/oFa2W5IkVY pic.twitter.com/yXAVIA8UC3
— Maki@Sunwood AI Labs. (@hAru_mAki_ch) October 17, 2024

主要な機能と構造

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