​
コアコンポーネント

フロントエンド

React + Vite。Firebase Authenticationでセッションを管理し、REST APIへBearerトークンを付与。

バックエンドAPI

Express/Node.js（CommonJS）。PostgreSQLとファイルシステムを操作し、AI APIへプロンプトを送信。

AI生成エンジン

Google Gemini 2.5 Flash Lite（テキストマーカー方式）+ Claude Sonnet 4.5（ツール使用 + テンプレートシステム）。AI_PROVIDER 環境変数で切り替え。

ホスティング

Node.jsファイルシステム + Nginx。生成したHTMLを /var/www/grav-sites/ に書き出し配信。

データストア

PostgreSQL（ユーザー/サイト/チャット/サブスクリプション）。スクリーンショットや画像はファイルシステムに保存。

決済 / 認証

Stripe サブスクリプション / Firebase Auth。REST APIのミドルウェアでトークンを検証。

​
データフロー

1

ユーザー操作

ブラウザからチャット指示・編集・メディアアップロードを送信。Firebaseトークンがヘッダーに付与されます。
2

APIゲートウェイ

Expressが authenticateUser ミドルウェアでIDトークンを検証し、サイトIDに対する所有権チェックを実施。
3

生成と永続化

AI（Gemini or Claude）でHTMLを生成 → ファイルシステムに default.md（frontmatter + HTML）として保存 → PostgreSQLへメタデータを記録。
4

配信

NginxがNode.jsアプリ経由でサイトを配信。Puppeteerがサムネイルを作成しダッシュボードで表示。

​
AI生成システム

​
モジュール構成 (server/ai/)

ファイル役割
system-prompts.jsプロンプト構築（edit/create × gemini/claude）
response-parser.jsGeminiテキストマーカー解析（CREATE_SITE/UPDATE_PAGE等）
site-operations.jsファイルシステム操作（サイト/ページCRUD）
token-tracker.jsDBトークン使用量追跡
provider-gemini.jsGemini APIラッパー
provider-claude.jsVercel AI SDK + Claude（ツール使用 + SSEストリーミング）
provider-router.jsプロバイダー選択 + フォールバック
tools.js6つのAI SDKツール定義

​
テンプレートシステム (server/ai/templates/)

ファイル役割
assembler.jsassembleSite/assemblePage メインロジック
base.jsHTMLラッパー（Tailwind CDN、CSS変数、フォント）
nav.js / footer.js共通コンポーネント
themes.js8業種テーマ定義
sections/13セクションテンプレート

​
データストア詳細

ストア主な用途備考
PostgreSQL (hirameki_web)ユーザー、ワークスペース、サイト、チャット、サブスク、APIキーusers, sites, chat_messages, api_keys など
ファイルシステム (/var/www/grav-sites/)生成されたHTMLページ、メディア、メタデータ.sitemeta.json にSEO/Analytics設定を保持
Screenshots (/var/www/hirameki-web/screenshots)ダッシュボード用サムネイルPuppeteerで自動生成

​
ページの保存形式

/var/www/grav-sites/{userId}-{siteId}/pages/{order}.{slug}/default.md
default.md はfrontmatter + HTMLの形式: 
---
title: ページタイトル
---
<html>...</html>

​
外部サービスとの統合

  • Firebase Authentication: トークン検証、Authorized domains
  • Google Gemini API: GEMINI_API_KEY により生成を実行
  • Anthropic Claude: Vercel AI SDK経由 (@ai-sdk/anthropic)
  • Stripe: /api/create-checkout-session でサブスクリプションを開始
  • Unsplash: 画像検索APIをメディアピッカーに組み込み

​
運用と監視

  • pm2 で ai-web-builder プロセスを常駐
  • ログ確認: pm2 logs ai-web-builder
  • 障害時は pm2 restart ai-web-builder でリカバリ