Building a subscription-based AI writing tool sounds complex—payments, authentication, OAuth, recurring billing. But what if you could ship a production app in just a few hours?
Here's the secret: use a modern full-stack framework, a serverless database, and a payment platform purpose-built for indie SaaS. In this guide, we'll walk through building an AI writing app where users sign up, select from 8 writing templates, generate content through Claude or ChatGPT, and refine it in a chat interface—all with a free tier and $20/month Pro tier.
WHY THIS APPROACH WORKS
Traditional SaaS stacks force you to manage payment processing, user credentials, recurring billing, and auth flows yourself. Whop OAuth and Whop Payments eliminate this entirely. You get authentication without credential management and payments without connected accounts. Vercel, Neon Postgres, and Prisma handle the rest.
The key insight: deploy first, develop second. Get a production URL before you write a single API route. This lets you configure OAuth callbacks from the start instead of changing them later.
THE APP AT A GLANCE
Users choose from templates (blog post, email, social post, ad copy, landing page, product description, SEO article, press release), fill in details, and receive AI-generated drafts. They can then chat with the AI to refine outputs until they're ready to copy.
The free tier includes 3 templates and 5 daily generations. Pro ($20/month) unlocks all templates and unlimited generations. Last 20 generations are stored per user with full chat history.
THE TECH STACK
· Next.js for full-stack development with Server Components
· React for interactive client code
· Vercel AI SDK to speak to both Claude and ChatGPT with a single interface
· Whop OAuth for secure sign-in via PKCE (OAuth 2.1 standard)
· Whop Payments for subscriptions and webhooks
· Neon serverless Postgres via Vercel integration
· Prisma as the ORM with Neon adapter
· iron-session for encrypted cookie sessions (no Redis needed)
· Tailwind CSS and Zod for styling and validation
THE ARCHITECTURE
The app has two main sections: a landing page visible to everyone, and a Studio (/studio)—an authenticated three-panel IDE with generation history on the left, active generation and chat in the center, and a template picker on the right.
Three API routes handle authentication: login starts OAuth with PKCE, callback exchanges code for tokens and stores the session, and logout clears it. Additional routes power generation and chat, and a webhook route handles Whop membership events.
BUILDING THE CORE
Start by scaffolding Next.js with dependencies for auth, sessions, validation, and database access. Deploy immediately to Vercel—this gives you a production URL needed for Whop OAuth configuration. Add Neon Postgres from Vercel's Storage tab; it auto-populates environment variables.
Create a Whop app, set up OAuth with your Vercel URL, and configure API keys for Claude and ChatGPT. Define your Prisma schema with six tables: users, plans, memberships, templates, generations, and chat messages. Seed 8 templates (3 free, 5 pro).
HANDLING PAYMENTS
When a user clicks "Upgrade to Pro," open the Whop checkout. After payment, Whop fires a membership.activated webhook. Your app creates a Membership record with ACTIVE status. On every request, a tier helper reads the user's Membership to unlock Pro features. Subsequent webhooks keep membership status in sync.
WHY THIS BEATS BUILDING SOLO
You could build authentication yourself—but that means managing credentials, handling OAuth securely, and maintaining a complex session layer. You could use Stripe, but that requires connected accounts and extra complexity.
Whop is designed for exactly this use case: indie SaaS founders who want to ship fast. OAuth handles identity. Payments handles billing. You focus on your product.
The result? A production AI writing app built, deployed, and earning revenue in hours instead of weeks. That's the real win.
Original article here.
Top comments (0)