Development of AI Idea Generator 'Hirameki Mixer'

What I Learned

I developed “Hirameki Mixer,” an AI invention generation app for a university festival exhibition. It’s an interactive web application that combines two keywords to generate new invention ideas (product name, tagline, and image) using AI. By utilizing Claude Code, I was able to complete the development in about one day.

Details

Project Overview

From two keywords, it automatically generates new invention ideas using Google Vertex AI. The generated inventions can be viewed in a 3D space gallery.

UI

Invention Generation Flow

Enter two keywords from the top page, and AI automatically generates product name, tagline, and image:

Invention Generation Flow

A gallery where you can view generated inventions in 3D space:

Gallery

Tech Stack

Frontend

  • React + TypeScript + Vite: Building modern SPA
  • Cloudflare Pages: Static site hosting
  • Screen composition: Managed with custom hooks (hooks/) and componentization (screens/)
  • Type safety ensured through shared type definitions (types.ts) between frontend and backend

Backend

  • Cloudflare Workers + Hono: Serverless API endpoints
    • Google Cloud API authentication in serverless environment (service account JSON)
    • Environment variable management with wrangler secret
  • Google Vertex AI:
    • Gemini 1.5 Pro: Text generation (product name, tagline), prompt engineering
    • Imagen 3.0: High-quality image generation
    • Implementation of GCP authentication flow (lib/auth.ts)
  • Firebase Firestore: Persistence of invention data
    • Composite index: isPublicGallery (ASC), createdAt (DESC)
    • Operations from Cloudflare Workers environment
  • Cloudflare R2: Storage for generated images, integration with Workers API

Security

  • Code-based IP whitelist implementation
  • Google OAuth2 authentication (service account)

Monorepo Management

  • Dependency consolidation in root package.json
  • Independent development environments for frontend and backend

Project Structure

Managed in monorepo configuration:

hirameki-mixer/
├── workers/              # Cloudflare Workers API
│   ├── src/
│   │   ├── index.ts     # Main entry point
│   │   ├── types.ts     # Type definitions
│   │   └── lib/
│   │       ├── auth.ts  # Google OAuth2 authentication
│   │       ├── gemini.ts # Gemini integration
│   │       ├── imagen.ts # Imagen integration
│   │       ├── firestore.ts # Firestore integration
│   │       └── qr.ts    # QR code generation
│   └── wrangler.toml    # Workers configuration
├── frontend/            # React SPA
│   ├── src/
│   │   ├── App.tsx      # Main app
│   │   ├── api.ts       # API client
│   │   ├── screens/     # Screen components
│   │   └── hooks/       # Custom hooks
│   └── vite.config.ts
└── package.json         # Root package.json

Operating Costs

On the day of the university festival, approximately 300 inventions were generated, resulting in the following costs:

  • Total Cost: Approximately ¥1,300
  • Breakdown: Almost all from Vertex AI (Gemini + Imagen) API usage
  • Cloudflare: Operated within free tier
  • Firebase Firestore: Operated within free tier

While Vertex AI costs constitute the majority, it’s well within an acceptable cost range for exhibition event purposes.

Deployment Configuration

  • Frontend: Cloudflare Pages (automatic deployment)
  • Backend: Cloudflare Workers (wrangler deploy)
  • Secret Management: Configured via Wrangler CLI (GCP_PROJECT_ID, VERTEX_MODEL_*, GOOGLE_SERVICE_ACCOUNT_JSON, etc.)

References

cloudflare react typescript ai gemini imagen firestore