REPOSAGE PRIME
SAAS PLATFORM

Timeline

5 Weeks

Role

Lead Engineer

Core Integration

OpenAI GPT-4 API

Stack

Next.js + Stripe

01. System Architecture

Building an AI-driven SaaS requires a highly robust edge-computing setup. CodeSense uses Next.js API routes to handle authentication and securely relay prompts to the OpenAI models.

To maintain conversation history and context, user sessions and prompt metadata are stored in Prisma/PostgreSQL, while Stripe handles the subscription tiering logic.

Next.js 14Prisma ORMMicroservices

Next.js UITailwind + React

⟷

Edge APIServerless Funcs

↓↓

OpenAIGPT-4 / Vectors

DatabaseNeon + Prisma

02. The Context Engine

To provide meaningful code suggestions, the LLM needs context. I engineered a prompt-chaining system that automatically injects the user's selected framework, language, and surrounding code into the hidden system prompt.

This ensures the generated code matches the exact syntax and architecture of the user's existing project without requiring them to manually explain it every time.

Prompt EngineeringOpenAI API

api/generate/route.ts

export async function POST(req: Request) {
  const { prompt, framework, codeContext } = await req.json();

  // Construct contextual prompt
  const systemMessage = `
    You are an expert ${framework} developer.
    Analyze this existing code: \n${codeContext}\n
    Generate a solution for: ${prompt}
  `;

  const response = await openai.createChatCompletion({
    model: "gpt-4-turbo",
    messages: [{ role: "system", content: systemMessage }],
    stream: true,
  });

  return new StreamingTextResponse(response);
}

03. Stream Processing

Waiting for an AI model to generate 500 lines of code causes massive UX friction. To solve this, I implemented StreamingTextResponse from the Vercel AI SDK.

Chunks of data are streamed directly from the OpenAI server to the edge, and finally painted onto the user's React DOM in real-time, giving a typing effect that feels instant and responsive.

Vercel AI SDKEdge Streaming

bash — CodeSense Stream

GENERATING

04. Stripe SaaS Integration

A SaaS is only a hobby until it can process payments. I integrated Stripe Webhooks to handle the complex logic of subscription states (Active, Past Due, Canceled).

When a user upgrades to the Pro Tier, a webhook hits the Next.js API, updates the user's Prisma record, and instantly unlocks unlimited GPT-4 queries on the frontend via React state re-validation.

Stripe WebhooksMonetization

STRIPE EVENT: invoice.payment_succeeded

↓

Database

isPro = true

API Limits

Cap Removed

← Back to Overview