Artificial Intelligence is changing how people communicate through email. Instead of spending time writing responses, correcting grammar, summarizing long conversations, or translating messages, AI can complete these tasks in seconds.
Applications like Gmail, Outlook, and other email platforms are increasingly incorporating AI-powered features to improve productivity. Developers can build similar functionality into their own applications using Google’s Gemini API.
In this tutorial, you’ll build a modern AI Email Assistant from scratch using HTML, CSS, JavaScript, and the Gemini API. The application will summarize emails, generate smart replies, rewrite text in different tones, correct grammar, and translate content into multiple languages—all through an intuitive web interface.
By the end of this guide, you’ll have a professional AI-powered email assistant that can be extended with Gmail integration, Firebase Authentication, and cloud deployment.
What You’ll Build
The completed application will include the following features:
- AI Email Summarization
- Smart Reply Generation
- Professional Tone Rewriter
- Friendly Tone Rewriter
- Grammar & Spelling Correction
- Email Translation
- One-Click Copy Output
- Download Generated Text
- Responsive Design
- Optional Gmail API Integration
How the Application Works
User
↓
Paste Email
↓
Choose Action
↓
Gemini API
↓
AI Processing
↓
Generated Result
↓
Copy or Download
The user pastes an email into the application, selects an action such as Summarize or Reply, and the request is sent to the Gemini API. The AI processes the prompt and returns the generated content, which can then be copied or downloaded.
Technologies Used
- HTML5
- CSS3
- JavaScript (ES6)
- Google Gemini API
- Firebase Hosting (Optional)
- Firebase Authentication (Optional)
- Gmail API (Optional)
Prerequisites
Before you begin, make sure you have:
- A Google Account
- Basic HTML, CSS, and JavaScript knowledge
- A Gemini API Key
- Visual Studio Code or another code editor
- A modern web browser
Create a Gemini API Key
The Gemini API will generate all AI-powered responses in this project.
- Open Google AI Studio.
- Create or select a project.
- Generate a new API key.
- Copy the generated key.
- Store it securely for later use.
Never expose your API key in a public repository. In production applications, API requests should be routed through a secure backend rather than directly from client-side JavaScript.
Create the Project Folder
Organize your project using the following structure:
ai-email-assistant/
├── index.html
├── style.css
├── app.js
├── assets/
└── icons/
Separating your HTML, CSS, and JavaScript makes the project easier to maintain and expand.
Build the User Interface
Open index.html and create the application layout.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>AI Email Assistant</title>
<link rel="stylesheet"
href="style.css">
</head>
<body>
<div class="container">
<h1>AI Email Assistant</h1>
<textarea
id="emailInput"
placeholder="Paste your email here...">
</textarea>
<div class="buttons">
<button id="summaryBtn">
Summarize
</button>
<button id="replyBtn">
Generate Reply
</button>
<button id="professionalBtn">
Professional Tone
</button>
<button id="friendlyBtn">
Friendly Tone
</button>
<button id="grammarBtn">
Fix Grammar
</button>
<button id="translateBtn">
Translate
</button>
</div>
<textarea
id="output"
placeholder="AI output appears here..."
readonly>
</textarea>
</div>
<script src="app.js"></script>
</body>
</html>
Create a Modern Responsive Design
Open style.css and add the following styles.
body{
margin:0;
padding:0;
font-family:Arial,sans-serif;
background:#f4f6f8;
}
.container{
max-width:900px;
margin:40px auto;
background:#fff;
padding:25px;
border-radius:12px;
box-shadow:0 8px 24px rgba(0,0,0,.08);
}
h1{
text-align:center;
margin-bottom:20px;
}
textarea{
width:100%;
height:220px;
padding:15px;
font-size:16px;
margin-bottom:20px;
border-radius:8px;
border:1px solid #ccc;
resize:vertical;
box-sizing:border-box;
}
.buttons{
display:grid;
grid-template-columns:
repeat(3,1fr);
gap:12px;
}
button{
padding:14px;
border:none;
border-radius:8px;
cursor:pointer;
font-size:15px;
transition:.3s;
}
button:hover{
opacity:.9;
}
Add Mobile Responsiveness
Optimize the interface for smartphones and tablets.
@media(max-width:768px){
.buttons{
grid-template-columns:1fr;
}
textarea{
height:180px;
}
.container{
margin:20px;
}
}
Add Utility Buttons
Below the output area, add buttons for copying and downloading the generated content.
<div class="actions">
<button id="copyBtn">
Copy Output
</button>
<button id="downloadBtn">
Download
</button>
</div>
These features improve usability by allowing users to quickly reuse AI-generated content.
Expected Interface
After completing the HTML and CSS, your application should include:
- A large input area for pasting email content
- Six AI action buttons
- A read-only output area
- Copy and Download controls
- A clean, responsive layout suitable for desktop and mobile devices
How Users Will Interact
- Paste an email into the input box.
- Choose an AI action (Summarize, Reply, Rewrite, Translate, or Grammar).
- Wait for Gemini to generate the response.
- Review the output.
- Copy or download the generated text.
Connect the Application to Gemini API
Now that the user interface is complete, it’s time to make the application intelligent by integrating Google’s Gemini API. We’ll send user prompts to Gemini, receive AI-generated responses, and display them inside the application.
Important: For learning purposes, this tutorial shows a direct API call from JavaScript. In a production application, never expose your API key in client-side code. Instead, send requests through a secure backend such as Firebase Cloud Functions, Node.js, or another server.
Create app.js
Start by defining your Gemini API key and endpoint.
const API_KEY = "YOUR_GEMINI_API_KEY";
const API_URL =
`https://generativelanguage.googleapis.com/v1beta/models/gemini-2.5-flash:generateContent?key=${API_KEY}`;
Replace YOUR_GEMINI_API_KEY with the API key you generated earlier.
Select DOM Elements
const emailInput =
document.getElementById("emailInput");
const output =
document.getElementById("output");
const summaryBtn =
document.getElementById("summaryBtn");
const replyBtn =
document.getElementById("replyBtn");
const professionalBtn =
document.getElementById("professionalBtn");
const friendlyBtn =
document.getElementById("friendlyBtn");
const grammarBtn =
document.getElementById("grammarBtn");
const translateBtn =
document.getElementById("translateBtn");
const copyBtn =
document.getElementById("copyBtn");
const downloadBtn =
document.getElementById("downloadBtn");
Create a Reusable Gemini Function
Instead of writing separate API requests for every button, create one reusable function that accepts a prompt.
async function askGemini(prompt){
try{
const response =
await fetch(API_URL,{
method:"POST",
headers:{
"Content-Type":"application/json"
},
body:JSON.stringify({
contents:[
{
parts:[
{
text:prompt
}
]
}
]
})
});
const data =
await response.json();
return data.candidates[0]
.content.parts[0].text;
}
catch(error){
console.error(error);
return "Something went wrong.";
}
}
Generate an Email Summary
summaryBtn.onclick =
async ()=>{
const email =
emailInput.value.trim();
if(!email){
alert("Paste an email first.");
return;
}
output.value =
"Generating summary...";
const result =
await askGemini(
"Summarize this email:\n\n"+email
);
output.value =
result;
};
Generate a Smart Reply
replyBtn.onclick =
async ()=>{
const email =
emailInput.value.trim();
output.value =
"Generating reply...";
const result =
await askGemini(
"Write a professional reply for this email:\n\n"+email
);
output.value =
result;
};
Rewrite Using a Professional Tone
professionalBtn.onclick =
async ()=>{
const email =
emailInput.value;
output.value =
await askGemini(
"Rewrite this email using a professional business tone:\n\n"+email
);
};
Rewrite Using a Friendly Tone
friendlyBtn.onclick =
async ()=>{
const email =
emailInput.value;
output.value =
await askGemini(
"Rewrite this email in a friendly and conversational tone:\n\n"+email
);
};
Grammar and Spelling Correction
grammarBtn.onclick =
async ()=>{
const email =
emailInput.value;
output.value =
await askGemini(
"Correct grammar and spelling without changing the meaning:\n\n"+email
);
};
This feature is useful for polishing business emails before sending them.
Translate Emails
You can translate emails into any language by changing the prompt.
translateBtn.onclick =
async ()=>{
const email =
emailInput.value;
output.value =
await askGemini(
"Translate this email into French:\n\n"+email
);
};
You can replace French with German, Spanish, Arabic, Hindi, Japanese, or any other supported language.
Improve the User Experience
Disable all buttons while the AI is generating a response.
function toggleButtons(state){
document
.querySelectorAll("button")
.forEach(button=>{
button.disabled=state;
});
}
Update askGemini():
toggleButtons(true);
// API request
toggleButtons(false);
Add a Loading Indicator
Instead of displaying an empty output area, show progress while Gemini processes the request.
output.value =
"Please wait...
Gemini is generating a response...";
Copy the Generated Output
copyBtn.onclick=()=>{
navigator.clipboard.writeText(
output.value
);
alert(
"Copied successfully."
);
};
Download the AI Output
downloadBtn.onclick=()=>{
const blob =
new Blob(
[output.value],
{type:"text/plain"}
);
const link =
document.createElement("a");
link.href =
URL.createObjectURL(blob);
link.download =
"ai-email.txt";
link.click();
};
Handle Empty Input
Prevent unnecessary API requests when no email has been entered.
if(emailInput.value.trim()===""){
alert(
"Please paste an email first."
);
return;
}
Handle API Errors Gracefully
Always display a friendly message if the request fails.
catch(error){
console.error(error);
output.value =
"Unable to connect to Gemini API.
Please try again later.";
}
Suggested Prompt Improvements
Well-written prompts often produce better AI responses. Here are a few examples you can use:
- Summarize this email in three concise bullet points.
- Write a polite response that accepts the meeting invitation.
- Rewrite this email using a formal business tone.
- Correct grammar while preserving the original meaning.
- Translate this email into Spanish while maintaining a professional tone.
Current Features
- ✅ AI Email Summarization
- ✅ Smart Reply Generation
- ✅ Professional Tone Rewriter
- ✅ Friendly Tone Rewriter
- ✅ Grammar Correction
- ✅ Email Translation
- ✅ Loading Indicator
- ✅ Button State Management
- ✅ Copy Output
- ✅ Download Output
- ✅ Basic Error Handling
At this point, your AI Email Assistant can summarize emails, generate replies, rewrite tone, correct grammar, translate content, and allow users to copy or download AI-generated results. In the final part, you’ll learn how to make the application secure, scalable, and ready for production deployment.
Secure Your Gemini API Key
The example in Part 2 sends requests directly from the browser to the Gemini API. While this approach is useful for learning, it is not recommended for production applications because anyone can inspect your JavaScript and extract the API key.
A better architecture is:
Browser
↓
Your Backend (Node.js / Firebase Cloud Functions)
↓
Gemini API
↓
Response
↓
Browser
The backend stores the API key securely and forwards only the AI response to the client.
Simple Node.js Backend Example
Create a new file named server.js.
import express from "express";
const app = express();
app.use(express.json());
app.post("/generate", async (req,res)=>{
const prompt = req.body.prompt;
// Call Gemini API here
res.json({
reply:"Generated response"
});
});
app.listen(3000);
Your frontend should call this endpoint instead of the Gemini API directly.
Optional Gmail API Integration
To make your assistant even more useful, you can integrate the Gmail API so users can read and respond to emails without leaving the application.
Possible workflow:
User Login
↓
Gmail API
↓
Read Inbox
↓
Select Email
↓
Gemini AI
↓
Generate Reply
↓
User Reviews
↓
Send Email
Always request only the permissions your application truly needs and explain to users why those permissions are required.
Deploy to Firebase Hosting
Firebase Hosting is an easy way to publish your web application.
Install the Firebase CLI:
npm install -g firebase-tools
Log in:
firebase login
Initialize Hosting:
firebase init hosting
Deploy:
firebase deploy
After deployment, Firebase provides a public URL where your AI Email Assistant can be accessed.
Performance Optimization
A few optimizations can significantly improve responsiveness and reduce unnecessary API usage:
- Disable action buttons while a request is running.
- Trim whitespace before sending prompts.
- Reuse common prompt templates.
- Cache repeated responses where appropriate.
- Limit the maximum email size accepted by the interface.
- Avoid sending multiple requests simultaneously for the same action.
Cost Optimization Tips
If your application grows, managing API usage becomes important.
- Set reasonable rate limits per user.
- Reject empty or duplicate requests.
- Reuse generated responses when appropriate.
- Monitor API usage regularly.
- Log failed requests for debugging.
Add Dark Mode
A dark theme can improve usability, especially for users who work at night.
body.dark{
background:#1f1f1f;
color:#ffffff;
}
.container.dark{
background:#2b2b2b;
}
You can toggle the theme by adding or removing the dark class with JavaScript.
Support Email Templates
You can offer predefined templates for common situations, such as:
- Meeting Request
- Leave Application
- Job Follow-up
- Customer Support Reply
- Project Update
- Thank You Email
Users can select a template and let Gemini personalize it based on their input.
Future Enhancements
Here are some ideas to extend the project:
- Voice input using the Web Speech API.
- Speech playback for AI-generated responses.
- Markdown formatting for richer output.
- Export responses as PDF or DOCX.
- Conversation history stored in Firestore.
- User accounts with Firebase Authentication.
- Support for multiple AI providers.
- Team collaboration and shared templates.
Testing Checklist
| Feature | Status |
|---|---|
| Email Summarization | ✅ |
| Smart Reply Generation | ✅ |
| Professional Tone Rewrite | ✅ |
| Friendly Tone Rewrite | ✅ |
| Grammar Correction | ✅ |
| Translation | ✅ |
| Copy Output | ✅ |
| Download Output | ✅ |
| Responsive Layout | ✅ |
| Deployment | ✅ |
Frequently Asked Questions
Can I use this project for commercial purposes?
Yes, provided you comply with the terms of service for the APIs and services you integrate, and you secure your API credentials appropriately.
Can I replace Gemini with another AI model?
Yes. If your backend is designed to abstract the AI provider, you can swap Gemini for another compatible model with only minor code changes.
Can I connect this application to Gmail?
Yes. By integrating the Gmail API, users can read emails, generate AI-assisted replies, and optionally send messages after reviewing the generated content.
Can I deploy this application for free?
Many hosting platforms offer free tiers suitable for development and small projects. Review the current limits and pricing of the services you choose before deploying a production application.
Production Deployment Checklist
- Protect API keys on the server.
- Validate user input.
- Enable HTTPS.
- Implement authentication if required.
- Monitor API usage.
- Log errors for debugging.
- Test on desktop and mobile devices.
- Review permissions for Gmail integration.
- Back up important data.
- Perform end-to-end testing before launch.
Final Verdict
Building an AI Email Assistant with the Gemini API is an excellent way to learn practical AI integration while creating a genuinely useful productivity tool. Features such as summarization, reply generation, tone rewriting, translation, and grammar correction can save users significant time and improve communication quality.
By combining HTML, CSS, JavaScript, and a secure backend architecture, you can build a responsive application that scales from personal use to business workflows. As your project evolves, adding Gmail integration, authentication, conversation history, and collaboration features can turn it into a full-featured AI email platform.
Conclusion: You now have a complete roadmap for creating a modern AI Email Assistant—from designing the interface and integrating Gemini API to securing your application, deploying it, and preparing it for production. This project is a strong foundation for building more advanced AI-powered communication tools.
