ContentHive

Create smarter. Publish faster

Comment

AI-Assisted Content Studio: Project Story

Tagline

Create smarter. Publish faster.

🔥 What Inspired Me

I wanted to create a one-click flow from idea → publishable social asset.
The vision was a workspace where a creator types a single prompt and instantly gets:

  • A headline
  • Post copy
  • Hashtags
  • A visual concept or generated image

I was also motivated by curiosity:

  • To experiment with the latest generative models (text + image).
  • To learn practical integration patterns: safe API usage, error handling, and structured output parsing.
  • To explore the “hive” metaphor: many small, iterative outputs from one prompt, reusable across social channels.

⚙️ How I Built It

Tech Stack

  • Frontend: Next.js 14 (App Router), TypeScript, React
  • Styling: Tailwind CSS (via globals.css)
  • Backend: Server API routes with secure fetch calls
  • Generative APIs: Google’s Gemini (text + image)

Architecture

  • Client (ContentGenerator.tsx)

    • Prompt input
    • Choose content type (text, image, video concept)
    • Calls POST /api/gemini
    • Renders results inline (text or images as data URLs/provider URLs)

  • Server API Routes

    • route.ts — main generation endpoint (branches into text or image, parses structured output).
    • route.ts — models-list proxy (avoids hardcoding model names).
    • route.ts — quick diagnostics/test route.

  • Configuration

    • Environment-driven with .env.local:
      GEMINI_API_KEY=... GEMINI_MODEL=... GEMINI_IMAGE_MODEL=...

🛠️ Development Process

  1. Start with a demo generator and simple local UI.
  2. Wire server API route → read GEMINI_API_KEY from env → forward structured requests.
  3. Add image branch:
    • Call https://generativelanguage.googleapis.com/v1/images:generate
    • Normalize responses (handle base64 variants or URLs).
  4. Add model discovery route to dynamically list available models.
  5. Iterate on prompt templates with a createSystemPrompt function to ensure JSON-like structured outputs.
  6. Build in logging and graceful fallbacks (e.g., fallback to text concepts if images fail).
  7. Keep secrets in .env.local, not source.
  8. Fix OAuth issues by removing NextAuth and adding a simple demo login.

🚧 Challenges I Faced

  • Inconsistent API responses:

    • Images returned in multiple formats (b64_json, imageBase64, data[0].url).
    • Needed normalization logic to avoid breakage.

  • Model access variability:

    • The same API key gave access to different subsets of models.
    • Solved via list-models proxy instead of hardcoding.

  • Fallback design:

    • If image generation failed → fallback to text-based concept.
    • Ensured the app never “broke silently.”

  • OAuth complexity:

    • Redirect URI issues during dev (port changes).
    • Solution: stick to demo login flow for simplicity.

📚 What I Learned

  • Model discovery is essential: never assume model names.
  • Normalize everything: handle multiple data formats consistently.
  • Defensive coding pays off: validate requests, provide defaults, log clearly.
  • API experimentation requires discipline:
    • Rotate/restrict keys frequently.
    • Always separate demo keys from production.

✨ Key Takeaway

This project taught me that practical AI integration is less about model power and more about resilience: handling odd responses, fallbacks, and building a UI that gives creators a frictionless experience.

In short: Generative AI may provide the spark, but solid engineering keeps the fire burning. 🔥

Built With

Share this project:

Updates