🚀 Prompt Mate – Your Personal AI Conversation Companion using Next.js & Gemini API 💬
Hey DEV community! 👋
I'm thrilled to introduce my latest project – Prompt Mate – an AI-powered chat interface built using Next.js and Google Cloud’s Gemini API via Google AI Studio.
💡 What is Prompt Mate?
Prompt Mate is a Next.js web application that enables users to:
- 🧠 Chat with an AI assistant powered by Google’s Gemini model.
- ✍️ Send custom prompts and get intelligent, real-time responses.
- 📱 Experience a responsive and clean UI across devices.
- 🔐 Interact securely with Google Cloud-hosted functions.
Whether you're a developer, student, or AI enthusiast, Prompt Mate is designed to demonstrate the power of LLMs in a full-stack web application.
🛠️ Tech Stack
- ⚛️ Next.js – Full-stack React framework.
- ☁️ Google Cloud Gemini API – Used via API key.
- 🧪 Google AI Studio – For prompt testing and optimization .
- 🌐 Tailwind CSS – For styling the UI.
- 🔐 .env.local – Securing API keys in environment variables.
- 🔁 API Routes – To safely call Gemini from the server side.
🔧 Key Features
- ✅ Fully responsive chat interface.
- 🧠 Gemini AI-generated responses.
- 🔒 API key protected backend route in Next.js.
- 🌙 Dark mode ready (optional toggle).
- 🧼 Clean code structure and modular components.
📸
🔗 Live Demo & Code
🔍 Live Preview: Visit Prompt Mate
💻 GitHub Repo: View Source on GitHub
🧠 What I Learned
- Seamlessly integrating Gemini API with Next.js serverless routes
- Protecting API keys using
.env.localandgetServerSideProps - Building clean and intuitive UIs using Tailwind CSS
- Testing and refining prompts with Google AI Studio
🎯 Final Thoughts
Working on Prompt Mate gave me a practical dive into generative AI development and deploying it on a modern full-stack framework.
It’s amazing how quickly you can build something powerful with the right APIs and tools.
I’d love your feedback and thoughts! 🌟
Feel free to fork, remix, or collaborate with me on future versions.
Top comments (0)