Write, generate, and SEO-optimize long-form blog posts inside a Notion-style WYSIWYG editor. A production-ready, self-hostable Next.js SaaS boilerplate with folder categorization, AI-powered draft generation, meta-tag management, focus keyword tracking, and built-in Stripe billing. A free open-source alternative to Jasper, Copy.ai, Surfer SEO, Outranking, and Writesonic — powered by the MuAPI AI engine.

Tech stack: Next.js 14 (App Router) · Prisma · PostgreSQL · NextAuth (Google OAuth) · Stripe · Tailwind CSS · Custom Rich Text Editor · OpenAI gpt-5-chat · MuAPI Use cases: Content marketing teams · Affiliate blog networks · SEO content production · Agency blog management · Multi-author publications · Programmatic SEO · Niche site building · Newsletter writing · Documentation drafting

🎨 Explore 50+ more open-source AI apps →

GitHub Repository: github.com/SamurAIGPT/blogger-cms

Live Demo: blogger-cms-psi.vercel.app

Sign in with Google to explore the blog writer workspace, category folders, rich text editor, and credit purchase flows.

Blogger CMS is a highly optimized SaaS application designed to help bloggers, copywriters, and content agencies create and manage SEO-friendly articles. It features a modern, clean interface, real-time AI content generation, an advanced custom rich text editor, and integrated billing structures out of the box.

Why use Blogger CMS?

• Production-Ready SaaS — Complete with Google OAuth, PostgreSQL connection pooling, and Stripe Checkout workflows.
• AI-Powered Generation — Create comprehensive, formatted blog posts with headings, paragraphs, and lists instantly using the OpenAI gpt-5-chat engine.
• Robust Local Testing — Automatically falls back to a realistic local mock generator if the AI API is offline or the credentials aren't configured, making testing 100% reliable.
• Custom Rich Text Editor — Fast, native contentEditable editor with custom paragraph, heading, list, and font weight actions with automatic cursor focus preservation.
• Granular Category Folders — Group blog posts into categories (folders) for organized publishing workflows.
• Full SEO Optimization Suite — Track character counts, configure custom meta titles, descriptions, focus keywords, and canonical URLs.

• Instantly write entire blog posts based on a Primary Keyword and Blog Topic.
• Formulates professional copy formatting subheadings (h2, h3), lists, bold text, and intro/conclusions.
• Polled asynchronously with status indicator overlays while the generation runs in the background.

• Custom HTML text editor with controls for standard blocks (Paragraph, H2, H3), inline styling (Bold, Italic, Underline), and lists (Bullet, Numbered).
• Prevent-default mouse tracking prevents the text selection from being cleared when formatting buttons are clicked.
• Automated clean-up logic to show formatting placeholder prompts when the editor is cleared.

• Organize articles into custom blog folders.
• Sidebar navigator to switch between categories, view article counts per group, and delete groups.
• Perform quick actions like drafting, publishing, editing, or deleting posts.

• Pre-integrated tiers: Starter ($10/100 credits), Pro ($25/300 credits), and Business ($50/750 credits).
• Credit balances are automatically updated upon successful checkout completion using Stripe webhooks.

Configure these keys inside your local .env or production Vercel dashboard:

• Node.js (v18 or higher)
• A local or remote PostgreSQL database instance.

1. Clone & Navigate

   git clone https://github.com/SamurAIGPT/blogger-cms
   cd blogger-cms

2. Install Dependencies

   npm install

3. Configure Variables

   cp .env.example .env
   # Open .env and populate your active database and OAuth API keys

4. Initialize DB Schema

   npx prisma generate
   npx prisma db push

5. Start Dev Server

   npm run dev

   Open http://localhost:3000 in your browser to view the app!

blogger-cms/
├── prisma/
│   └── schema.prisma           # Schema tables: Users, Accounts, Sessions, BlogGroup, BlogPost
├── src/
│   ├── app/                    # Next.js App Router
│   │   ├── api/
│   │   │   ├── auth/           # NextAuth session configuration
│   │   │   ├── blogs/          # GET, POST, DELETE handlers for articles
│   │   │   ├── generate/       # AI generation task submitters & status checkers
│   │   │   ├── groups/         # GET, POST, DELETE handlers for category folders
│   │   │   └── stripe/         # Stripe checkout sessions & webhook fulfillment
│   │   ├── manage/
│   │   │   └── blog-list/      # Categorized dashboard list & folders workspace
│   │   ├── pricing/            # Credit packs & checkout landing page
│   │   ├── globals.css         # Typography, glassmorphism, and scrollbars
│   │   ├── layout.js           # Shared HTML wrapper, fonts, and Navbar import
│   │   └── page.js             # Main WYSIWYG Blog Editor and AI generator portal
│   ├── components/
│   │   ├── layout/
│   │   │   └── Navbar.jsx      # Navigation header with credits counter & user state
│   │   ├── Providers.jsx       # NextAuth session wrapper
│   │   └── RichTextEditor.jsx  # Native contentEditable editor with select-preservation
│   └── lib/
│       ├── prisma.js            # Prisma client singleton (with pg adapter)
│       ├── auth.js              # Google OAuth credentials configuration
│       ├── config.js            # Plans details and cost definitions
│       ├── stripe.js            # Stripe client initialization helper
│       └── services/
│           ├── user.js          # User details queries & credit deduction helpers
│           ├── billing.js       # Webhook handling and checkout generation
│           └── ai.js            # MuAPI LLM requests and mock generators

MIT Licensed. Fork it, customize it, and deploy your own AI-powered Blogging SaaS!