An open API service indexing awesome lists of open source software.

https://github.com/techcow2/island-ai

Island AI is a free, modern ChatGPT alternative featuring smart multimodal chat, integrated web search, a polished interface, and a unique Questioning Mode that asks clarifying questions before delivering precise, real-time responses.
https://github.com/techcow2/island-ai

artificial-intelligence assistant-chat-bots chatbot chatgpt gemini multimodal pollinations-ai react tailwindcss typescript

Last synced: 2 months ago
JSON representation

Island AI is a free, modern ChatGPT alternative featuring smart multimodal chat, integrated web search, a polished interface, and a unique Questioning Mode that asks clarifying questions before delivering precise, real-time responses.

Awesome Lists containing this project

README

          

# 🏝️ Island AI – Free ChatGPT Alternative with Questioning Mode

[![React](https://img.shields.io/badge/React-19.1.0-blue.svg)](https://reactjs.org/)
[![TypeScript](https://img.shields.io/badge/TypeScript-Latest-blue.svg)](https://www.typescriptlang.org/)
[![Vite](https://img.shields.io/badge/Vite-5.4.11-646CFF.svg)](https://vitejs.dev/)
[![TailwindCSS](https://img.shields.io/badge/TailwindCSS-4.1.11-38B2AC.svg)](https://tailwindcss.com/)
[![PHP](https://img.shields.io/badge/PHP-7.4+-777BB4.svg)](https://php.net/)

Island AI is a modern, no-cost ChatGPT substitute that delivers smart, multi-model conversations, integrated web search, and a polished user interface. Its standout Questioning Mode invites the AI to ask you 3–5 clarifying questions before answering, ensuring each response is sharply focused on your exact needs. Built with React and TypeScript, Island AI offers a smooth chat experience featuring authentication, chat persistence, and real-time streaming responsesβ€”all in one elegant package.

## 🌐 Try It Now

**πŸš€ [Access the hosted version at islandai.app](https://islandai.app)**

No installation required! Try Island AI instantly in your browser with full features including multiple AI models, web search, and questioning mode.

## 🌟 Features

- **Multiple AI Models**: Support for various AI models including GPT-4, Gemini, and Pollinations
- **Real-time Streaming**: Live streaming responses for immediate feedback
- **Web Search Integration**: Enhanced responses with real-time web search capabilities
- **User Authentication**: Firebase-based authentication system
- **Chat Persistence**: Save and manage conversation history
- **Mobile Responsive**: Optimized for all device sizes
- **Modern UI/UX**: Beautiful interface with Framer Motion animations
- **Voice Support**: Text-to-speech capabilities
- **Markdown Support**: Rich text rendering with syntax highlighting
- **Rate Limiting**: Built-in request throttling for optimal performance
- **PWA Ready**: Progressive Web App capabilities

## πŸ—οΈ Architecture

### Frontend (React + TypeScript)
- **Framework**: React 19.1.0 with TypeScript
- **Build Tool**: Vite 5.4.11
- **Styling**: TailwindCSS 4.1.11 with custom components
- **State Management**: React hooks and context
- **Animations**: Framer Motion for smooth interactions
- **Authentication**: Firebase Auth
- **Storage**: Firebase Firestore for chat persistence

### Backend (PHP)
- **API Proxy**: PHP-based proxy servers for AI model APIs
- **Endpoints**: Gemini API proxy, streaming support, and web search
- **CORS Handling**: Proper cross-origin request management

## πŸ“‹ Prerequisites

- **Node.js** (v18 or higher)
- **PHP** (v7.4 or higher)
- **npm** or **yarn**
- **Gemini API Key** (from Google AI Studio)
- **LangSearch API Key** (optional, for enhanced web search)

## πŸš€ Quick Start

### 1. Clone the Repository
```bash
git clone https://github.com/techcow2/Island.git
```

### 2. Install Dependencies
```bash
# Install frontend dependencies
npm install

# Install PHP dependencies (if using Composer)
composer install
```

### 3. Environment Setup
```bash
# Copy environment file
cp .env.example .env

# Edit .env file with your API keys
# Required:
# GEMINI_API_KEY=your_gemini_api_key_here
# Optional:
# LANGSEARCH_API_KEY=your_langsearch_api_key_here
```

### 4. Get API Keys

#### Gemini API Key (Required)
1. Visit [Google AI Studio](https://makersuite.google.com/app/apikey)
2. Create a new API key
3. Add it to your `.env` file

#### LangSearch API Key (Optional)
1. Visit [LangSearch Dashboard](https://langsearch.com/dashboard)
2. Create an account and get your API key
3. Add it to your `.env` file for enhanced web search

### 5. Start Development Servers

#### Frontend Development Server
```bash
npm run dev
```
This starts the Vite development server on `http://localhost:3000`

#### Backend PHP Server
```bash
# Start PHP built-in server for API endpoints
php -S localhost:8000 -t .
```

### 6. Access the Application
Open your browser and navigate to `http://localhost:3000`

## πŸ“ Project Structure

```
island/
β”œβ”€β”€ src/ # Frontend source code
β”‚ β”œβ”€β”€ components/ # React components
β”‚ β”‚ β”œβ”€β”€ ui/ # Reusable UI components
β”‚ β”‚ β”œβ”€β”€ AuthModal.tsx # Authentication modal
β”‚ β”‚ β”œβ”€β”€ SettingsPanel.tsx # Settings configuration
β”‚ β”‚ β”œβ”€β”€ MobileMenu.tsx # Mobile navigation
β”‚ β”‚ └── ... # Other components
β”‚ β”œβ”€β”€ services/ # API and utility services
β”‚ β”‚ β”œβ”€β”€ gemini.ts # Gemini API integration
β”‚ β”‚ β”œβ”€β”€ pollinations.ts # Pollinations API
β”‚ β”‚ β”œβ”€β”€ auth.ts # Firebase authentication
β”‚ β”‚ β”œβ”€β”€ chatStorage.ts # Chat persistence
β”‚ β”‚ └── ... # Other services
β”‚ β”œβ”€β”€ hooks/ # Custom React hooks
β”‚ β”œβ”€β”€ utils/ # Utility functions
β”‚ β”œβ”€β”€ App.tsx # Main application component
β”‚ └── main.tsx # Application entry point
β”œβ”€β”€ api/ # PHP backend APIs
β”‚ β”œβ”€β”€ gemini-proxy.php # Gemini API proxy
β”‚ β”œβ”€β”€ gemini-stream.php # Streaming responses
β”‚ └── langsearch-proxy.php # Web search proxy
β”œβ”€β”€ public/ # Static assets
β”‚ └── images/ # Icons and images
β”œβ”€β”€ dist/ # Build output
β”œβ”€β”€ package.json # Frontend dependencies
β”œβ”€β”€ composer.json # PHP dependencies
β”œβ”€β”€ vite.config.js # Vite configuration
β”œβ”€β”€ tailwind.config.js # TailwindCSS configuration
β”œβ”€β”€ .env.example # Environment template
└── README.md # This file
```

## πŸ› οΈ Available Scripts

```bash
# Development
npm run dev # Start development server
npm run build # Build for production
npm run preview # Preview production build
npm run lint # Run ESLint

# PHP Server
php -S localhost:8000 -t . # Start PHP development server
```

## βš™οΈ Configuration

### Environment Variables

| Variable | Description | Required |
|----------|-------------|---------|
| `GEMINI_API_KEY` | Google Gemini API key | Yes |
| `LANGSEARCH_API_KEY` | LangSearch API key for web search | No |
| `FRONTEND_URL` | Frontend URL for CORS (default: http://localhost:3000) | No |

### Model Configuration

The application supports multiple AI models:
- **GPT-4**: Via Pollinations service
- **Gemini**: Google's Gemini Pro model
- **Claude**: Via Pollinations service
- **Other models**: Extensible architecture for additional models

### Features Configuration

Users can configure:
- **Model Selection**: Choose preferred AI model
- **Web Search**: Enable/disable web search integration
- **Voice Settings**: Configure text-to-speech options
- **Questioning Mode**: Enhanced follow-up question generation

## πŸ”§ Development

### Adding New AI Models

1. Create a new service in `src/services/`
2. Implement the required interface
3. Add model configuration to the settings panel
4. Update the main App component to handle the new model

### Customizing UI Components

The project uses a modular component architecture:
- Base components in `src/components/`
- Reusable UI components in `src/components/ui/`
- Styled with TailwindCSS and custom CSS

### API Proxy Development

PHP proxies handle:
- CORS headers
- API key management
- Request/response transformation
- Error handling

## πŸ“± Mobile Support

Island AI is fully responsive and includes:
- Mobile-optimized interface
- Touch-friendly interactions
- Progressive Web App (PWA) capabilities
- Adaptive layouts for all screen sizes

## πŸ”’ Security

- API keys are stored server-side
- CORS properly configured
- Rate limiting implemented
- Input sanitization
- Secure authentication via Firebase

## πŸš€ Deployment

### Production Build

```bash
# Build the application
npm run build

# The dist/ directory contains the production build
```

### Deployment Options

1. **Static Hosting**: Deploy `dist/` to any static host (Netlify, Vercel, etc.)
2. **Full Stack**: Deploy both frontend and PHP backend
3. **CDN**: Use with content delivery networks for global performance

### Environment Setup for Production

1. Set production environment variables
2. Configure proper CORS origins
3. Set up SSL certificates
4. Configure rate limiting

## 🀝 Contributing

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

## πŸ“„ License

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

## πŸ™ Acknowledgments

- [Google Gemini](https://ai.google.dev/) for AI capabilities
- [Pollinations](https://pollinations.ai/) for additional AI models
- [Firebase](https://firebase.google.com/) for authentication and storage
- [Tailwind CSS](https://tailwindcss.com/) for styling
- [Framer Motion](https://www.framer.com/motion/) for animations
- [React](https://reactjs.org/) and [Vite](https://vitejs.dev/) for the development experience

## πŸ“ž Support

For support, please open an issue on GitHub or contact the development team.

---

**IslandApps.dev** - Making AI conversations accessible to everyone. 🏝️✨