Building for Mobile Devices
Relevant source files
The following files were used as context for generating this wiki page:
Agent Studio MCP Engine supports mobile deployment on Android and iOS platforms using Capacitor v7. The mobile architecture wraps the web-based workspace into native containers, allowing users to access LLM providers, Model Context Protocol (MCP) tools, and cross-device synchronization on portable hardware.
The project utilizes Capacitor to bridge web assets with native mobile APIs, while the core application logic remains consistent across desktop and mobile versions. Mobile-specific configurations, such as viewport constraints and theme colors, are defined to ensure a native-like experience.
Sources: BUILDING.md:12-13, index.html:5-10, package.json:44-48
Mobile Platform Requirements
Mobile builds require specific toolchains depending on the target operating system. Capacitor v7 serves as the primary integration layer.
| Platform | Tooling Requirement | Output Format |
|---|---|---|
| Android | Android Studio, JDK 17+ | .apk / .aab |
| iOS | Xcode 15+, macOS, CocoaPods | .ipa |
Sources: BUILDING.md:9-13, BUILDING.md:25-34
Android Development Workflow
The Android build process involves syncing the compiled Vite web application with a native Android Studio project.
Environment Setup
- Install Android Studio.
- Configure JDK 17+ (typically bundled with Android Studio).
- Define the
ANDROID_HOMEenvironment variable. - Create an Android Virtual Device (AVD) for emulation.
Sources: BUILDING.md:26-30
Build Commands
Users execute synchronization and build tasks through npm scripts defined in the project root.
- Initialization:
npm run cap:androidbuilds the web app, syncs assets, and opens the project in Android Studio. - Asset Update:
npm run cap:syncupdates the native project after making changes to the web code. - Resource Generation:
npm run cap:iconsgenerates all required icon densities (mdpi to xxxhdpi) and splash screens from a sourceresources/icon.png.
Sources: BUILDING.md:79-92, package.json:16-19
Native Configuration
The Android application identity is defined in the resource strings.
<resources>
<string name="app_name">Agent Studio</string>
<string name="package_name">com.agentstudio.mcpengine</string>
</resources>
Sources: android/app/src/main/res/values/strings.xml:3-5
iOS Development Workflow
iOS deployment is restricted to macOS environments due to the requirement for Xcode and CocoaPods.
Workflow Steps
- Sync: Run
npm run cap:iosto bridge web assets and launch Xcode. - Dependencies: Install CocoaPods using
sudo gem install cocoapods. - Compilation: Select the target device in Xcode and execute Product > Build.
- Distribution: Use Product > Archive to prepare the app for App Store Connect.
Sources: BUILDING.md:32-34, BUILDING.md:96-108, package.json:20
Mobile Architecture and Data Flow
The mobile build wraps the web application in a WebView. The following diagram illustrates the lifecycle of a mobile build and the synchronization of data to mobile nodes.
The flow shows how web assets are moved into native projects and how the mobile application interacts with the Sync Cluster for data persistence.
Sources: BUILDING.md:79-81, src/components/SyncCluster.tsx:43-47
Mobile-Specific Web Configuration
The index.html file includes metadata to optimize the interface for mobile touchscreens and prevent unwanted scaling behavior.
- Viewport:
width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=noprevents zooming and ensures the UI fits the screen. - Standalone Mode:
apple-mobile-web-app-capableis set toyesfor a full-screen experience on iOS. - Status Bar:
apple-mobile-web-app-status-bar-styleis configured asblack-translucent. - Theme: The
theme-coloris set to#09090bto match the application's dark aesthetic.
Sources: index.html:5-9
Cross-Device Synchronization
Mobile devices join the "Sync Cluster" by sharing a common passphrase. This allows mobile users to bridge conversation history and MCP configurations from desktop instances.
- Encryption: Payloads are hashed with PBKDF2 and encrypted using AES-256-GCM before transmission.
- Cluster Key: Mobile users enter the
AGENT-PBKDF2-XXXXcode to link their device. - Synced Data: Bridged data includes Prompt Profiles, Chat History, and MCP Broker configurations (ports and addresses).
Sources: src/components/SyncCluster.tsx:43-57, src/components/SyncCluster.tsx:117-125
Summary
Building for mobile devices involves using Capacitor v7 to package the Agent Studio web application for Android and iOS. Developers use specialized npm commands to sync assets and generate platform-specific resources like icons. Once deployed, mobile nodes maintain functional parity with desktop builds through secure, encrypted synchronization via the Sync Cluster, ensuring that LLM provider settings and MCP tool chains are accessible across all user devices.
Sources: BUILDING.md:9-13, src/components/SyncCluster.tsx:115-120