Generative UI for Mobile

Definition

Generative UI for mobile is a pattern where an LLM emits a structured payload — JSON validated by a schema — and a mobile-native renderer picks the right native component for each payload and mounts it. It differs from web generative UI on three axes: the runtime is Hermes (no DOM, limited streaming primitives), the component vocabulary is native primitives like ScrollView and Pressable rather than divs, and the LLM often runs on-device, which forces tighter token budgets and stricter prop schemas.

Example

The minimal shape is two steps: the LLM returns a typed JSON payload, and the renderer mounts the registered native component. In Wire RN, the second step is one component.

// 1. LLM returns JSON validated against a Zod schema
const payload = {
  component: "ConfirmPrompt",
  props: { question: "Cancel subscription?", confirmLabel: "Yes" },
};

// 2. Wire RN's renderer maps name -> registered native component
import { ComponentRenderer } from "wireai-rn"; // wireai-rn@0.1.3

<ComponentRenderer payload={payload} />;
// Mounts a native <Pressable> + <Text> tree on iOS and Android.
// No HTML. No web view. Hermes-compatible.

The agent never writes JSX. It writes a component name and a prop bag. The renderer owns the mapping, which is what makes the output safe to ship to App Store reviewers.

When to use it

• Conversational mobile apps where the agent picks between confirm prompts, lists, selection cards, and inputs.
• Onboarding flows that need to adapt to user answers without redeploying — see dynamic onboarding.
• On-device LLM apps where small models cannot reliably emit free-form UI, but can pick from a registry of 10 to 30 components.
• Agent-driven flows over the A2UI protocol where a remote agent dictates the next screen.

When NOT to use it

• Static screens whose layout never changes. A registry + LLM round-trip is more cost and latency than a hardcoded screen deserves.
• Tasks where a deterministic state machine already covers every branch. Generative UI is for open-ended flows, not for replacing a navigator.
• Hard real-time UI such as games or AR overlays. The token-by-token render budget does not fit a 60fps frame.
• Apps where users expect identical screens across sessions for muscle memory — banking dashboards, point-of-sale, accessibility-critical flows.
• Web-first products. Generative UI for the web is a different problem with different primitives — this term is specifically about React Native.