Case study: how we built Wire RN, a generative UI SDK for React Native

By Malik Chohra

We built Wire RN, an open-source generative UI SDK for React Native, published on npm as wireai-rn. An LLM or agent returns JSON for one native component per turn, and Wire RN renders it. This is our custom SDK development work written up from the agency side: the model we landed on, the eleven validated components, the five adapters, and why we made it open source. The live site is getwireai.com.

What problem does generative UI for React Native actually solve?

Most "AI in the app" today is a chat bubble. Text in, text out. But a lot of the interface we want an agent to drive is not text, it is a form field, a choice list, a confirmation, a card. The agent knows what it wants to ask. The app should render that as a real native component, not a wall of markdown.

Wire RN is the layer between the two. The model returns a small JSON object describing one component. Wire RN validates it and renders the matching native React Native component. The model gets to drive the UI without ever touching your component tree directly.

Why one component per turn and a flat model?

We tried letting the model emit nested trees of components in a single response. It works in a demo and falls over in production. Deep trees are where models hallucinate structure, drop required props, and produce JSON that validates as JSON but not as a renderable UI.

So we constrained it. One native component per turn, flat model. The agent drives a flow by taking turns, not by emitting a whole screen at once. The constraint is the feature. It is what makes the output reliable enough to ship. Each component is backed by a Zod schema, so anything the model returns that does not match the contract is rejected before it reaches render.

What is in the SDK?

• 11 Zod-validated components. Inputs, choice lists, cards, confirmations, the primitives an onboarding or assistant flow needs. Each one has a strict schema, so an invalid payload never renders.
• 5 adapters. OpenAI, Anthropic, Gemini, Ollama, and A2A (agent-to-agent). Swap the model behind the same interface. The A2A adapter is what lets one agent drive UI on behalf of another.
• Streaming by default. Components appear as the model produces them. No spinner-then-dump. This is the part that is genuinely hard on React Native because of Hermes and ReadableStream quirks, which is exactly why a dedicated SDK earns its place.

What is the lead use case?

AI dynamic onboarding. A fixed set of base questions, then AI-tailored follow-ups rendered as real native components based on what the user just answered. The model decides what to ask next and Wire RN renders it natively, so the onboarding adapts per user without anyone hand-coding every branch.

Wire RN ships inside the AI Pro tier of AI Mobile Launcher, and it is the engine behind the adaptive onboarding in Morrow Self. We build on it for client work too.

Why open source?

A UI SDK only earns trust when teams can read it. Generative UI is new enough that nobody wants a black box deciding what renders in their app. Open source means a team can audit the component contracts, see exactly what the model is allowed to emit, and extend the schema set themselves. It also means the streaming and adapter code gets stress-tested by people who are not us. That is worth more than keeping it closed.

FAQ

What is generative UI in React Native?

It is an interface where an LLM or agent decides which native component to render next, instead of the UI being fully hand-coded. The model returns a structured description, the app renders the matching native component. Wire RN does this with one validated component per turn so the output stays reliable.

How is Wire RN different from a chatbot UI?

A chatbot renders text. Wire RN renders native components: a real input field, a real choice list, a real card. The agent drives an interface, not a conversation transcript. That makes it suitable for flows like onboarding where you want structured input, not free text.

Which LLMs does Wire RN support?

Five adapters ship: OpenAI, Anthropic, Gemini, Ollama for local models, and A2A for agent-to-agent. They share one interface, so switching providers is a config change, not a rewrite.

Can CasaInnov build a custom SDK for my product?

Yes. Custom SDK development is part of what we do. Wire RN is the public proof. If you need a typed, validated, model-driven layer inside your own app, that is the kind of work we take. Start at our AI mobile development service page.