Case study · Frontend · AI integration
Gemini Chat App
A React app that sends a question to Google’s Gemini 2.0 Flash model through the Gemini REST API and shows the generated answer, built with Vite, Axios and Tailwind CSS.
- Type
- Frontend · AI integration
- Built by
- Nishan Bharati
- Started
- August 2025
- Status
- Source code on GitHub. No public deployment.
- Stack
- React
- Vite
- Axios
- Tailwind CSS
- Google Gemini API
What it does
A focused project for learning how a web app talks to a large language model: type a question, send it to Gemini, and render the answer on the page.
Features
- A text area for the question and a button that sends it
- A loading message while the model generates the answer
- The model’s answer displayed below the question
How it works
The request
Axios sends a POST request to the gemini-2.0-flash generateContent endpoint with the question inside the contents array, then reads the answer text from the first candidate in the response.
Interface
A single React component holds the question and answer in state, styled with Tailwind CSS utility classes.
What I would improve next
- Move the Gemini request behind a small Express.js endpoint so the API key stays on the server instead of in the browser.
- Keep the conversation history so follow-up questions have context.
- Handle API errors and render the model’s Markdown formatting.
Built by Nishan Bharati, MERN Stack Developer and co-founder of Navya EdTech. Want something similar built?
Get in touch