Retail app for iOS

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

Download the sample

The sample ships inside the metabind-apple package repository, under Samples/MetabindContent/Retail.

Requirements

Requirement	Version
Xcode	15.0 or later
iOS	17.0 or later
Metabind account	Create one here

Configure the sample

Clone the repository

Clone the metabind-apple repository. The sample lives in Samples/MetabindContent/Retail.

Open in Xcode

Open Samples/MetabindContent/Retail/MetabindSampleRetail.xcodeproj in Xcode 15 or later. The project references the Metabind package locally within the repository, so dependencies resolve automatically.

Add your credentials

In MetabindSampleRetailApp.swift, replace the placeholder values with your credentials from the Metabind dashboard:

apiKey — Your project’s API key
organizationId — Your organization identifier
projectId — Your project identifier
contentId — The ID of your root content page

Build and run

Build and run the app on a simulator or device running iOS 17 or later.

Initialize the client

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

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:

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

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

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

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

Next steps

iOS SDK guide

Learn more about the Metabind iOS SDK features.

Build components

Create custom components for your retail app.

Content management

Understand how to structure and manage content.

BindJS reference

Explore the component authoring language.

Overview

Managing Content

Querying Content

AI Content Creation

Mobile SDKs for content

Sample Apps

GraphQL API

GraphQL Object Types

GraphQL Queries

GraphQL Subscriptions

GraphQL Advanced

Content MCP Server

Context

Discovery

Creation

Articles

Retail app for iOS

Overview

Download the sample

Requirements

Configure the sample

Initialize the client

Display content

Handle navigation

Project structure

Next steps

iOS SDK guide

Build components

Content management

BindJS reference

​Overview

Download the sample

​Requirements

​Configure the sample

​Initialize the client

​Display content

​Handle navigation

​Project structure

​Next steps

iOS SDK guide

Build components

Content management

BindJS reference

Overview

Requirements

Configure the sample

Initialize the client

Display content

Handle navigation

Project structure

Next steps