> ## Documentation Index
> Fetch the complete documentation index at: https://docs.metabind.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Retail app for iOS

> Build a dynamic retail experience with SwiftUI and content managed in Metabind

A minimal SwiftUI sample app demonstrating how to integrate the MetabindContent SDK into an iOS application for building dynamic retail experiences driven by content you manage in Metabind.

## Overview

This sample project provides a starting point for building iOS apps whose UI is defined and managed in Metabind. It demonstrates:

* Initializing a `MetabindClient` with your API credentials
* Injecting the client into the SwiftUI environment
* Displaying content using `MetabindView`
* Handling navigation actions between content pages

<Card title="Download the sample" icon="github" href="https://github.com/metabindai/metabind-apple/tree/1.5.0/Samples/MetabindContent/Retail">
  The sample ships inside the metabind-apple package repository, under `Samples/MetabindContent/Retail` in release `1.5.0`.
</Card>

## Requirements

| Requirement | Version |
| - | - |
| Xcode | 26.2 or later |
| iOS | 26.2 or later |
| Metabind account | [Create one here](https://metabind.ai) |

## Configure the sample

<Steps>
  <Step title="Clone the repository">
    Clone the [metabind-apple](https://github.com/metabindai/metabind-apple) repository and check out tag `1.5.0`. The sample lives in `Samples/MetabindContent/Retail`.
  </Step>

  <Step title="Open in Xcode">
    Open `Samples/MetabindContent/Retail/MetabindSampleRetail.xcodeproj` in Xcode 26.2 or later. The project references the Metabind package locally within the repository, so dependencies resolve automatically.
  </Step>

  <Step title="Add your credentials">
    In `MetabindSampleRetailApp.swift`, replace the placeholder values with your credentials from the [Metabind dashboard](https://metabind.ai):

    * `apiKey` — Your project's API key
    * `organizationId` — Your organization identifier
    * `projectId` — Your project identifier
    * `contentId` — The ID of your root content page
  </Step>

  <Step title="Build and run">
    Build and run the app on a simulator or device running iOS 26.2 or later.
  </Step>
</Steps>

## Initialize the client

The `MetabindClient` connects your app to the Metabind API. Initialize it with your credentials and inject it into the SwiftUI environment:

```swift theme={null}
import SwiftUI
import MetabindContent

@main
struct MetabindSampleRetailApp: App {

    @State var client = MetabindClient(
        url: URL(string: "https://api.metabind.ai/graphql")!,
        ws: URL(string: "wss://ws-api.metabind.ai")!,
        apiKey: "your-api-key",
        organizationId: "your-org-id",
        projectId: "your-project-id"
    )

    var body: some Scene {
        WindowGroup {
            ContentView()
        }
        .environment(client)
    }
}
```

The client uses two endpoints:

* **GraphQL API** (`api.metabind.ai`) — For fetching content and components
* **WebSocket API** (`ws-api.metabind.ai`) — For real-time updates when content changes

## Display content

Use `MetabindView` to render content by its ID. The view automatically fetches and displays the content defined in your Metabind project:

```swift theme={null}
struct ContentView: View {

    var body: some View {
        MetabindView(contentId: "your-content-id")
    }
}
```

`MetabindView` handles:

* Fetching the content and its associated components
* Rendering the UI based on your design system
* Subscribing to real-time updates when you pass `enableSubscription: true`

## Handle navigation

Content can contain actions that navigate to other pages. Listen for the `metabind.content` action to handle navigation between content pages:

```swift theme={null}
struct ContentView: View {

    @State private var path = NavigationPath()

    private enum Destination: Hashable {
        case content(id: String)
    }

    var body: some View {
        NavigationStack(path: $path) {
            MetabindView(contentId: "your-content-id")
                .onMetabindAction { action in
                    if action.name == "metabind.content",
                       let contentId = action.props["contentId"] as? String
                    {
                        path.append(Destination.content(id: contentId))
                    }
                }
                .navigationDestination(for: Destination.self) { destination in
                    switch destination {
                    case .content(let id):
                        MetabindView(contentId: id)
                    }
                }
        }
    }
}
```

The `onMetabindAction` modifier receives actions triggered by user interactions with your content. `metabind.content` is a naming convention the Metabind samples use, not a built-in action; its properties include the target content ID.

## Project structure

```
Samples/MetabindContent/Retail/
├── MetabindSampleRetail.xcodeproj
└── MetabindSampleRetail/
    ├── MetabindSampleRetailApp.swift   # App entry point and client setup
    └── Assets.xcassets/                # App icons and colors
```

## Next steps

<CardGroup cols={2}>
  <Card title="iOS SDK guide" icon="apple" href="/content/mobile-sdks/ios-sdk">
    Learn more about the Metabind iOS SDK features.
  </Card>

  <Card title="Build components" icon="puzzle-piece" href="/guides/building/building-your-design-system">
    Create custom components for your retail app.
  </Card>

  <Card title="Content management" icon="file-lines" href="/guides/concepts/content">
    Understand how to structure and manage content.
  </Card>

  <Card title="BindJS reference" icon="code" href="/bindjs/introduction">
    Explore the component authoring language.
  </Card>
</CardGroup>


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.