AI Email Helper - Chrome Extension

A Chrome extension that reads Gmail messages and generates AI-powered responses using OpenAI's Chat Completions API. Features intelligent email response generation and text correction with context menus and floating UI integration.

Demo

🎥 Watch the Demo - See the AI Email Helper in action!

Installation from Chrome Web Store

🚀 Install from Chrome Web Store - Get the extension directly from the official Chrome Web Store!

Features

• 🤖 AI-Powered Email Responses: Generate professional email responses using OpenAI's GPT-4o-mini model
• ✏️ Text Correction: Right-click on selected text to improve grammar, spelling, and style
• 📧 Gmail Integration: Seamlessly reads email content and inserts responses directly into Gmail
• 🎯 Multi-Tab Interface: Assistant, Instructions, and Settings tabs for organized workflow
• ⚙️ Customizable Instructions: Separate AI instructions for email responses and text corrections
• 🎨 Modern UI: Built with React and TailwindCSS with gradient design
• 🔒 Privacy Focused: All processing happens through your own OpenAI account
• 🧪 Testing Framework: Comprehensive test suite with Vitest and Testing Library

Prerequisites

1. OpenAI Account: You need an OpenAI account with API access
2. OpenAI API Key: Get your API key from OpenAI Platform
3. Chrome Browser: Extension requires Chrome or Chromium-based browser

Installation

1. Build the Extension

# Install dependencies
npm install

# Build the extension
npm run build

2. Load in Chrome

1. Open Chrome and go to chrome://extensions/
2. Enable "Developer mode" (toggle in top right)
3. Click "Load unpacked"
4. Select the dist folder from this project

3. Configure the Extension

1. Click the extension icon in your browser toolbar
2. Go to the "Settings" tab
3. Enter your OpenAI API Key
4. Click "Test Connection" to verify your API key
5. Click "Save Settings"
6. (Optional) Go to "Instructions" tab to customize AI behavior for email responses and text corrections

Usage

Email Response Generation

1. Open Gmail and navigate to any email conversation
2. Click the extension icon to open the popup
3. Click "Generate Response" - the extension will automatically detect the email content
4. Review the generated response in the popup
5. Click "Insert to Gmail" to add the response to your compose area

Text Correction

1. Select any text in Gmail (in compose area, email content, etc.)
2. Right-click on the selected text
3. Choose "✨ Improve with AI" from the context menu
4. Watch as the text is corrected in real-time with visual feedback

Advanced Features

• Multi-Tab Interface: Switch between Assistant, Instructions, and Settings
• Custom Instructions: Configure separate AI instructions for email responses and text corrections
• Copy Response: Copy generated responses to clipboard
• Multiple Emails: Extension reads the most recent email in conversation threads
• Real-time Feedback: Visual loading states and error handling for text corrections
• Floating Button: Quick access button appears on Gmail pages

Customizing AI Instructions

The extension allows you to customize AI behavior through the Instructions tab:

Email Response Instructions

Configure how the AI generates email responses:

You are a professional email assistant. Generate polite, professional, and helpful email responses. Keep responses concise but comprehensive. Maintain a friendly but professional tone. Don't include the subject line or the signature just the message body. Don't include any other text or commentary. Don't include quotation marks.

Text Correction Instructions

Configure how the AI improves selected text:

You are a professional writing assistant. Improve the given text by correcting grammar, spelling, and style while maintaining the original meaning and tone. Return only the corrected text without any additional commentary or quotation marks.

Tips for Better Instructions:

• Be specific about tone and style preferences
• Define the assistant's role and expertise level
• Include formatting requirements
• Specify desired response length

Development

Project Structure

src/
├── popup/                    # React popup interface
├── content/                  # Gmail content script
├── background/               # Chrome extension background script
├── components/               # React components
│   ├── email-assistant/      # Email response generation components
│   ├── instructions/         # AI instruction management
│   └── settings/            # Configuration components
├── hooks/                   # React hooks for API integration
├── styles/                  # TailwindCSS styles
├── test/                    # Test files and setup
└── utils/                   # Utility functions

Scripts

# Development build with CSS watching
npm run dev:all

# Development build (JavaScript only)
npm run dev

# Production build
npm run build

# CSS development with watching
npm run dev:css

# Type checking
npm run type-check

# Run tests
npm run test

# Run tests with UI
npm run test:ui

# Test coverage
npm run test:coverage

Technologies Used

• React 18: UI framework with hooks
• TypeScript: Type-safe development
• TailwindCSS: Utility-first CSS framework
• Webpack: Module bundling and build process
• Chrome Extensions Manifest V3: Extension platform
• OpenAI Chat Completions API: AI response generation using GPT-4o-mini
• Vitest: Testing framework
• Testing Library: React component testing

Privacy & Security

• No data storage: The extension doesn't store your email content
• Secure API calls: All OpenAI requests use HTTPS
• Local processing: Email reading happens locally in your browser
• Your API key: You control your own OpenAI account and usage

Troubleshooting

Extension not working?

1. Check that you're on mail.google.com
2. Refresh the Gmail page
3. Check the extension is enabled in chrome://extensions/
4. Close and reopen your browser completely
5. Try disabling and re-enabling the extension

Can't detect email content?

1. Make sure you're viewing an email conversation
2. Try clicking on the email to ensure it's selected
3. Refresh the page and try again

API errors?

1. Verify your OpenAI API key is correct
2. Check your OpenAI account has credits
3. Test the connection in Settings
4. Check browser console for detailed error messages

Generated response not inserting?

1. Click in the compose text area first
2. Make sure you have a compose window open
3. Try copying the response and pasting manually

Text correction not working?

1. Ensure text is properly selected before right-clicking
2. Check that you're on a Gmail page
3. Verify API key is configured in Settings
4. Look for visual feedback (loading spinner, error messages)

Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Test thoroughly
5. Submit a pull request

License

MIT License - see LICENSE file for details

Support

For issues and questions:

1. Check the troubleshooting section above
2. Review Chrome extension console logs
3. Check OpenAI API status
4. Create an issue in this repository

---

Note: This extension requires your own OpenAI API key. Usage costs are based on your OpenAI plan and API usage. The extension uses the GPT-4o-mini model for cost-effective AI responses.