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

What I Learned

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

Details

プロジェクト概要

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

UI

発明生成フロー

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

発明生成フロー

ギャラリー表示

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

ギャラリー

技術スタック

フロントエンド

バックエンド

セキュリティ

モノレポ管理

プロジェクト構造

モノレポ構成で管理：

hirameki-mixer/
├── workers/              # Cloudflare Workers API
│   ├── src/
│   │   ├── index.ts     # メインエントリポイント
│   │   ├── types.ts     # 型定義
│   │   └── lib/
│   │       ├── auth.ts  # Google OAuth2認証
│   │       ├── gemini.ts # Gemini連携
│   │       ├── imagen.ts # Imagen連携
│   │       ├── firestore.ts # Firestore連携
│   │       └── qr.ts    # QRコード生成
│   └── wrangler.toml    # Workers設定
├── frontend/            # React SPA
│   ├── src/
│   │   ├── App.tsx      # メインアプリ
│   │   ├── api.ts       # API client
│   │   ├── screens/     # 画面コンポーネント
│   │   └── hooks/       # カスタムフック
│   └── vite.config.ts
└── package.json         # ルートpackage.json

運用コスト

大学祭当日、約300件の発明を生成した結果、以下のコストとなった：

Vertex AIのコストが大部分を占めるものの、展示イベント用途としては十分に許容範囲内のコストである。

デプロイ構成

References

Powered by Hugo with Console Theme.