v0 generates production-ready React components from natural language descriptions
Cursor AI writes backend logic, database queries, and API routes from prompts
The workflow: v0 for UI, Cursor for backend, Vercel for deployment
Authentication, payments, and database setup take 80% of the remaining manual work
AI-generated code still needs human review for security, edge cases, and architecture
Biggest mistake: shipping AI code without reviewing authentication and data validation
Plain-English First
v0 is like having a UI designer who can code — you describe a page and it builds the React component. Cursor is like having a backend developer who reads your mind — you describe an API endpoint and it writes the server code. Together, they turn a weekend project into a production SaaS. But they are tools, not replacements — you still need to think about architecture, security, and what happens when things go wrong.
AI-assisted development tools have crossed the threshold from novelty to production viability. v0 by Vercel generates production-quality React components from natural language. Cursor AI writes backend code, database queries, and API integrations from contextual prompts.
This article documents building a complete SaaS application — authentication, payments, database, and deployment — using only these two tools. The goal is not to prove that AI replaces engineers. It is to show where AI accelerates development, where it introduces risk, and what manual work remains after the AI generates the code.
The AI-Assisted Development Stack
The stack for this build consisted of three tools: v0 for frontend generation, Cursor AI for backend development, and Vercel for deployment. Each tool handles a specific layer of the application, and the integration between them determines the overall development velocity.
v0 generates React components with Tailwind CSS styling from natural language descriptions. It produces shadcn/ui-compatible components that integrate directly with Next.js projects. Cursor AI provides contextual code generation, refactoring, and debugging across the entire codebase. It understands project structure, existing patterns, and can generate code that matches your conventions.
The workflow is not fully automated — it is a human-AI collaboration where the human defines architecture and reviews output, and the AI handles implementation details. The human decides what to build. The AI builds it. The human verifies it works.
v0 excels at UI components — it understands design patterns, responsive layouts, and Tailwind CSS
Cursor excels at backend logic — it understands TypeScript, API patterns, and database queries
Neither tool handles architecture decisions — the human defines the system design
Neither tool handles security review — the human must verify auth, validation, and access control
The integration point is the TypeScript interface — types constrain both tools' output
Production Insight
AI tools generate code in isolation — they do not verify cross-component integration.
The human must define interfaces and verify that components connect correctly.
Rule: define TypeScript types first, then let AI implement against those types.
Key Takeaway
v0 generates UI components, Cursor generates backend logic — each has a strength boundary.
The human defines architecture and reviews output — AI handles implementation details.
TypeScript interfaces are the integration contract between AI-generated components.
Building the Frontend with v0
v0 generates React components from natural language descriptions. It produces shadcn/ui-compatible components styled with Tailwind CSS. The output is production-quality — not a prototype that needs rewriting.
The key to effective v0 usage is prompt specificity. Vague prompts produce generic output. Detailed prompts with specific requirements, design tokens, and component behavior produce components that match your design system.
The workflow for each page: describe the page layout in v0, copy the generated component into your project, install any missing shadcn/ui dependencies, and adjust the data layer to connect to your API. The visual structure is done — the data wiring is manual.
The visual structure is done by v0 — the data layer must be wired manually.
Building the Backend with Cursor AI
Cursor AI generates backend code — API routes, database queries, authentication logic, and payment integrations. It understands your project context through .cursorrules files and can generate code that matches your existing patterns.
The key to effective Cursor usage is defining project context upfront. The .cursorrules file tells Cursor your coding standards, file structure, naming conventions, and technology choices. Without this context, Cursor generates generic code that may not match your project conventions.
The workflow for each feature: define the TypeScript interface first, then ask Cursor to implement the route, query, or service matching that interface. The interface constrains the AI output and ensures type safety across the application.
.cursorrules defines your coding standards — Cursor follows them in generated code
TypeScript interfaces constrain AI output — define types before asking for implementation
Cursor understands existing code patterns — it generates code that matches your conventions
Pass error messages back to Cursor for fixes — it can debug its own output
Review all security-critical code — Cursor optimizes for correctness, not security
Production Insight
Cursor generates code that works — but not code that handles edge cases.
Error handling, input validation, and auth checks need human review.
Rule: treat Cursor output as a first draft, not a final implementation.
Key Takeaway
Cursor AI generates backend code that matches your project context.
.cursorrules is the key to quality — define standards before generating code.
Define TypeScript interfaces first, then ask Cursor to implement against them.
Database and Authentication Setup
Database setup and authentication are the two areas where AI assistance has the most limitations. These components require careful architectural decisions — schema design, migration strategy, auth flow, and security configuration — that AI tools handle poorly without explicit guidance.
Cursor can generate Prisma schemas and NextAuth configurations, but the human must decide the data model, relationship strategy, and auth flow. AI-generated schemas often lack indexes, have suboptimal relationships, and miss security constraints.
The recommended approach: design the schema manually, then ask Cursor to generate the Prisma schema matching your design. For auth, use a proven library (NextAuth.js) and ask Cursor to configure it — do not ask Cursor to build auth from scratch.
AI-generated schemas often lack indexes — add @@index for every foreign key and query filter
AI-generated auth may not apply to all routes — use global middleware instead of per-route checks, and exclude webhooks/public routes (Stripe can't send auth tokens)
Never ask AI to build auth from scratch — use proven libraries (NextAuth, Lucia, Clerk)
AI-generated migrations may not handle data migration — review before applying to production
Password hashing must use bcrypt or argon2 — never store plain text or use weak algorithms
Production Insight
AI generates schemas that work but are not optimized for query patterns.
Missing indexes cause slow queries as data grows — add them based on your access patterns.
Rule: review every AI-generated schema for indexes, constraints, and relationship optimization.
Key Takeaway
Database schema and auth require human architectural decisions — AI handles implementation.
Use proven auth libraries — never ask AI to build authentication from scratch.
Global middleware is safer than per-route auth checks for enforcing authentication.
Lessons Learned and What AI Cannot Do
Building a SaaS in 48 hours with AI tools revealed clear boundaries between what AI accelerates and what still requires human judgment. The 80/20 rule applies — AI handles 80% of implementation, but the remaining 20% is the hardest and most critical.
AI excels at generating boilerplate, UI components, CRUD operations, and integration code. AI struggles with architecture decisions, security review, edge case handling, and performance optimization. The human engineer's value shifts from writing code to reviewing code, making architectural decisions, and verifying correctness.
The biggest risk is false confidence — AI-generated code looks correct and runs correctly in happy-path testing. But it often fails on edge cases, security boundaries, and production-scale data. Every line of AI-generated code that touches authentication, payments, or user data must be reviewed by a human.
io.thecodeforge.saas.lessons.tsTYPESCRIPT
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
// ============================================// Lessons Learned: What AI Can and Cannot Do// ============================================// ---- What AI Handles Well ----// 1. UI Components (v0)// Prompt: "Create a pricing card with three tiers"// Output: Production-ready React component with Tailwind CSS// Human effort: 0 minutes (copy-paste)// 2. CRUD API Routes (Cursor)// Prompt: "Create CRUD routes for the products resource"// Output: GET, POST, PUT, DELETE routes with Prisma// Human effort: 5 minutes (review and add validation)// 3. Database Queries (Cursor)// Prompt: "Write a query that returns MRR grouped by plan"// Output: Prisma aggregate query// Human effort: 2 minutes (verify correctness)// 4. Integration Code (Cursor)// Prompt: "Create a Stripe checkout session for the pro plan"// Output: Stripe API integration with error handling// Human effort: 10 minutes (add webhook handling)// ---- What AI Handles Poorly ----// 1. Architecture Decisions// AI cannot decide: monorepo vs separate repos, auth strategy,// caching strategy, deployment model// Human effort: 2-4 hours of design and documentation// 2. Security Review// AI-generated code often has:// - Missing auth checks on new routes// - SQL injection in raw queries (rare with Prisma)// - Exposed sensitive data in API responses// - Missing rate limiting// Human effort: 1-2 hours of security audit// 3. Edge Case Handling// AI optimizes for happy path. Missing:// - Concurrent request handling// - Race condition prevention// - Graceful degradation on service failure// - Input validation for malformed data// Human effort: 2-3 hours of testing and hardening// 4. Performance Optimization// AI-generated code is correct but not fast:// - Missing database indexes// - N+1 query patterns// - Unnecessary re-renders in React// - Missing caching layers// Human effort: 1-2 hours of profiling and optimization// ---- The 48-Hour Build Breakdown ----const buildBreakdown = {
'Architecture design': '2 hours',
'v0 UI generation': '3 hours',
'Cursor backend generation': '4 hours',
'Data layer wiring': '3 hours',
'Auth setup and review': '2 hours',
'Stripe integration': '2 hours',
'Database schema design': '1 hour',
'Testing and edge cases': '4 hours',
'Security review': '2 hours',
'Deployment and config': '1 hour',
'Bug fixes and polish': '4 hours',
'Documentation': '1 hour',
// Remaining: sleep, food, breaks
}
// Total coding time: ~29 hours over 2 days// AI generated ~70% of the code// Human wrote ~30% (wiring, review, edge cases, config)// ---- Key Metrics ----const metrics = {
totalLinesOfCode: 4200,
aiGeneratedLines: 2940, // 70%
humanWrittenLines: 1260, // 30%
timeSpentReviewing: '8 hours', // 28% of coding time
bugsFoundInReview: 7,
bugsFoundInProduction: 2,
securityIssuesFound: 3, // All in AI-generated code
}
AI as a Multiplier, Not a Replacement
AI generates code 10x faster — but bugs ship 10x faster too
The human's role shifts from writing code to reviewing code — review is the bottleneck
Security and edge cases are the AI's blind spots — humans must fill these gaps
Architecture decisions cannot be delegated to AI — they require understanding business context
The 48-hour build took 8 hours of review — without review, it would have shipped with critical bugs
Production Insight
AI-generated code ships faster but also ships bugs faster.
The review process must scale with the generation speed — or bugs accumulate.
Rule: spend at least 25% of development time reviewing AI-generated code.
Key Takeaway
AI handles 80% of implementation — the remaining 20% is architecture, security, and edge cases.
The human's value shifts from writing code to reviewing and verifying AI output.
Every line of AI-generated code touching auth, payments, or user data needs human review.
● Production incidentPOST-MORTEMseverity: high
AI-Generated Auth Bypass Exposed User Data on First Deployment
Symptom
After deploying the SaaS, a security scan revealed that 12 of 15 API endpoints returned user data without checking authentication tokens. Any unauthenticated request received full user records including email addresses and subscription status.
Assumption
Cursor AI generated secure authentication middleware because the prompt mentioned 'authentication' and 'JWT'.
Root cause
The prompt asked Cursor to 'add JWT authentication to the API routes'. Cursor generated the auth middleware correctly but applied it to only 3 of 15 routes. The remaining 12 routes were generated in earlier prompts before the auth middleware existed. Cursor did not retroactively add auth to existing routes — it only applied auth to routes generated in the same prompt context.
Fix
Audited all 15 routes and manually added the auth middleware to the 12 unprotected routes. Added a global middleware in the Next.js middleware.ts file that enforces authentication on all /api routes by default, with explicit opt-out for public routes. Added integration tests that verify every route returns 401 without a valid token.
Key lesson
AI generates code in prompt context — it does not retroactively fix previously generated code
Security-critical code must be reviewed by a human regardless of AI generation
Global middleware patterns are safer than per-route middleware for authentication
Always run security scans on AI-generated code before deployment
Production debug guideCommon issues when building with v0 and Cursor AI5 entries
Symptom · 01
v0 component does not match the design system
→
Fix
Refine the prompt with specific design tokens: colors, spacing, font sizes. Paste existing CSS variables into the prompt context.
Symptom · 02
Cursor generates code that conflicts with existing patterns
→
Fix
Add project context files to Cursor's .cursorrules. Include your coding standards, file structure, and naming conventions.
Symptom · 03
AI-generated API route returns wrong data shape
→
Fix
Define TypeScript interfaces first, then ask Cursor to implement routes matching those interfaces. Types constrain the AI output.
Symptom · 04
Database queries are inefficient after AI generation
→
Fix
Review generated queries for N+1 problems, missing indexes, and unnecessary joins. AI optimizes for correctness, not performance.
Symptom · 05
Authentication works locally but fails in production
→
Fix
Check environment variables, cookie domain settings, and CORS configuration. AI often generates localhost-specific auth code.
★ AI Development Quick Debug ReferenceFast commands for diagnosing issues in AI-generated codebases
AI-generated code has TypeScript errors−
Immediate action
Run type check and fix systematically
Commands
npx tsc --noEmit 2>&1 | head -50
npx tsc --noEmit 2>&1 | grep -c 'error TS'
Fix now
Pass the error output back to Cursor with 'fix all TypeScript errors' prompt
the remaining 20% is architecture, security, and edge cases
3
Define TypeScript interfaces first to constrain AI output and ensure type safety
4
Every line of AI-generated code touching auth, payments, or user data needs human review
5
Spend at least 25% of development time reviewing AI-generated code
6
Use global middleware patterns instead of per-route checks to prevent security gaps
Common mistakes to avoid
6 patterns
×
Shipping AI-generated code without security review
Symptom
Authentication bypasses, exposed user data, missing input validation — all discovered by attackers, not developers
Fix
Run a security audit on every AI-generated route before deployment. Check auth middleware, input validation, and data exposure. Use automated security scanning tools.
×
Not defining TypeScript interfaces before asking Cursor to implement
Symptom
Cursor generates code with inconsistent data shapes — some routes return { data, error }, others return raw objects
Fix
Define all TypeScript interfaces in a types/ directory first. Reference these interfaces in your Cursor prompts to constrain the output.
×
Using v0 output without connecting the data layer
Symptom
Beautiful UI components that show static placeholder data — no loading states, no error handling, no real data
Fix
After generating with v0, wire the data layer: add fetch calls, loading states, error boundaries, and empty states.
×
Not configuring .cursorrules for project context
Symptom
Cursor generates code that does not match project conventions — different naming patterns, inconsistent error handling, wrong imports
Fix
Create a .cursorrules file with your coding standards, file structure, technology choices, and naming conventions.
Use proven auth libraries (NextAuth, Lucia, Clerk). Ask Cursor to configure the library, not to build auth from scratch.
×
Not testing AI-generated code with edge cases
Symptom
Code works perfectly in happy-path testing but fails on empty inputs, concurrent requests, and network timeouts
Fix
Write integration tests for every AI-generated route. Test with empty inputs, malformed data, concurrent requests, and timeout scenarios.
INTERVIEW PREP · PRACTICE MODE
Interview Questions on This Topic
Q01SENIOR
How would you use AI tools to accelerate development without compromisin...
Q02SENIOR
A developer on your team shipped AI-generated code that exposed user dat...
Q03JUNIOR
What is v0 and how does it differ from Cursor AI?
Q01 of 03SENIOR
How would you use AI tools to accelerate development without compromising code quality?
ANSWER
The key is treating AI as a first-draft generator, not a final implementation. My approach:
1. Define architecture first: Design the system architecture, data model, and API contracts manually. AI implements within these constraints.
2. Use TypeScript interfaces as contracts: Define all interfaces before asking AI to implement. The types constrain the AI output and ensure consistency.
3. Review every security-critical line: Auth, payments, and user data code must be human-reviewed. AI optimizes for correctness, not security.
4. Test edge cases manually: AI generates happy-path code. I write tests for empty inputs, concurrent requests, and failure scenarios.
5. Spend 25% of time on review: If AI generates code 10x faster, I spend proportionally more time reviewing. The review process must scale with generation speed.
The result is 3-5x faster development with the same quality as manual coding — because the human focuses on the 20% that matters most: architecture, security, and edge cases.
Q02 of 03SENIOR
A developer on your team shipped AI-generated code that exposed user data. How do you prevent this from happening again?
ANSWER
Systematic prevention requires three layers:
1. Code review policy: Every AI-generated code block must be flagged in the PR description. Reviewers apply extra scrutiny to AI-generated auth, data access, and API routes.
2. Automated security scanning: Add SAST tools (Snyk, Semgrep) to the CI pipeline. Configure rules specifically for common AI-generated vulnerabilities: missing auth checks, exposed sensitive fields, and weak input validation.
3. Global middleware patterns: Instead of relying on per-route auth checks (which AI may forget), enforce authentication globally with explicit opt-out for public routes. This makes it impossible to accidentally expose a protected route. This is exactly what failed in the production incident above.
4. .cursorrules security section: Add explicit security rules to the Cursor configuration: 'All API routes must check authentication. Never expose passwordHash, stripeCustomerId, or internal IDs in API responses. Always validate input with Zod.'
The root cause is that AI generates code in prompt context — it does not retroactively add security to previously generated code. Global patterns and automated scanning catch what the AI misses.
Q03 of 03JUNIOR
What is v0 and how does it differ from Cursor AI?
ANSWER
v0 is Vercel's AI tool for generating React UI components. You describe a component in natural language, and v0 generates production-ready React code with Tailwind CSS styling. It produces shadcn/ui-compatible components that integrate with Next.js projects. v0 excels at visual output — layouts, forms, dashboards, and design systems.
Cursor AI is an AI-powered code editor that generates backend logic, refactors code, and debugs issues across your entire codebase. It understands your project context through .cursorrules files and generates code that matches your existing patterns. Cursor excels at logical output — API routes, database queries, authentication, and integrations.
The key difference: v0 generates what the user sees (UI), Cursor generates what the server does (backend logic). Together, they cover the full stack. But neither handles architecture decisions, security review, or edge case testing — those remain human responsibilities.
01
How would you use AI tools to accelerate development without compromising code quality?
SENIOR
02
A developer on your team shipped AI-generated code that exposed user data. How do you prevent this from happening again?
SENIOR
03
What is v0 and how does it differ from Cursor AI?
JUNIOR
FAQ · 5 QUESTIONS
Frequently Asked Questions
01
Can you really build a production SaaS in 48 hours with AI tools?
Yes, but with caveats. The 48 hours includes 8 hours of code review, 4 hours of testing, and 2 hours of security audit. AI generates the code in about 7 hours, but the human spends significant time reviewing, wiring data layers, and handling edge cases. The SaaS was functional and deployed, but it was an MVP — not a feature-complete product.
Was this helpful?
02
Is v0 free to use?
v0 has a free tier with limited generations per month. The paid plan provides more generations and priority access. For a 48-hour build, the free tier is sufficient for generating the core UI components. You may need the paid plan for iterative refinement.
Was this helpful?
03
Can Cursor AI replace a backend developer?
No. Cursor accelerates backend development by generating boilerplate and integration code. But it cannot make architectural decisions, design data models, handle security review, or optimize for production scale. The developer's role shifts from writing code to reviewing code and making design decisions.
Was this helpful?
04
What happens when AI-generated code has a bug in production?
The same process as any production bug: reproduce, diagnose, fix, deploy. However, debugging AI-generated code can be harder because the developer did not write it and may not understand the implicit assumptions. The fix is to pass the error and relevant code back to Cursor for diagnosis — it can often debug its own output.
Was this helpful?
05
Should I use AI tools for my next project?
Yes, but with the right expectations. AI tools accelerate development by 3-5x for standard features. They do not replace engineering judgment for architecture, security, and performance. Use them for what they do well — generating boilerplate, UI components, and integration code. Handle architecture, security review, and edge cases manually.