DEV Community

Arseniy
Arseniy

Posted on

Building GitusAI: An AI-Powered Commit Message Generator

#ai #vscode #typescript #nextjs

We've all been there - staring at a Git commit dialog, trying to summarize hours of work into a concise, meaningful message. After experiencing this frustration one too many times, I decided to build GitusAI, a VS Code extension that generates clear, professional commit messages automatically.

🎯 The Problem

Writing good commit messages is hard. They need to be:

  • Concise (under 72 characters for the first line)
  • Descriptive (explain the "what" and "why")
  • Consistent (follow team conventions like Conventional Commits)
  • Professional (no more "fix stuff" or "WIP" messages)

Most developers rush through this step, leading to unclear project histories that make debugging and collaboration difficult.

💡 The Solution

GitusAI analyzes your staged changes and generates commit messages that are:

  • Smart: Uses OpenAI's GPT-3.5 to understand code context
  • Customizable: Supports multiple commit styles (Conventional Commits, emoji commits, regular format)
  • Fast: Generates messages in seconds
  • Integrated: Works directly in VS Code's Git panel with one-click insertion

🏗️ Tech Stack

Frontend & Landing Page

  • Next.js 15 (App Router with React 19)
  • TypeScript for type safety
  • Tailwind CSS with custom design system
  • Radix UI for accessible components
  • Framer Motion for smooth animations

Backend & API

  • Next.js API Routes for serverless endpoints
  • OpenAI API (GPT-3.5-turbo) for AI generation
  • Drizzle ORM with Neon Postgres for data management
  • Arctic for OAuth (GitHub & Google authentication)
  • JWT for secure token-based auth

Infrastructure

  • Cloudflare Workers for edge deployment (using @opennextjs/cloudflare)
  • Stripe & LemonSqueezy for payment processing
  • Rate limiting with usage tracking

🔨 How I Built It

1. The Core API (src/app/api/commit-generate/route.ts)

The heart of GitusAI is a Next.js API route that:

export async function POST(request: NextRequest) {
  // 1. Authenticate the user
  const token = getAuthToken(request)
  const decoded = await verifyJWT(token)

  // 2. Check rate limits based on plan (Free/Pro)
  const rateLimitResult = await checkRateLimit(decoded.userId, decoded.plan)

  // 3. Parse the git diff from VS Code
  const { changes, commitStyle } = await request.json()

  // 4. Generate AI prompt based on commit style
  const systemPrompt = buildSystemPrompt(commitStyle)
  const userPrompt = buildUserPrompt(changes)

  // 5. Call OpenAI
  const response = await openai.chat.completions.create({
    model: "gpt-3.5-turbo",
    messages: [
      { role: "system", content: systemPrompt },
      { role: "user", content: userPrompt }
    ]
  })

  // 6. Return the generated message
  return NextResponse.json({ message: response.choices[0].message.content })
}
Enter fullscreen mode Exit fullscreen mode

2. Commit Style System

I created a flexible system supporting three commit formats:

const commitConfig = {
  functional: {
    format: "type(scope): description",
    types: ["feat", "fix", "docs", "style", "refactor", "test", "chore"]
  },
  icons: {
    format: ":emoji: description"
  },
  regular: {
    format: "type: description"
  }
}
Enter fullscreen mode Exit fullscreen mode

Each style has custom prompts that guide OpenAI to generate appropriate messages:

Functional (Conventional Commits):

feat(auth): add OAuth2 login integration
fix(api): resolve null pointer in user validation
Enter fullscreen mode Exit fullscreen mode

Icons:

:sparkles: add new authentication system
:bug: fix memory leak in user cache
Enter fullscreen mode Exit fullscreen mode

3. Authentication & Authorization

I implemented a complete auth system using Arctic for OAuth:

// GitHub OAuth setup
export const github = new GitHub(
  process.env.GITHUB_CLIENT_ID!,
  process.env.GITHUB_CLIENT_SECRET!,
  `${baseUrl}/api/auth/callback/github`
)
Enter fullscreen mode Exit fullscreen mode

