A modern, feature-rich AI assistant built with Angular 20+ and Google's Generative AI. Features both text and image generation capabilities with secure user API key management, persistent storage, and a beautiful Material Design interface.

• User-provided API keys - No hardcoded secrets
• Real-time validation with Google AI API
• Secure storage using sessionStorage
• Visual status indicators with management controls

• Text Generation - Modern chat UI with conversation management
• Image Generation - AI-powered image creation with multiple styles and sizes
• Rich markdown rendering - formatted AI responses with syntax highlighting
• Gallery management - view, download, and organize generated images
• Dual interface - seamless switching between text and image modes

• IndexedDB integration using Dexie.js for scalable local storage
• Automatic migration from localStorage to IndexedDB
• Export/Import functionality - backup and restore conversations
• Database statistics - live conversation and message counts

• Material Design 3 - Modern, accessible interface
• Responsive design - Works on desktop, tablet, and mobile
• Conversation sidebar - Easy navigation between chats
• Clean, modern styling with professional color scheme

• Angular 20+ with standalone components and signals
• Reactive programming using effects and computed signals
• TypeScript with strict type safety
• Modern build tools and optimization

Deployed Version: View Live Application

Note: You'll need a Google AI API key to use the assistant. The app will guide you through obtaining one.

• Node.js 20+
• Google AI API Key (get yours at Google AI Studio)

# Clone the repository
git clone https://github.com/your-username/angular-features-workspace.git
cd angular-features-workspace

# Install dependencies
npm install

# Start development server
npm start

# Open http://localhost:4200

1. Visit Google AI Studio
2. Create a new API key
3. The app will prompt you to enter it on first visit
4. Key is stored locally and validated in real-time

npm start                    # Start development server (port 4200)
npm run watch               # Build with file watching

npm run build               # Standard production build
npm run build:prod          # Explicit production build
npm run build:github-pages  # Build for GitHub Pages deployment

npm run deploy:github-pages  # Prepare for GitHub Pages deployment
npm run preview:github-pages # Local preview of deployed version

npm test                    # Run unit tests
# npm run e2e                # Run end-to-end tests (coming soon)

This project includes automated deployment pipelines:

1. Fork/clone this repository
2. Enable GitHub Pages in repository settings
3. Push to main branch - deployment starts automatically
4. Access your app at https://your-username.github.io/repository-name/

• ✅ Automated builds with production optimization
• ✅ SPA routing support for GitHub Pages
• ✅ Build size analysis and reporting
• ✅ Multi-node testing (Node.js 18, 20)
• ✅ Bundle optimization with tree shaking

See DEPLOYMENT.md for detailed deployment instructions and troubleshooting.

• Frontend: Angular 20+ with Material Design
• AI Integration: Google Generative AI (@google/genai)
• Database: Dexie.js (IndexedDB wrapper)
• Styling: SCSS with Material Design 3
• Build Tools: Angular CLI with Vite
• Deployment: GitHub Actions + GitHub Pages

src/
├── app/
│   ├── components/
│   │   ├── api-key-modal/          # API key management modal
│   │   ├── text-generation/        # AI text chat interface
│   │   ├── image-generation/       # AI image creation interface
│   │   └── side-nav/               # Navigation between modes
│   ├── services/
│   │   ├── api-key.service.ts      # API key management
│   │   ├── conversation.service.ts  # Chat management
│   │   ├── database.service.ts     # IndexedDB operations
│   │   ├── google-gen-ai.ts        # AI text service integration
│   │   └── image-gen-ai.ts         # AI image service integration
│   ├── pipes/
│   │   └── markdown.pipe.ts        # Markdown rendering
│   └── environments/               # Environment configurations
├── patterns/                       # Development patterns and examples
├── config/                         # Configuration references
├── .github/
│   └── workflows/                  # CI/CD pipeline definitions
└── dist/                          # Built application (auto-generated)

• Development: src/environments/environment.ts
• Production: src/environments/environment.prod.ts

Security Note: API keys are never stored in environment files. Users provide their own keys through the secure modal interface.

• Angular CLI: Standard Angular build configuration
• GitHub Pages: Automatic base href configuration
• Bundle Size: Optimized with tree shaking and minification

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

• Follow Angular style guide
• Write tests for new features
• Update documentation for API changes
• Ensure builds pass CI pipeline

• Ensure your Google AI API key is valid and has proper permissions
• Check that billing is enabled for your Google Cloud project
• Verify API quotas haven't been exceeded

• Clear npm cache: npm cache clean --force
• Delete node_modules and reinstall: rm -rf node_modules && npm install
• Check Node.js version compatibility (20+ recommended)

• Verify GitHub Pages is enabled in repository settings
• Check GitHub Actions workflow permissions
• Review deployment logs in Actions tab

See DEPLOYMENT.md for detailed troubleshooting guide.

This project is licensed under the MIT License - see the LICENSE file for details.

• Angular Team - For the amazing framework
• Google AI Team - For the Generative AI APIs
• Material Design - For the beautiful UI components
• Dexie.js - For the excellent IndexedDB wrapper
• GitHub - For free hosting and CI/CD pipelines

• Issues: GitHub Issues
• Discussions: GitHub Discussions
• Documentation: Deployment Guide

Made with ❤️ using Angular and Google AI

• Text Generation Component - AI text conversation interface
• Image Generation Component - AI image creation interface
• Development Patterns - Reusable code patterns and examples
• Grounding Guide - Claude Code development guide
• Usage Examples - Claude Code command examples

🌟 Star this repo if you find it helpful!