Building a Multi‑Modal Chat App for Android, iOS, and HarmonyOS in 7.5 Hours with AI‑Powered Kuikly

Environment Setup: Preparing the AI Development Workspace

The author first installed the Kuikly IDE plugin and Kuikly AI Skills/Rules via the command npx skills add Tencent-TDS/KuiklyUI-AI/skills, which equips the large model with Kuikly‑specific knowledge.

Requirement Analysis and Design (09:00‑10:20)

Using the CodeBuddy brainstorming skill, the AI was prompted to build a multi‑modal chat app supporting Android, iOS and HarmonyOS, with text/image messaging, camera capture, album selection, streaming AI replies, Markdown rendering, link opening and local session management. The AI queried the Kuikly component library and produced a component list: KuiklyChatUI, KuiklyMarkdown, KuiklyAlbum, KuiklyCamera, KuiklySQLite, KuiklyWebview, KuiklyToast. It also identified two missing capabilities – SSE long‑connection support and image compression – and suggested custom modules SSEModule and ImageModule.

Implementation (10:20‑11:10)

After confirming the plan, the AI generated the full code base. It used the [skill:kuikly-expand-api] skill to create the custom modules, and the [skill:kuikly-ui-framework] and [skill:kuikly-reactive-observer] skills to build the UI with Kuikly DSL and reactive observable bindings. The generated app compiled on the first try and displayed a clean interface with functional text input, message list and streaming AI replies.

Testing and Debugging (11:10‑12:30)

Running the app on an Android device revealed that album thumbnails were blank. The author asked the AI to investigate the file @ImagePickerPage.kt. The AI added logging, used logcat and adb to trace the issue, and discovered that the image adapter only handled base64, http, assets and file URIs, not the content:// URIs returned by the album component. The AI patched ImageAdapter to recognize content:// URIs, after which thumbnails displayed correctly.

Iterative Optimization (14:00‑17:30)

Keyboard overlap: the AI added a keyboardHeight listener and adjusted paddingBottom on the outer container, routing the event through a proxy Input component.

HarmonyOS session creation bug: the AI traced the problem to RouterAdapter not handling the openPage / closePage boundary correctly and fixed the routing logic.

ActionSheet to grid button: after several clarification rounds, the AI merged the action‑sheet and keyboard elevation logic, ensuring a single bottom‑raise amount and stable input positioning.

UI consistency: the AI extracted design tokens from existing pages (purple gradient background, 44dp transparent navigation bar, 17sp centered white title) and applied them to newly added pages ( ImagePickerPage, WebViewPage, SessionListPage).

Final Outcome (17:30‑18:00)

The completed app runs on Android, iOS and HarmonyOS, supporting text and image messages, camera capture, album selection, streaming AI replies via SSE, Markdown rendering, link opening, multi‑modal image understanding, and local session management with history restoration.

Compared with a traditional three‑platform native implementation that would require roughly 30 person‑days, the Kuikly + AI workflow reduced effort to 7.5 person‑days (the baseline Kuikly manual effort) and ultimately to 7.5 hours of real time, demonstrating a dramatic efficiency gain.

Key takeaways: Kuikly eliminates cross‑platform boilerplate, while AI‑augmented Kuikly supplies framework‑specific knowledge, writes idiomatic Kotlin‑Multiplatform code, creates custom modules, and performs root‑cause debugging, turning a one‑person effort into a three‑platform development sprint.