Skip to content

skumalo0115-commits/ai-content-engine

πŸš€ AI Content Engine

image

AI Content Engine (ACE) is a Next.js 16 app that helps small businesses generate practical, channel-specific social content plans in seconds ⚑. It turns three inputs (business type, target audience, and goal) into a five-day execution blueprint with ready-to-use ideas for Instagram, TikTok, Facebook/LinkedIn, hashtags, and learning resources πŸ“ˆ.

🎯 Why this exists

Most businesses know they should post consistently but struggle with what to post next πŸ€”. ACE is built to reduce that friction by giving users a concrete action plan they can execute immediately βœ….

🧠 Core capabilities

  • AI strategy generation via OpenRouter (/api/generate-content) πŸ€–.
  • Structured outputs: title, overview, Instagram plan, TikTok plan, Facebook/LinkedIn plan, hashtag plan, and a 5-day action plan πŸ—‚οΈ.
  • Curated video recommendations to help users execute each strategy πŸŽ₯.
  • Local free-tier usage tracking (5 free generations/day per browser) πŸ†“.
  • Stripe checkout + verification flow for Pro upgrades πŸ’³.
  • Firebase Auth support (Google provider, browser persistence) πŸ”.

🧩 Full blueprint

1) πŸ› οΈ Product flow

  1. User opens the marketing site/dashboard.
  2. User submits:
    • business type
    • target audience
    • goal
  3. API validates payload (required fields + max lengths).
  4. Server requests generation from OpenRouter.
  5. Response is parsed into strict JSON sections.
  6. UI renders a practical 5-day strategy and related recommendations.
  7. Free plan usage is tracked in localStorage.
  8. User can upgrade to Pro through Stripe checkout.

2) πŸ—οΈ System architecture

  • Frontend: Next.js App Router with React 19 + TypeScript βš›οΈ.
  • Styling/UX: Tailwind CSS 4, Framer Motion, and Three.js scene components 🎨.
  • Backend routes:
    • POST /api/generate-content
    • POST /api/checkout
    • GET /api/checkout/verify
  • AI provider: OpenRouter chat completions API πŸ€–.
  • Payments: Stripe subscriptions πŸ’Έ.
  • Auth: Firebase client auth utilities πŸ”.
  • Config source of truth: app/lib/site.ts.

3) πŸ“¦ Data contract (AI output shape)

The generation pipeline expects these JSON keys:

  • title
  • overview
  • instagram_plan
  • tiktok_plan
  • facebook_linkedin_plan
  • hashtag_plan
  • five_day_plan (exactly 5 items)
  • video_topics (3 to 4 items)

4) πŸ“Š Plans and limits

  • Free: 5 generations/day (browser-local tracking) πŸ†“.
  • Pro: unlimited generations (subscription flow scaffolded with Stripe) 🌟.

5) πŸ—ΊοΈ Project structure

app/
  api/
    generate-content/route.ts
    checkout/route.ts
    checkout/verify/route.ts
  components/
  lib/
    generator.ts
    site.ts
    usage.ts
    stripe.ts
    firebase.ts
  dashboard/page.tsx
  pricing/page.tsx
  page.tsx
public/

🧰 Tech stack

  • Framework: Next.js 16.2
  • Language: TypeScript 5
  • UI: React 19, Tailwind CSS 4, Framer Motion
  • 3D/visuals: Three.js + React Three Fiber + Drei
  • AI: OpenRouter
  • Payments: Stripe
  • Auth: Firebase

πŸ”§ Environment variables

Create .env.local in the project root:

# App
NEXT_PUBLIC_SITE_URL=http://localhost:3000

# OpenRouter
OPENROUTER_API_KEY=...
OPENROUTER_MODEL=openai/gpt-4o-mini

# Stripe
STRIPE_SECRET_KEY=...
STRIPE_PRO_PRICE_ID=...

# Firebase (client)
NEXT_PUBLIC_FIREBASE_API_KEY=...
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=...
NEXT_PUBLIC_FIREBASE_PROJECT_ID=...
NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=...
NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=...
NEXT_PUBLIC_FIREBASE_APP_ID=...

▢️ Run locally

npm install
npm run dev

Open http://localhost:3000.

πŸ“œ Scripts

  • npm run dev – start local dev server πŸ§ͺ
  • npm run build – production build 🏁
  • npm run start – run production server 🌐
  • npm run lint – lint codebase πŸ”

πŸ’¬ Skills

  • Product strategy framing for early-stage SaaS 🧭
  • Prompt and output-structure design for AI marketing workflows ✍️
  • Next.js app architecture and feature decomposition 🧱
  • Growth-oriented landing page and conversion copy πŸ“£
  • API-first integration planning (OpenRouter, Stripe, Firebase) πŸ”Œ

πŸ›£οΈ Roadmap ideas

  • Save and export generated strategies πŸ’Ύ.
  • Team collaboration and shared workspaces 🀝.
  • Calendar integrations and scheduled posting workflows πŸ—“οΈ.
  • Brand voice memory and campaign history 🧬.
  • Analytics feedback loop for recommendation tuning πŸ“ˆ.

πŸ“„ License

MIT License

About

AI Content Engine generates practical five-day social media execution plans for small businesses using OpenRouter, with a free-tier flow and Stripe-based Pro upgrades πŸš€.

Topics

Resources

License

Code of conduct

Contributing

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors