> ## 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 server-driven retail experience with SwiftUI and Metabind

A minimal SwiftUI sample app demonstrating how to integrate the Metabind SDK into an iOS application for building dynamic, server-driven retail experiences.

## Overview

This sample project provides a starting point for building iOS apps with server-driven UI powered by 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 Sample" icon="github" href="https://github.com/metabindai/metabind-sample-retail-apple">
  Get the complete Xcode project from GitHub.
</Card>

## Requirements

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

## Configure the sample

<Steps>
  <Step title="Clone the repository">
    Download or clone the sample project from GitHub.
  </Step>

  <Step title="Open in Xcode">
    Open `MetabindSampleRetail.xcodeproj` in Xcode 15 or later.
  </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 17 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 Metabind

@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 for live content changes

## 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. The `metabind.content` action is built-in and includes the target content ID in its properties.

## Project structure

```
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>