A modern chat application built with Angular 19 and Node.js, powered by Google's Gemini AI. Features a sleek ChatGPT-like interface with real-time messaging capabilities.
- Node.js (v18 or higher)
- npm or yarn
- A Google Gemini API key
- Visit Google AI Studio
- Sign in with your Google account
- Create a new API key
- Copy the API key for the next step
# Navigate to the API server directory
cd api-server
# Install dependencies
npm install
# Create environment file
cp .env .env.local # or create a new .env file
# Add your API key to .env
echo "GEMINI_API_KEY=your_api_key_here" > .env
echo "PORT=3000" >> .env# Navigate back to root directory
cd ..
# Install dependencies
npm installTerminal 1 - Start API Server:
cd api-server
npm run devThe API server will run on http://localhost:3000
Terminal 2 - Start Frontend:
# From root directory
ng serveThe frontend will run on http://localhost:4200
Navigate to http://localhost:4200 and start chatting with Gemini AI!
Want to see this project in action? Check out my comprehensive video tutorial where I walk through building this entire ChatGPT-Gemini AI application from scratch!
🎥 Building ChatGPT Clone with Angular 19 & Gemini AI
In this tutorial, you'll learn:
- 🚀 How to set up Angular 19 with the latest features
- 🤖 Integrating Google Gemini AI API
- 💬 Building a modern chat interface
- 🎨 Creating ChatGPT-like UI components
- 🔧 Setting up Node.js backend server
- 🔐 Secure API key management
👍 If this project helped you, please give the video a thumbs up and subscribe to my channel for more Angular and AI tutorials!
├── src/ # Angular frontend application
│ ├── app/
│ │ ├── chat-container/ # Main chat interface
│ │ ├── services/ # Angular services
│ │ └── @models/ # TypeScript models
├── api-server/ # Node.js backend server
│ ├── src/ # Server source code
│ ├── .env # Environment variables (add your API key here)
│ └── package.json # Backend dependencies
└── package.json # Frontend dependencies
GEMINI_API_KEY=your_gemini_api_key_here
PORT=3000# Start development server with hot reload
ng serve
# Build for production
ng build
# Run tests
ng testcd api-server
# Start development server with hot reload
npm run dev
# Build TypeScript
npm run build
# Start production server
npm start⚠️ Never commit your API key to version control- The
.envfile is already included in.gitignore - Keep your API key secure and don't share it publicly
- Consider using environment-specific
.envfiles for different deployments
- Modern UI: ChatGPT-inspired interface with dark theme
- Real-time Chat: Instant messaging with Gemini AI
- Responsive Design: Works on desktop and mobile devices
- Keyboard Shortcuts: Enter to send, Shift+Enter for new lines
- Auto-scroll: Automatic scrolling to latest messages
- Loading States: Visual feedback during API calls
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.
- 🎥 YouTube Tutorial - Building this Project
- Angular Documentation
- Google Gemini AI
- Node.js Documentation
This project was created as part of my YouTube tutorial series on modern web development. If you found this helpful:
- 📺 Subscribe to my YouTube channel for more Angular, AI, and web development tutorials
- 👍 Like the video if this project helped you learn something new
- 💬 Leave a comment on the video with your questions or suggestions
- 🔔 Turn on notifications to stay updated with new tutorials
More tutorials coming soon:
- Advanced Angular 19 features
- AI integration patterns
- Modern UI/UX development
- Full-stack development with Node.js