Introduction

This library helps you embed Mealz eCommerce experiences inside grocery shopping apps and third-party apps that connect to multiple retailers.

MealzUIKit (latest 1.0.0) is a Kotlin Multiplatform library. Feature journeys (Catalog, Mealz Planner, Recipe Card, Recipe Details, …) run inside a native WebView that loads Mealz SSR content. You initialize the library once, present feature screens where needed, and optionally style them with CSS manifests.

Legacy stack

Looking for the previous native libraries (MealzCore + MealzAndroid / MealziOSSDK)? Open the Android or iOS navbar dropdown and pick 5.7 (obsolete).

Get Up & Running

Integration takes three steps:

1. Initialization — Start the library with your supplier key, set user / store, and wire basket sync (retailer mode). See Installation then Initialisation.
2. Features — Present Mealz screens (Catalog, Mealz Planner, RecipeCard, …) in your navigation. See Catalog and the other pages under Features.
3. Styling (optional) — Defaults already look fine. Register CSS manifests only when you need brand overrides — Styling (see also SSR fetching style).

Background Knowledge

How Do We Get the Data?

Your backend works with our backend to share the product referential (products, prices, stores). We refresh it on a commercially agreed cadence (often hourly to daily). Mealz keeps a basket synchronized with the retailer basket when you are in retailer mode.

Retailer Basket Communication

In retailer mode, Mealz keeps a copy of the retailer basket and exchanges deltas when Mealz recipes add or remove products. Non-Mealz products in the retailer cart are left alone. See Basket Synchronization and the SSR basket synchronization docs for the web-side model (the same SSR APIs power the WebView).

Recipe Provider (No Supplier) Mode

When your app is not a retailer, Mealz can own the basket and you use No Supplier helpers (supplier selector, pricing, add-to-cart CTA). Store selection is driven by the supplier selector flow — you do not wire an external retailer store id.

No Supplier apps can transfer that Mealz basket to an affiliated retailer app/site (transferred_basket_token handoff). Retailers must receive it via My Meals + basket sync. See Basket Transfer.

Project Architecture

MealzUIKit is a single KMM artifact:

• Shared Kotlin: configuration, basket sync, routing (FeatureRoute), Compose Multiplatform screens
• Android: *View wrappers (AbstractComposeView) hosting a WebView
• UI content: HTML/CSS/JS from Mealz SSR inside the WebView

You should not call the Mealz HTTP API directly from the host app for these journeys — the WebView + SSR layer handles that after SdkConfiguration.start.

Packages

Add a single dependency:

• ai.mealz:ui-kit — MealzUIKit (config, basket sync, Android Views / Compose screens, WebView)