Zenn
💡

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

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

はじめに

このドキュメントは、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ライブラリの型定義。

データフロー

データフローの詳細解説

  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>

Discussion