Create a Multimodal AI Chat App for Android, iOS, HarmonyOS in 7.5 Hours Using Kuikly

Setup and Environment

Kuikly is an open‑source high‑performance cross‑platform framework built on Kotlin Multiplatform, covering Android, iOS, HarmonyOS, H5, WeChat Mini‑Program and macOS. The author first installed the Kuikly IDE plugin from the KuiklyUI GitHub repository, created a template project, and added the Kuikly AI skills using the command npx skills add Tencent-TDS/KuiklyUI-AI/skills. This step injects framework‑specific knowledge into the large language model so that the AI can act as a Kuikly‑aware developer.

Requirement Analysis and Component Selection

Using the CodeBuddy brainstorming skill, the author prompted the AI to design a multimodal chat app that works on three platforms with the following core capabilities: text and image messaging, photo capture, album selection, AI‑driven streaming replies, Markdown rendering, link opening, and local session management. The AI returned a component list that included KuiklyChatUI, KuiklyMarkdown, KuiklyAlbum, KuiklyCamera, KuiklySQLite, KuiklyWebview and KuiklyToast. It also identified two missing features that required custom modules: an SSE‑compatible Network module ( SSEModule) and an image‑compression/encoding module ( ImageModule).

Architecture and Code Generation

After confirming the plan, the AI generated the full code base. It used the kuikly-expand-api skill to create the custom SSEModule and ImageModule, defining a common‑main interface and native bridges for Android, iOS and HarmonyOS. For UI, it employed the kuikly-ui-framework and kuikly-reactive-observer skills, wiring the UI to an observable state so that message lists and streaming replies re‑render automatically.

Testing, Debugging and Iterative Fixes

Running the app on an Android device succeeded on the first compile: the UI displayed correctly, text messages were sent, and the AI streamed Markdown‑formatted replies. When testing image messages, the thumbnail grid showed empty cells. The author asked the AI to add logging to @ImagePickerPage.kt and to use logcat and adb for investigation. The AI traced the problem to the ImageAdapter not handling content:// URIs returned by the album component. It patched the adapter to recognise content:// URIs, after which all thumbnails displayed and image sending worked.

A second issue appeared on HarmonyOS: creating a new chat session did not update the history list. The AI identified the cause in the RouterAdapter, which omitted the openPage / closePage boundary handling. A one‑round fix added the missing logic, and the session list updated correctly.

Further refinements addressed keyboard‑covering of the input field (by listening to keyboardHeight and adjusting paddingBottom on a proxy Input component) and replaced the default ActionSheet with a grid‑style quick‑action panel, synchronising its height with the keyboard to avoid double‑lift glitches. UI consistency across all pages was achieved by extracting a shared style (purple gradient background, 44 dp transparent navigation bar, centered white title, light content area) and applying it to the newly added pages.

Final Capabilities and Efficiency Gains

The resulting app runs on Android, iOS and HarmonyOS with the following features:

Text and image message sending

Photo capture and album selection

AI‑driven streaming replies via SSE

Markdown rendering and link opening

Multimodal image‑text understanding

Local session storage and history restoration

Compared with a traditional three‑native‑codebase approach that would require roughly 30 person‑days, the Kuikly + AI workflow reduced effort to 7.5 person‑days in code and ultimately to about 7.5 hours of hands‑on time. The author notes that AI handled the repetitive framework‑level boilerplate while the developer focused on product decisions and fine‑tuning, effectively giving one developer the capacity of a three‑platform team.

Reflection

The experiment demonstrates that Kuikly eliminates cross‑platform duplication, and AI‑augmented Kuikly knowledge (Skills and Rules) prevents the typical “guess‑the‑API” failures of generic code‑generation tools. The combination enables rapid prototyping of production‑grade mobile apps with minimal manual coding.