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 })
}
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"
}
}
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
Icons:
:sparkles: add new authentication system
:bug: fix memory leak in user cache
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`
)
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
}
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 }
}
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"
}
}
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
andsrc/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 (0)