AI Chatbot Demo 🤖
An interactive AI chatbot built with Next.js, TypeScript, and Tailwind CSS. It connects with the Gemini 2.0 Flash API to generate real-time AI responses with a clean, responsive UI.
Next.jsTypeScriptTailwind CSSGemini APIFramer Motion
Key Features
- Built with Next.js 14 (App Router) for fast, server-side rendered UI.
- Integrated with Google Gemini 2.0 Flash API for real-time conversational AI.
- Includes chat bubbles, message timestamps, loading indicator, and scroll-to-bottom behavior.
- Fully responsive UI designed with Tailwind CSS and Framer Motion animations.
- Supports message history and local state for persistent user experience.
Challenges
- Managing chat message flow and asynchronous Gemini API responses without UI lag.
- Implementing auto-scroll and proper message alignment in responsive layouts.
- Ensuring clean UI design that looks consistent in both dark and light themes.
What I Learned
- Improved understanding of real-time async state management in React and Next.js.
- Learned how to handle streaming AI responses for better UX.
- Gained experience integrating third-party AI APIs securely using environment variables.
- Learned to structure reusable components for chat messages and UI consistency.