Build and Deploy a Full‑Featured AI‑Powered PDF Summarizer SaaS with Next.js, Tailwind, Clerk, Stripe, and AI Services

Introduction

In this guide we walk through the complete creation of Suare AI, a SaaS platform that turns any PDF into a concise, swipeable summary reel in seconds. The tutorial covers everything from project scaffolding to production deployment, allowing you to launch a side‑income or a full‑blown business with minimal code overhead.

What the App Does

• Users sign up / sign in via Clerk.
• Upload a PDF (max 20‑32 MB) through UploadThing, which stores the file on S3.
• The backend extracts raw text with LangChain, chunks it, and sends it to two LLM providers (OpenAI gpt‑4o and Google Gemini) for redundancy.
• AI returns bullet‑point highlights, why‑it‑matters notes, pro‑tips and markdown‑ready content.
• Summaries are saved in a Neon serverless PostgreSQL database and displayed on a dashboard as a swipeable carousel.
• Subscription plans (Basic 5 summaries/month, Pro unlimited) are managed via Stripe; plan limits are enforced on the upload page.

Tech Stack Overview

Project Setup

1. npx create-next-app@latest suare --ts --eslint --tailwind – scaffolds a TS Next.js app.
2. npx shadcn-ui@latest add all – installs the full Shadcn component set.
3. Add Tailwind v4 plugin, configure ESLint/Prettier, and create a global layout with header, footer, and SEO meta tags.
4. Install Clerk (@clerk/nextjs), UploadThing, LangChain, OpenAI SDK, Gemini SDK, Zod, Neon client, and Stripe SDK.

UI Design with Tailwind & Shadcn UI

• Use the container utility for consistent horizontal padding.
• Build reusable components: Header, Footer, NavLink, Badge, Button, Card, Dialog, Toast.
• Apply gradient borders (bg-gradient-to-r) and animated backgrounds via custom utilities.
• Add icons from Lucide‑React for visual cues.
• Implement skeleton loading states for PDFs, summary cards, and headers using Shadcn Skeleton components.

Authentication (Clerk)

• Wrap the app with <ClerkProvider> in layout.tsx.
• Create custom sign‑in / sign‑up pages using Clerk’s embeddable UI.
• Use <SignedIn> / <SignedOut> to toggle navigation links (Dashboard, Upload, Pricing).
• Protect routes with a logged-in route group that does not affect the URL structure.

File Uploads (UploadThing)

• Configure an UploadThing endpoint that stores PDFs on S3 and returns a public URL.
• Secure the endpoint by checking the Clerk session.
• Show toast notifications for upload start, progress, and errors.
• Validate uploads with Zod: file type application/pdf, size ≤ 20 MB.

PDF Extraction (LangChain)

async function fetchAndExtractPdfText(url: string) {
  const res = await fetch(url);
  const buffer = await res.arrayBuffer();
  const loader = new PDFLoader(buffer);
  const docs = await loader.load();
  return docs.map(d => d.pageContent).join('\n');
}

The extracted text is passed to the AI summarisation step.

AI Summarisation (OpenAI → Gemini fallback)

• Primary call: OpenAI gpt‑4o (or gpt‑4) with a system prompt that forces bullet‑point, emoji‑rich markdown output.
• On HTTP 429 or other errors, automatically invoke Gemini (gemini‑1.5‑flash) with the same prompt.
• Temperature 0.7, max tokens 1500 (OpenAI) or 500 (Gemini).
• Store the generated markdown in the database.

Database (Neon & PostgreSQL)

• Create tables for users, pdf_summaries, and subscriptions.
• Use Prisma or raw SQL via @neondatabase/serverless.
• Example schema snippet:

CREATE EXTENSION IF NOT EXISTS "uuid-ossp";
CREATE TABLE users (id UUID PRIMARY KEY DEFAULT uuid_generate_v4(), email TEXT UNIQUE, name TEXT);
CREATE TABLE pdf_summaries (
  id UUID PRIMARY KEY DEFAULT uuid_generate_v4(),
  user_id UUID REFERENCES users(id),
  file_url TEXT,
  title TEXT,
  summary TEXT,
  status TEXT DEFAULT 'completed',
  created_at TIMESTAMP DEFAULT now()
);

• Helper functions storePdfSummary, getSummaries, deletePdfSummary encapsulate CRUD operations.

Payments (Stripe)

• Define two products: Basic ($9/mo, 5 summaries) and Pro ($19/mo, unlimited).
• Create checkout sessions in a Next.js server action; redirect users to Stripe Checkout.
• Webhook endpoint (/api/payments/route.ts) listens for checkout.session.completed and customer.subscription.deleted events, updates the user record and payment history.
• Subscription guard middleware redirects users without an active plan to a styled “Subscription required” page.
• UI shows plan badge, upload‑limit banner, and upgrade CTA.

Core Feature Implementation

1. Upload Page – File input, Zod validation, toast feedback, server action to store file and trigger AI pipeline.
2. Dashboard – Lists summaries with SummaryCard components, shows status badges, delete button with confirmation dialog, and download markdown button.
3. Summary Viewer – Swipeable carousel built with Framer Motion; parses markdown into sections, displays reading time, and offers a plain‑text download.
4. Empty State – Friendly component encouraging first upload.
5. Delete Workflow – Client‑side dialog triggers a server action; uses useTransition for non‑blocking UI and revalidates the dashboard path.
6. Upload Limits – Functions getUserUploadCount, hasReachedUploadLimit, and getUserPlan enforce plan‑based caps.

Animations & Motion

• Reusable MotionWrapper client component defines containerVariants, itemVariants, and buttonVariants.
• Apply to hero, demo, pricing, and summary pages for fade‑in, slide‑in, and hover scale effects.

Loading Skeletons & Error Handling

• Each page includes a loading.tsx that renders Shadcn Skeleton placeholders.
• Server‑action timeout handling: split the heavy workflow into three actions (fetch PDF, generate summary, save result) and increase Vercel maxDuration to 60 seconds via vercel.json.

Deployment & Scaling

• Deploy to Vercel; store all secrets (NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY, CLERK_SECRET_KEY, STRIPE_SECRET_KEY, OPENAI_API_KEY, GEMINI_API_KEY, NEON_URL) in the dashboard.
• Use preview URLs for Stripe webhook testing (via LocalTunnel or Vercel’s built‑in preview).
• Neon’s serverless nature handles traffic spikes; Motion runs client‑side only, keeping server response fast.
• SEO metadata, Open Graph image, and canonical URLs are added for better discoverability.

Community & Resources

• Open‑source repo on GitHub with a cheat‑sheet, visual assets, and commit history.
• Dedicated Discord channel for troubleshooting and feature requests.
• Step‑by‑step “Get Started Quickly” checklist: clone repo → npm install → add env vars → npm run dev.

By the end of this guide you will have a production‑ready AI‑driven SaaS product that you can launch for free, monetize with Stripe, and scale using serverless technologies.

With modern, serverless tools like Next.js, Clerk, UploadThing, NeonDB, and AI providers, you can build a polished PDF‑summarisation SaaS from scratch, enforce subscription limits, and deploy it instantly to production—all while keeping the client bundle tiny and the developer experience smooth.