If you're looking to explore Generative AI in your Angular apps, this blog is for you! Learn how I built a modern, full-featured Prompt Generator using Angular, Tailwind CSS, and the Gemini APIβwith a secure Node.js/Express backend to keep things safe.
π What Is the Prompt Generator?
The Prompt Generator is a web app that allows you to:
β
Generate creative, formal, funny, or concise AI prompts
β
Copy or save prompts to favorites
β
View history of generated prompts
β
Toggle between light and dark mode
β
Enjoy a responsive and modern UI with Tailwind CSS
β
Use a secure backend to protect your API key
Live Demo: prompt-generator-application.vercel.app
GitHub Repo: https://github.com/manthanank/prompt-generator
ποΈ Tech Stack
- Frontend: Angular 20+, Tailwind CSS 4, ngx-markdown
- Backend: Node.js + Express
-
AI Engine: Google Gemini Pro (via
@google/genai
SDK)
π Why Use a Backend?
Google's Gemini API requires your API key. Exposing it in frontend code is risky. That's why this app routes all AI requests through a secure Express server, hosted on Vercel.
π Project Structure
prompt-generator/
βββ backend/ β Express API for Gemini
βββ src/ β Angular frontend
β βββ app/ β Standalone Angular components
β βββ environments/ β Environment config
β βββ styles.css β Tailwind + Dark mode styles
π§ Setup & Installation
1. Clone the Repository
git clone https://github.com/manthanank/prompt-generator.git
cd prompt-generator
2. Install Frontend & Backend Dependencies
npm install
cd backend
npm install
3. Configure the Environment
Create a .env
file inside backend/
:
GEMINI_API_KEY=your_gemini_api_key_here
PORT=3000
4. Start Development Servers
# In backend/
npm start
# In frontend (root)
npm start
π§ How It Works
π§Ύ Prompt Generation Flow:
- User Input: Choose style + enter description
- API Call: Angular sends prompt to Express backend
- Gemini API: Generates high-quality content
- Display: Angular shows the markdown-formatted result
- Extras: History, Favorites, Copy to Clipboard, Dark Mode
β¨ Highlight Features
ποΈ Prompt Styles
Choose from:
- Creative
- Formal
- Funny
- Concise
Each style is prepended to the userβs input to guide the AI.
const styledInput = `Generate a ${style.toLowerCase()} prompt for: ${userInput}`;
π Markdown Rendering with ngx-markdown
Gemini returns responses with headings, lists, and bold text. To display this nicely, we use ngx-markdown
:
<markdown [data]="generatedPrompt"></markdown>
π‘ Favorites & History with localStorage
Save your best prompts or revisit recent ones!
localStorage.setItem('favorites', JSON.stringify(this.favoritePrompts));
π Dark Mode with Tailwind + Signals
Using Angular Signals and Tailwind dark classes:
toggleDarkMode() {
this.darkMode.update(d => !d);
document.documentElement.classList.toggle('dark', this.darkMode());
}
π Backend: Express + Gemini API
Secure route that proxies requests to Gemini:
app.post('/generate-content', async (req, res) => {
const { userPrompt } = req.body;
const response = await ai.models.generateContent({
model: 'gemini-2.5-flash',
contents: userPrompt,
});
res.json({ text: response.text });
});
Hosted via Vercel with a vercel.json
config.
π Deployment Options
- β Frontend: GitHub Pages / Vercel / Netlify
- β Backend: Vercel Serverless Function or Railway
- β
Environment: Environment-safe with
.env
& build-time env usage
πΈ Screenshots
(Add screenshots of UI, light/dark modes, mobile view, etc.)
π§© Future Enhancements
- βοΈ Prompt Templates
- π Login with Google (Firebase Auth)
- π Prompt analytics
- ποΈ Export to PDF or Markdown
π License
MIT Β© Manthan Ankolekar
π Final Thoughts
Building this project was a great exercise in combining the power of:
- Angular Standalone Components + Signals
- Tailwindβs dark mode utility
- AI text generation via Google Gemini
- And clean local storage features
π Check it out: prompt-generator-application.vercel.app
π¦ View the Code: github.com/manthanank/prompt-generator
Top comments (0)