AetherLink

# AetherLink Mobile Application Development Documentation [](https://deepwiki.com/1600822305/CS-LLM-house) ## Project Overview Join the official group chat on QQ by clicking the link: [AetherLink Official Group](http://qm.qq.com/cgi-bin/qm/qr?_wv=1027&k=V-b46WoBNLIM4oc34JMULwoyJ3hyrKac&authKey=q%2FSwCcxda4e55ygtwp3h9adQXhqBLZ9wJdvM0QxTjXQkbxAa2tHoraOGy2fiibyY&noverify=0&group_code=930126592) The AetherLink mobile application is a cross-platform AI assistant application built on modern web technologies. The application supports interaction with various AI models (such as OpenAI, Google Gemini, Anthropic Claude, Grok, SiliconFlow, Volcengine, etc.), providing a smooth conversational experience and supporting deployment on the Android platform. The application is developed using React, TypeScript, and the Capacitor framework, featuring highly customizable model configurations, multi-theme chat management, visualization of AI thought processes, speech synthesis, speech recognition, MCP (Model Context Protocol) tool support, knowledge base management, and other distinctive features. ## Tech Stack - **Frontend Framework**: React 19, Material UI 7, Vue 3 (Hybrid Architecture) - **Build Tools**: Vite 6, SWC Compiler - **Programming Language**: TypeScript 5.8 - **Mobile Framework**: Capacitor 7 - **State Management**: Redux & Redux Toolkit 2.8 - **API Integration**: OpenAI, Google Gemini, Anthropic Claude, Grok, SiliconFlow, Volcengine, and other AI models - **Storage**: IndexedDB (Dexie), localStorage - **Styling**: MUI Components + Tailwind CSS + Custom CSS - **Speech Technology**: SiliconFlow TTS API, OpenAI TTS, Azure TTS, Web Speech API, Capacitor Speech Recognition - **Code Highlighting**: Shiki Syntax Highlighting Engine - **Tool Support**: MCP (Model Context Protocol) Tool Integration ## System Requirements - **Node.js**: v22.x or higher - **npm**: v10.x or higher - **Android Studio**: For Android platform development - **JDK**: Java 11 or higher - **Vite**: 6.x or higher - **Capacitor CLI**: 7.x or higher - **React**: 19.x - **TypeScript**: 5.8.x ## Project Structure ``` AetherLink/ ├── android/ # Android platform related code and configuration │ ├── app/ # Main code for the Android application │ │ ├── src/ # Source code directory │ │ │ ├── main/ # Main code │ │ │ │ ├── assets/ # Web resources and configuration files │ │ │ │ ├── java/ # Java code │ │ │ │ └── res/ # Android resource files (layouts, icons, etc.) │ │ │ └── test/ # Test code │ │ └── build.gradle # Application-level build configuration │ ├── build.gradle # Project-level build configuration │ ├── capacitor.settings.gradle # Capacitor plugin configuration │ └── variables.gradle # Global variables and version configuration ├── public/ # Static resource files and public assets │ └── assets/ # Public resources like icons, images, etc. ├── src/ # Source code directory │ ├── assets/ # In-app images, fonts, and other resources │ ├── components/ # Reusable UI components │ │ ├── AIDebateButton.tsx # AI debate feature button component │ │ ├── AppInitializer.tsx # Application initialization component │ │ ├── BackButtonHandler.tsx # Android back button handler component, manages back button behavior │ │ ├── ChatInput.tsx # Chat input box component, handles message input and sending │ │ ├── ChatToolbar.tsx # Chat toolbar component, provides top operations for the chat page │ │ ├── CitationsList.tsx # Citation list component, displays message citations │ │ ├── CodeEditor/ # Code editor component directory │ │ ├── CompactChatInput.tsx # Compact chat input box │ │ ├── DevTools/ # Developer tools component directory │ │ ├── EnhancedToast.tsx # Enhanced toast component │ │ ├── ExitConfirmDialog.tsx # Exit confirmation dialog to prevent accidental app exit │ │ ├── FilePreview.tsx # File preview component │ │ ├── ImageGeneration/ # Image generation feature component directory │ │ ├── IntegratedFilePreview.tsx # Integrated file preview component │ │ ├── KnowledgeManagement/ # Knowledge base management component directory │ │ ├── ModelManagementDialog.tsx # Model management dialog │ │ ├── MultiModelSelector.tsx # Multi-model selector component │ │ ├── RouterWrapper.tsx # Router wrapper component, provides routing transitions and animations │ │ ├── SearchResultsCollapsible.tsx # Search results collapsible component │ │ ├── Sidebar/ # Sidebar component directory │ │ ├── SystemPromptBubble.tsx # System prompt bubble component │ │ ├── SystemPromptDialog.tsx # System prompt dialog │ │ ├── TTS/ # Text-to-speech component directory │ │ ├── ToolsSwitch.tsx # Tool switch component │ │ ├── TopicManagement/ # Topic management component, includes grouping and drag-and-drop features │ │ │ ├── AssistantTab.tsx # Assistant tab component │ │ │ ├── GroupComponents.tsx # Group-related components │ │ │ ├── GroupDialog.tsx # Create/edit group dialog │ │ │ ├── Sidebar.tsx # Main sidebar component │ │ │ ├── SidebarTabs.tsx # Sidebar tab component │ │ │ ├── TopicTab.tsx # Topic tab component │ │ │ └── index.ts # Exports components │ │ ├── TopicStats/ # Topic statistics component directory │ │ ├── UpdateNoticeDialog.tsx # Update notice dialog │ │ ├── UploadMenu.tsx # Upload menu component │ │ ├── UrlScraperStatus.tsx # URL scraping status component │ │ ├── VoiceRecognition/ # Voice recognition component directory │ │ ├── VueComponents/ # Vue component integration directory │ │ ├── WebSearchProviderSelector.tsx # Web search provider selector │ │ ├── chat/ # Chat-related subcomponents │ │ ├── common/ # Common component directory │ │ ├── message/ # Message-related subcomponents │ │ │ ├── ThinkingProcess/ # AI thought process display component │ │ │ └── MessageActions/ # Message action button component │ │ ├── settings/ # Settings-related components │ │ │ └── ModelCard/ # Model card component, displays information about a single model │ │ └── test/ # Test component directory │ ├── pages/ # Page-level components │ │ ├── ChatPage/ # Main chat interface │ │ │ ├── components/ # Chat page subcomponents │ │ │ │ ├── ModelSelector.tsx # Model selector component │ │ │ │ └── ... # Other chat page subcomponents │ │ │ ├── hooks/ # Custom hooks for the chat page │ │ │ │ ├── useModelSelection.ts # Hook for model selection logic │ │ │ │ ├── useChatFeatures.ts # Hook for chat features │ │ │ │ └── ... # Other chat page hooks │ │ │ └── index.tsx # Main component for the chat page │ │ ├── DevToolsPage.tsx # Developer debugging tools page, provides logs and API debugging │ │ ├── KnowledgeBase/ # Knowledge base management page directory │ │ ├── Settings/ # Settings-related pages │ │ │ ├── AppearanceSettings/ # Appearance settings, theme and font configuration │ │ │ ├── BehaviorSettings/ # Behavior settings, such as sending methods and notifications │ │ │ ├── DefaultModelSettings/ # Default model settings page │ │ │ ├── ModelProviderSettings/ # Model provider settings page │ │ │ ├── AddProviderPage/ # Add provider page │ │ │ ├── DataSettings/ # Data management settings, including backup and recovery │ │ │ ├── VoiceSettings/ # Voice settings, TTS and speech recognition configuration │ │ │ ├── index.tsx # Main settings page │ │ │ └── AboutPage/ # About page, displays application information │ │ ├── SettingsPage.tsx # Settings page entry │ │ ├── VueDemo/ # Vue component demonstration page directory │ │ └── WelcomePage.tsx # Welcome/guide page, displayed on first use │ ├── routes/ # Routing configuration and navigation logic │ │ └── index.tsx # Route definitions and configuration │ ├── shared/ # Shared code and business logic │ │ ├── api/ # API interface encapsulation │ │ │ ├── anthropic/ # Anthropic Claude API integration │ │ │ ├── google/ # Google Gemini API integration │ │ │ ├── grok/ # Grok API integration │ │ │ ├── openai/ # OpenAI API integration │ │ │ ├── siliconflow/ # SiliconFlow API integration │ │ │ ├── volcengine/ # Volcengine API integration │ │ │ └── index.ts # Unified API entry and routing │ │ ├── config/ # Configuration file directory │ │ ├── constants/ # Constants definition directory │ │ ├── data/ # Static data and preset configurations │ │ │ ├── models/ # Preset model configurations │ │ │ └── presetModels.ts # Preset model data │ │ ├── hooks/ # Custom React Hooks │ │ │ ├── useAppState/ # Application state management Hook │ │ │ ├── useModels/ # Model management Hook │ │ │ └── ... # Other custom Hooks │ │ ├── middlewares/ # Redux middleware directory │ │ ├── prompts/ # Prompt templates directory │ │ ├── providers/ # Provider-related code directory │ │ ├── services/ # Business service layer │ │ │ ├── APIService.ts # API service, handles model retrieval and message sending │ │ │ ├── AssistantService.ts # Assistant service, manages AI assistant configuration │ │ │ ├── LoggerService.ts # Logging service, unified log management │ │ │ ├── SystemPromptService.ts # System prompt service │ │ │ ├── ThinkingService.ts # AI thought process handling service │ │ │ ├── TopicService.ts # Topic management service │ │ │ ├── TTSService.ts # Text-to-speech conversion service │ │ │ ├── VoiceRecognitionService.ts # Voice recognition service │ │ │ ├── VersionService.ts # Version management service │ │ │ ├── ImageUploadService.ts # Image upload service, handles image selection and compression │ │ │ ├── assistant/ # Assistant-related services directory │ │ │ ├── mcpServers/ # MCP server integration directory │ │ │ ├── vue/ # Vue-related services directory │ │ │ └── storageService.ts # Storage service (IndexedDB/localStorage) │ │ ├── store/ # Redux state management │ │ │ ├── messagesSlice.ts # Message state management │ │ │ ├── settingsSlice.ts # Settings state management │ │ │ ├── slices/ # Other state slices │ │ │ │ ├── groupsSlice.ts # Group state management │ │ │ │ └── ... # Other state slices │ │ │ └── index.ts # Store configuration and export │ │ ├── styles/ # Style file directory │ │ ├── types/ # TypeScript type definitions │ │ │ ├── Assistant.ts # Assistant type definitions │ │ │ └── index.ts # Core type definitions, including message, model, and other types │ │ └── utils/ # Utility functions and helper methods │ │ ├── api/ # API-related utility functions │ │ ├── format/ # Formatting utility functions │ │ ├── storage/ # Local storage utility functions │ │ └── index.ts # General utility functions, such as ID generation, Token calculation, etc. │ ├── App.tsx # Application root component, includes theme and routing configuration │ ├── main.tsx # Application entry file, renders the root component │ └── index.css # Global styles ├── capacitor.config.ts # Capacitor mobile application configuration, defines application ID and plugin settings ├── index.html # Application entry HTML file ├── package.json # Project dependencies and script configuration ├── tsconfig.json # TypeScript compilation configuration (reference configuration) ├── tsconfig.app.json # Application code TypeScript configuration ├── tsconfig.node.json # Node environment TypeScript configuration ├── vite.config.ts # Vite build tool configuration, includes optimization and chunking strategies ├── tailwind.config.js # Tailwind CSS configuration └── eslint.config.js # ESLint code style configuration ``` ## Installation Guide 1. **Clone the Repository** ```bash git clone https://github.com/1600822305/AetherLink.git cd AetherLink ``` 2. **Install Dependencies** ```bash npm install ``` 3. **Initialize Capacitor** ```bash npx cap init ``` ## Development Guide ### Start the Development Server ```bash npm run dev ``` ### Build Options ```bash npm run build # Quick build (recommended) npm run build:ultra # Full build (includes type checking) ``` ### Mobile Development ```bash # Build and sync to Android npm run build npx cap sync android npx cap open android ``` ### Key Features - **Multi-Model AI Conversations**: Supports mainstream AI models like OpenAI, Claude, Gemini, Grok, etc. - **Voice Interaction**: Speech recognition input + TTS voice playback - **Mobile Optimization**: Native Android application experience - **Knowledge Base Management**: Document upload, intelligent retrieval - **MCP Tool Integration**: Tool ecosystem that extends AI capabilities - **Vue + React Hybrid Architecture**: Fully leverages the advantages of both ecosystems ## Build and Deployment ### Android APK Build ```bash # Build in Android Studio npx cap open android # Then in Android Studio: Build > Build Bundle(s) / APK(s) > Build APK(s) ``` The APK will be saved in the `android/app/build/outputs/apk/debug/` directory. ## Contribution Guidelines 1. Fork this repository 2. Create a feature branch (`git checkout -b feature/amazing-feature`) 3. Commit your changes (`git commit -m 'Add some features'`) 4. Push to the branch (`git push origin feature/amazing-feature`) 5. Create a Pull Request ## License This project is licensed under the MIT License - see the LICENSE file for details. ## Featured Functions ### 🤖 Automatic Model List Retrieval AetherLink supports automatic retrieval of available model lists from major AI provider APIs: - Supports mainstream AI providers like OpenAI, Claude (Anthropic), Gemini (Google), Grok (xAI), SiliconFlow, and Volcengine - Automatically handles different API formats and endpoint paths - Smartly adapts to custom proxy APIs - Provides a graceful fallback mechanism, using a preset model list when API requests fail - Supported API endpoints: - OpenAI: `/v1/models` - Claude: `/v1/models` - Gemini: `/v1beta/models` - Grok: `/v1/models` - SiliconFlow: `/v1/models` - Volcengine: `/api/v3/models` - Custom proxy: Automatically detects and adapts ### 🎙️ Voice Recognition Feature AetherLink supports various voice recognition solutions: - **Capacitor Voice Recognition**: Native voice recognition on mobile, supports real-time transcription - **OpenAI Whisper**: High-accuracy speech-to-text, supports multiple languages - **Web Speech API**: Native browser voice recognition as a fallback option - **Smart Provider Switching**: Automatically selects the best recognition solution based on the environment - **Real-time Feedback**: Supports partial result display and real-time status updates - **Press to Speak**: Intuitive voice input interaction method ### 🔊 Enhanced Text-to-Speech AetherLink provides multi-level text-to-speech solutions: - **Azure TTS**: Microsoft Azure Cognitive Services, supports SSML and high-quality voices - **OpenAI TTS**: OpenAI speech synthesis, supports streaming and non-streaming output - **SiliconFlow TTS**: High-quality Chinese speech synthesis - **Web Speech API**: Native browser text-to-speech as a fallback - **Smart Downgrade**: Automatically attempts multiple TTS services to ensure successful voice playback - **Voice Control**: Functions for play/pause, speed adjustment, voice selection, etc. ### 🛠️ MCP Tool Support Integrates the Model Context Protocol (MCP) tool ecosystem: - **Fetch Tool**: Supports network requests and data retrieval - **Cross-Platform Compatibility**: Uses native HTTP on mobile, proxies on the web - **Tool Block Rendering**: Visualizes tool execution results - **Error Handling**: Comprehensive error handling and retry mechanisms ### 📱 Mobile Optimization AetherLink has undergone multiple optimizations for mobile devices: - **Smart Back Button Handling**: Intelligently manages Android back button behavior based on the current page context - Displays exit confirmation dialog on chat and welcome pages - Returns to the previous page on other pages - Prevents accidental app exit - **WebView Version Detection**: Automatically detects WebView version and provides upgrade suggestions - **Responsive Layout**: Adapts to different screen sizes and orientations - **Touch Optimization**: UI elements and gestures optimized for touch interactions - **Performance Optimization**: Reduces unnecessary rendering and calculations, ensuring smooth operation on mobile devices - **Native Feature Integration**: Seamless integration of native features like camera, file system, clipboard, etc. ### 🎨 Vue + React Hybrid Architecture - **React as the Main Framework**: Uses React 19 as the primary UI framework - **Vue Component Integration**: Seamlessly integrates Vue 3 components through bridging components - **Type Safety**: Full TypeScript support ### 📚 Knowledge Base Management - **Document Management**: Supports uploading and managing various document formats - **Intelligent Retrieval**: AI-based semantic search and content retrieval ### 💻 Code Editor - **Syntax Highlighting**: High-quality syntax highlighting based on Shiki - **Multi-Language Support**: Supports mainstream programming languages ### 🧠 AI Thought Process - Supports displaying the AI's thought process (mainly supports the Grok model) - Visualizes thought time and process, improving user experience ### 🛠️ Developer Tools - Console log viewing - Network request monitoring - API request and response analysis