AI Email Assistant

An AI-powered email management system that automatically labels, prioritizes, and drafts replies for Gmail.

Next.jsReactTypeScriptAI/MLGmail APIGoogle Generative AITailwind CSSOAuthCursor
AI Email Assistant Screenshot
Click to enlarge

Tech Stack

  • Next.js 15
  • React 19
  • TypeScript
  • Tailwind CSS 4.0
  • Google Gmail API
  • Google Generative AI
  • Framer Motion
  • Vercel
  • Cursor

Timeline

2 days (July 3-4, 2025)

My Role

Solo Developer (AI-Assisted)

Project Overview

Inspired by the demo in "AI Horseless Carriages." from Pete Koomen, the AI Email Assistant is a sophisticated email management tool that leverages Google's Generative AI to transform how you handle your inbox. Built in just two days through an intensive AI-assisted development session, this project demonstrates the incredible potential of human-AI collaboration in modern software development, specifically focusing on empowering users with control over the AI's core behavior.

How It Works

The AI Email Assistant connects to your Gmail account through secure OAuth authentication, fetches your recent emails, and uses Google's Generative AI to intelligently process and organize your inbox.

Authentication & Setup

Users start by signing in with their Google account through OAuth 2.0. The app requests minimal permissions - only the ability to read emails, modify labels, and send emails (with user approval). We never see or store passwords, ensuring maximum security.

Email Processing Workflow

Once authenticated, the app fetches the user's 10 most recent emails and displays them in an intuitive dashboard. Users can customize the AI system prompt to match their specific needs - for example, automatically labeling newsletters, prioritizing work emails, or drafting professional replies.

The AI analyzes each email's content, sender, and context to make intelligent suggestions. It can:

  • Create Custom Labels: Automatically categorize emails with color-coded labels and priority levels
  • Draft Smart Replies: Generate contextually appropriate responses that match the user's communication style
  • Archive Unwanted Emails: Identify and suggest archiving for promotional or low-priority messages
  • Provide Email Summaries: Extract key information and action items from lengthy emails

AI Integration & Customization

The heart of the application is the customizable AI prompt system. Users can define their own rules for email processing, such as:

You are an email labeling assistant. Analyze emails and:
- Label newsletters as "Newsletter" (blue, priority 3)
- Label GitHub notifications as "GitHub" (green, priority 1)
- Label important work emails as "Important" (gold, priority 1)
- Archive promotional emails
- Draft quick replies for urgent messages

You're TJ, a busy professional. Keep replies concise and professional.

Security & Privacy

Security is paramount in this application. All email processing happens securely through Google's APIs, with no email content stored on our servers. The OAuth flow includes proper token refresh handling, and all API calls are made server-side to protect sensitive credentials.

The AI-Assisted Development Experience

This project was built almost entirely through "vibe coding" using Cursor - a collaborative approach where I worked alongside AI to rapidly prototype and iterate on features. The experience was both exhilarating and humbling, showcasing both the remarkable capabilities and current limitations of AI-assisted development.

Over the course of two intense days (July 3-4, 2025), we went from concept to a fully functional email assistant. The AI handled the heavy lifting of boilerplate code, API integrations, and UI components, while I focused on architectural decisions, security considerations, and the nuanced business logic that makes the application truly useful.

AI Capabilities & Limitations

Area Details
Security Implementation The AI suggested basic OAuth flows, but I had to implement proper token refresh, error handling, and security best practices
Gmail API Nuances The AI struggled with Gmail's specific label color palette requirements (for labels) and API limitations
State Management Complex state interactions between email selection, AI processing, and UI updates required careful human oversight
Error Handling Edge cases and error scenarios needed manual implementation
Business Logic Understanding the specific requirements for email processing workflows required human judgment

My First Real Vibecoding Experience

This was my first proper dive into "vibecoding" with Cursor, and honestly? It was blazingly fast but also weirdly boring. I spent way more time reading code than writing it, just sitting there watching the AI type away, waiting for it to finish.

The Frustration Cycles

The AI is clearly good at coding, but not perfect. What really got to me were those moments when it would confidently write something that just wouldn't work. I'd say "fix it" and it would try again. Then again. And again. I'd try to give it pointers, but sometimes I'd just end up fixing things by hand because the back-and-forth was getting ridiculous.

The Mindblowing Moment

The breakthrough came when I needed Gemini to return structured data. I simply prompted Cursor to search the web for how to do this, and within minutes it had implemented a working solution. Watching it search, find current documentation, and then immediately apply that knowledge to our codebase - that was truly mindblowing. It felt like glimpsing the future.

Problem Solving Erosion

Here's what nobody warns you about: the gentle, almost imperceptible erosion of your own thinking muscles. It starts innocently enough. You encounter an error, and instead of diving in to understand it, you just... paste it into the chat. "Fix this." And it does. Problem solved, dopamine hit delivered.

It was unsettling in the way that realizing you've forgotten how to parallel park is unsettling. Not immediately catastrophic, but a quiet loss of capability that feels important. I found myself opening LeetCode afterward, solving a few problems just to remember what it felt like to actually wrestle with logic.

The Bigger Picture

This experience reinforced something I've been thinking about a lot lately, echoing Pete Koomen's observations in "AI Horseless Carriages." We're still in the "horseless carriage" phase of AI development tools - they're powerful, but we're not fully leveraging what makes them unique. The ability to customize the AI's underlying system prompt, to teach it your preferences and communication style, that's where the real potential lies.

Tech Stack

  • Next.js 15 with App Router
  • React 19 and TypeScript
  • Tailwind CSS 4.0
  • Google Gmail API
  • Google Generative AI (Gemini)
  • Framer Motion for animations
  • Vercel for deployment
  • Cursor for AI-assisted development

Key Features

  • Smart email categorization using AI
  • Automatic labeling and priority sorting
  • Context-aware reply drafting
  • Batch processing for multiple emails
  • Secure Google OAuth integration
  • Real-time email preview and management
  • Customizable AI prompts
  • Dark/light mode responsive interface

Challenges & Solutions

Balancing AI-generated code with human oversight for security and business logic. Implementing proper OAuth flow with token refresh. Handling Gmail API limitations and color palette requirements. Managing complex state interactions between email selection, AI processing, and UI updates. Overcoming AI's outdated knowledge through search tool integration.

What I Learned

Gained deep insights into AI-assisted development workflows and their current capabilities and limitations. Learned to effectively collaborate with AI while maintaining code quality and security standards. Developed a better understanding of when to trust AI suggestions versus when to implement manual solutions. Experienced the incredible speed of AI-assisted prototyping while recognizing the importance of human judgment in critical areas. Discovered the power of modern AI tools with search capabilities to overcome outdated knowledge.