AI新結合ジェネレーター「ひらめきミキサー」の開発

What I Learned

大学祭展示向けのAI発明生成アプリ「ひらめきミキサー」を開発した。2つのキーワードを組み合わせてAIが新しい発明アイデア（商品名・キャッチコピー・画像）を生成するインタラクティブなWebアプリケーションである。Claude Codeを活用することで、約1日で開発を完了できた。

Details

プロジェクト概要

2つのキーワードから、Google Vertex AIを使って新しい発明アイデアを自動生成する。生成された発明は3D空間のギャラリーで閲覧可能である。

UI

発明生成フロー

トップページから2つのキーワードを入力し、AIが商品名・キャッチコピー・画像を自動生成する様子：

ギャラリー表示

生成された発明を3D空間で閲覧できるギャラリー：

技術スタック

フロントエンド

• React + TypeScript + Vite: モダンなSPAの構築
• Cloudflare Pages: 静的サイトホスティング
• 画面構成: カスタムフック（hooks/）とコンポーネント化（screens/）で管理
• フロントエンド・バックエンド共通の型定義（types.ts）による型安全性の確保

バックエンド

• Cloudflare Workers + Hono: サーバーレスAPIエンドポイント
  • サーバーレス環境でのGoogle Cloud API認証（サービスアカウントJSON）
  • wrangler secretによる環境変数管理
• Google Vertex AI:
  • Gemini 1.5 Pro: テキスト生成（商品名・キャッチコピー）、プロンプトエンジニアリング
  • Imagen 3.0: 高品質画像生成
  • GCP認証フローの実装（lib/auth.ts）
• Firebase Firestore: 発明データの永続化
  • 複合インデックス: isPublicGallery (ASC), createdAt (DESC)
  • Cloudflare Workers環境からの操作
• Cloudflare R2: 生成画像のストレージ、Workers APIとの連携

セキュリティ

• コードベースのIPホワイトリスト実装
• Google OAuth2認証（サービスアカウント）

モノレポ管理

• ルートpackage.jsonでの依存関係統合
• フロントエンド・バックエンドの独立した開発環境

プロジェクト構造

モノレポ構成で管理：