JWTs are issued on successful login and validated on every API request:

export async function verifyJWT(token: string) {
  return jwt.verify(token, process.env.JWT_SECRET!) as JWTPayload
}
Enter fullscreen mode Exit fullscreen mode

4. Rate Limiting & Monetization

The platform has tiered pricing:

  • Free: 10 commits/day
  • Pro ($5/month): 500 commits/day + custom styles
  • Enterprise: Custom limits + team features

Rate limiting is enforced at the API level:

export async function checkRateLimit(userId: string, plan: string) {
  const usage = await getUsageFromDB(userId)
  const limit = plan === "free" ? 10 : 500

  if (usage >= limit) {
    return {
      allowed: false,
      error: "Rate limit exceeded",
      upgradeUrl: "/pricing"
    }
  }

  return { allowed: true, remainingCommits: limit - usage }
}
Enter fullscreen mode Exit fullscreen mode

5. Cloudflare Edge Deployment

One of the coolest parts is deploying Next.js to Cloudflare Workers for global edge performance:

{
  "scripts": {
    "deploy": "opennextjs-cloudflare build && opennextjs-cloudflare deploy"
  }
}
Enter fullscreen mode Exit fullscreen mode

This gives users sub-100ms response times worldwide.

6. Landing Page Design

I built a modern landing page with:

  • Hero section with animated background
  • Interactive pricing cards with annual/monthly toggle
  • FAQ accordion
  • Testimonials grid
  • CTA sections

All components are fully responsive and accessible using Radix UI primitives.

📊 Challenges & Learnings

Challenge 1: Prompt Engineering

Getting OpenAI to consistently generate good commit messages required extensive prompt refinement. Key learnings:

  • Be explicit about format requirements
  • Provide multiple examples
  • Specify character limits clearly
  • Use system prompts for rules, user prompts for context

Challenge 2: VS Code Integration

Building the VS Code extension required understanding:

  • VS Code's Git API
  • Extension authentication flows
  • One-click commit insertion
  • Error handling and user feedback

Challenge 3: Edge Deployment

Deploying Next.js to Cloudflare Workers had gotchas:

  • Environment variable handling
  • Database connections at the edge
  • Cold start optimization
  • API route compatibility

🚀 Results

GitusAI is now live and helps developers:

  • Save time on commit messages
  • Maintain consistent commit history
  • Learn better commit message practices
  • Focus on coding instead of documentation

🔮 What's Next?

Planned features:

  • Team-wide commit style templates
  • Multi-repo project support
  • Commit history consistency analysis
  • Custom AI training on project history
  • IDE support beyond VS Code

🛠️ Try It Yourself

The project is built with modern, developer-friendly tools. Key files to explore:

  • API Handler: src/app/api/commit-generate/route.ts
  • Authentication: src/lib/auth.ts and src/lib/jwt.ts
  • Rate Limiting: src/lib/rate-limit.ts
  • Database Schema: src/lib/schema.ts
  • Pricing Logic: src/components/pricing-section.tsx

💭 Final Thoughts

Building GitusAI taught me a lot about:

  • AI prompt engineering for production use cases
  • Building SaaS with Next.js and Cloudflare
  • Creating VS Code extensions
  • Implementing auth, payments, and rate limiting
  • Designing developer-focused products

The key to success was solving a real problem I experienced daily, validating it with other developers, and building a solution that "just works."

Want to try GitusAI? Check it out on the VS Code Marketplace or visit our landing page.

Have questions about the implementation? Drop them in the comments below!

Found this useful? Share it with developers who hate writing commit messages! 🚀

Top comments (1)

Collapse
 
hashbyt profile image
Hashbyt •

Building a full-stack AI SaaS tool with Next.js and edge deployment highlights modern best practices. The integration of flexible commit styles and rate limiting makes GitusAI a thoughtful, scalable solution for real-world developer needs.