Skip to content

Repository files navigation

Gemini iMessage Chat Interface

A beautiful, iMessage-inspired chat interface for interacting with Google's Gemini AI. This web application provides a native iOS messaging experience optimized for both desktop and mobile browsers.

Features

  • 🎨 iMessage-like UI: Authentic design with proper fonts, colors, and bubble styling
  • 📱 Mobile Optimized: Responsive design that works seamlessly on mobile web browsers
  • 🔐 Secure API Key Storage: Your API key is stored locally in your browser
  • Real-time Chat: Smooth animations and typing indicators
  • 🌐 Direct API Integration: Connects directly to Gemini API (no backend required)

Getting Started

1. Get Your Gemini API Key

  1. Visit Google AI Studio
  2. Sign in with your Google account
  3. Create a new API key
  4. Copy your API key

2. Open the Application

Simply open index.html in your web browser. You can:

  • Double-click the file to open it
  • Or use a local web server (recommended for development)

3. Enter Your API Key

When you first open the app, you'll be prompted to enter your Gemini API key. This key is stored locally in your browser and is only used to communicate with Google's Gemini API.

Usage

  1. Enter your API key when prompted
  2. Start chatting with Gemini by typing in the message input at the bottom
  3. Press Enter or click the send button to send your message
  4. Gemini's responses will appear in gray bubbles (like received messages in iMessage)
  5. Your messages will appear in blue bubbles (like sent messages in iMessage)

Technical Details

  • Frontend Only: No backend server required - runs entirely in the browser
  • API Endpoint: Uses Gemini Pro model via Google's Generative Language API
  • Storage: API key stored in browser's localStorage
  • Compatibility: Works in all modern browsers (Chrome, Safari, Firefox, Edge)

Privacy & Security

  • Your API key is stored locally in your browser's localStorage
  • All API requests are made directly from your browser to Google's servers
  • No data is sent to any third-party servers
  • You can clear your API key by clearing your browser's localStorage

Browser Compatibility

  • ✅ Chrome/Edge (latest)
  • ✅ Safari (latest)
  • ✅ Firefox (latest)
  • ✅ Mobile Safari (iOS)
  • ✅ Chrome Mobile (Android)

Notes

  • Make sure you have sufficient API quota in your Google Cloud account
  • The app handles API errors gracefully and displays helpful error messages
  • Typing indicators show when Gemini is processing your request

About

Resources

Stars

0 stars

Watchers

0 watching

Forks

Releases

Packages

Contributors

Languages