
Ailu ā A Modern Multi-AI Mobile Chat App Built with React Native
Artificial Intelligence tools are evolving rapidly. Developers and AI enthusiasts often switch between multiple AI providers like OpenAI, Gemini, and self-hosted models. This fragmented experience creates friction and slows productivity.
Nur Avesina Mustari
A flexible, extensible, and developer-friendly multi-AI chat application built using React Native, Expo, and modern architecture patterns.
Artificial Intelligence tools are evolving rapidly. Developers and AI enthusiasts often switch between multiple AI providers like OpenAI, Gemini, and self-hosted models. This fragmented experience creates friction and slows productivity.
Ailu solves this problem by providing a unified mobile interface to interact with multiple AI providers in a single, clean, and extensible application.
GitHub Repository
https://github.com/avesin/ailu
š What is Ailu?
Ailu is a React Native + Expo mobile application that enables users to:
- Chat with multiple AI providers
- Manage conversations
- Switch models dynamically
- Connect custom LLM endpoints
- Persist chat history locally
The project is designed with scalability, maintainability, and extensibility in mind, making it suitable for both:
- Production apps
- Developer experimentation
- AI research tools
šÆ Project Goals
Ailu was built with the following goals:
- Unified AI interface
- Clean mobile UI
- Modular architecture
- Easy AI provider integration
- Local-first conversation storage
- Scalable codebase
⨠Core Features
š¤ Multi-AI Provider Support
Ailu allows integration with:
- OpenAI (ChatGPT)
- Google Gemini
- Custom LLM APIs
- Local LLM servers
This makes Ailu extremely flexible for:
- Self-hosted AI
- Private AI deployments
- Enterprise AI tools
- Personal AI assistants
š¬ Conversation Management
- Multiple chat sessions
- Persistent conversations
- Resume previous chats
- Conversation switching
All conversations are stored locally using Redux Persist and AsyncStorage.
š± Mobile-First Design
Built specifically for mobile:
- Responsive layout
- Touch-optimized UI
- Smooth navigation
- Minimal latency
Built using:
- React Native
- Expo
- React Native Paper
š Model Switching
Users can:
- Switch AI provider
- Switch model
- Switch endpoint
Without leaving the chat screen.
š§ Drawer Navigation
Navigation is designed for scalability:
- Conversations list
- Settings
- Model configuration
- Future feature expansion
š Architecture Overview
Ailu follows feature-based architecture with clear separation of concerns.
High Level Architecture
UI Layer
ā
āāā Screens
āāā Components
ā
State Layer
ā
āāā Redux Store
āāā Redux Toolkit Slices
ā
Business Logic Layer
ā
āāā Chat Feature
āāā AI Provider Logic
ā
Data Layer
ā
āāā API Clients
āāā Storage
This architecture ensures:
- Easy maintenance
- Feature scalability
- Clean code separation
š Project Structure
app/
āāā (drawer)/
āāā chat/
āāā settings/
āāā _layout.tsx
src/
āāā components/
ā āāā chat/
ā āāā ui/
ā āāā layout/
ā
āāā features/
ā āāā chat/
ā āāā chatSlice.ts
ā āāā chatService.ts
ā āāā chatTypes.ts
ā
āāā core/
ā āāā api/
ā āāā providers/
ā āāā config/
ā āāā utils/
ā
āāā redux/
ā āāā store.ts
ā āāā persist.ts
ā
assets/
š§ State Management Architecture
Ailu uses Redux Toolkit for predictable state management.
Why Redux Toolkit?
- Predictable state
- Scalable architecture
- Easy debugging
- Middleware support
Redux Structure
redux/
āāā store.ts
āāā rootReducer.ts
āāā persist.ts
Chat Slice Example
features/chat/
āāā chatSlice.ts
āāā chatSelectors.ts
āāā chatActions.ts
Chat state includes:
- Messages
- Conversations
- Active chat
- Model selection
- Provider configuration
š¾ Persistence Layer
Ailu uses:
- Redux Persist
- AsyncStorage
This allows:
- Offline chat history
- Session restoration
- Local-first experience
Persistence flow:
Redux Store
ā
Redux Persist
ā
AsyncStorage
ā
App Restart
ā
State Rehydration
š AI Provider Architecture
Ailu uses provider abstraction.
This allows easy addition of new AI providers.
Provider Interface Example
providers/
āāā openaiProvider.ts
āāā geminiProvider.ts
āāā customProvider.ts
Each provider implements:
- sendMessage()
- streamMessage()
- formatResponse()
This makes it easy to add:
- Claude
- Ollama
- Local LLM
- Azure OpenAI
š API Layer
API logic is separated from UI.
core/api/
āāā client.ts
āāā endpoints.ts
āāā interceptors.ts
Tools used:
- Axios
- Custom API clients
- Provider-specific logic
šØ UI Layer
Ailu UI is built using:
- React Native
- React Native Paper
- Expo Router
UI Structure:
components/
āāā ChatBubble
āāā MessageInput
āāā ConversationList
āāā Header
āāā Drawer
š§ Navigation Architecture
Ailu uses Expo Router.
Benefits:
- File-based routing
- Cleaner navigation
- Easier maintenance
Structure:
app/
āāā index.tsx
āāā chat/
āāā settings/
āāā (drawer)/
āļø Tools & Libraries
Core Dependencies
React Native
Mobile UI framework.
Used for:
- UI rendering
- Cross-platform support
Expo
Development platform for React Native.
Used for:
- Fast development
- Native APIs
- Build system
TypeScript
Type-safe development.
Benefits:
- Fewer bugs
- Better autocomplete
- Maintainable code
State Management
Redux Toolkit
Simplifies Redux.
Used for:
- Chat state
- Model state
- UI state
Redux Persist
Used for:
- Persisting chat history
- Saving sessions
AsyncStorage
Local device storage.
Used for:
- Conversation history
- Settings
UI Libraries
React Native Paper
Material Design UI components.
Used for:
- Buttons
- Cards
- Inputs
- Layout
Networking
Axios
HTTP client.
Used for:
- API requests
- AI provider communication
š Data Flow
User sends message:
User Input
ā
UI Component
ā
Redux Action
ā
Chat Slice
ā
Provider Service
ā
API Request
ā
AI Response
ā
Redux Update
ā
UI Re-render
š Getting Started
Clone Repository
git clone https://github.com/avesin/ailu.git
cd ailu
Install Dependencies
npm install
Start Development
npx expo start
š± Running the App
Run using:
- Expo Go
- Android Emulator
- iOS Simulator
š® Future Roadmap
Possible improvements:
- Streaming responses
- Voice input
- Attachments
- Chat export
- Multi-model compare
- Plugin system
- Local LLM integration
- Offline AI
š§āš» Who Should Use Ailu?
Ailu is perfect for:
- AI developers
- Mobile developers
- LLM experimenters
- AI startups
- Personal AI users
š¤ Contributing
Contributions welcome.
Steps:
- Fork repo
- Create feature branch
- Submit PR
š License
MIT License
ā GitHub
https://github.com/avesin/ailu
If you find Ailu useful, consider starring ā the repository.
Final Thoughts
Ailu demonstrates how to build a scalable multi-AI mobile app using modern React Native architecture.
With provider abstraction, Redux architecture, and modular design, Ailu provides a strong foundation for building AI-powered mobile applications.