Boosting KMP Native Cross‑Platform Development with AI Agents: Real‑World Practices

Background

Large language models (e.g., GPT) and AI‑enhanced IDEs have enabled agents that can generate code from images, natural language intent, or design drafts, dramatically improving developer productivity.

Alipay KMP Native Cross‑Platform Framework

The framework extends Kotlin Multiplatform (KMP) and Compose Multiplatform (CMP) to provide a native cross‑platform solution for Alipay terminal developers.

KMP : Write business logic once in Kotlin and compile to Android, iOS, HarmonyOS, desktop, or web.

CMP : Declarative UI library that shares UI code across all supported platforms.

AntUI component library : Compose‑based UI components with a unified Alipay style.

OHOS / HarmonyOS : Open‑source and commercial operating‑system bases for Huawei devices.

Architecture Overview

The solution is organized into three logical layers.

Cross‑platform base : A C++ core library exposed via KMP interfaces; system extensions for Harmony (eventcenter, pipeline, resource loading, thread dispatch); and the Tecla unified API that lets Kotlin code invoke Alipay middleware on Android, iOS, and Harmony.

MYKMP : Runtime optimizations (startup speed, memory usage), custom LLVM instrumentation, bidirectional Kotlin‑ETS communication for Harmony, package‑size reduction, and native API exposure for Kotlin.

MYCMP : Dual rendering pipelines (Compose‑based and custom Canvas) for iOS and Harmony, AntUI components, Compose UI timing analysis, runtime performance monitoring, native component embedding, and lifecycle unification across App/Activity/Page.

Current Pain Points in KMP Development

Existing AI coding assistants focus on front‑end stacks and cannot handle KMP codebases.

External tools (e.g., Cursor, Cline) support KMP but lack integration with Alipay’s internal middleware and engineering workflow.

No AI‑Agent tightly coupled with Alipay’s native framework that supports cross‑platform development.

AI‑Agent‑Based KMP Coding Assistant – Solution

The assistant runs inside Android Studio, automatically learns the project structure, queries Alipay middleware capabilities, and generates code from design drafts or images.

Accelerating UI Development

Two generation modes are provided: design‑draft‑to‑Compose and image‑to‑Compose.

Design‑Draft‑to‑Compose

Sketch (or other design tools) is linked with a Node/WebView/IDE plugin. When a layer is selected, the system creates an intermediate representation (IR) that captures element type, parameters, and style. The IR is then transformed into Compose source code and refined by a large language model.

Type conversion (e.g., div → Box, image → Image).

Parameter mapping (e.g., src → PainterResource).

Style conversion to Modifier or TextStyle.

A second‑stage LLM refactors the generated UI into reusable components (e.g., ServiceItem) and makes the code data‑driven, eliminating hard‑coded values and duplication.

Image‑to‑Compose (Two‑Stage Approach)

Stage 1 directly outputs Compose code from the image but suffers from low fidelity. Stage 2 introduces an image‑to‑IR step using a custom multimodal LLM (MLLM). The MLLM produces a structured IR that includes high‑level AntUI components; the same conversion rules as the design‑draft path then generate the final Compose code.

Training pipeline:

Data construction : Synthesize Compose code, render UI screenshots, and pair each image with its IR.

Model fine‑tuning : Apply LoRA adapters to inject UI‑parsing knowledge into the MLLM efficiently.

Post‑processing : Use traditional image algorithms to correct layout, position, and style hallucinations.

Accelerating Logic Development

A Retrieval‑Augmented Generation (RAG) system extracts knowledge from a ~1.3 MB Kotlin API JSON (~1000 entries). The workflow includes:

Chunk‑wise markdown generation agents that split the JSON and produce formatted documentation.

FAQ expansion to cover multiple phrasings of the same question.

Knowledge‑graph‑driven retrieval that models “module → capability → API” hierarchies for more systematic answers.

Resolving Common KMP Issues

Build failures on three platforms : The agent runs KMP log‑analysis scripts, extracts key log entries, queries the knowledge base, and returns a concise diagnosis.

Crash analysis : Developers feed crash logs to the agent, which runs a stack‑trace de‑obfuscation tool, correlates results with project context, and suggests root causes and fixes.

Framework integration : A template generator creates a ready‑to‑use KMP starter project, reducing manual integration effort from several person‑days to minutes.

MCP (Model Context Protocol) Integration

MCP is an open‑source standard that acts like a USB‑C interface for AI agents, allowing them to route user intents to specific tools. A typical MCP tool definition includes a name, trigger phrases, and an input schema; the agent automatically invokes the tool when the intent matches.

Future Directions

Continue optimizing image‑to‑code and design‑draft pipelines.

Research generative UI that automatically selects optimal components based on data.

Extend KMP support to additional native technology stacks.

Open the Agent and MCP marketplace for community contributions.