Skip to main content
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

Download Sample

Get the complete Xcode project from GitHub.

​
Requirements

RequirementVersion
Xcode15.0 or later
iOS17.0 or later
Metabind accountCreate one here

​
Configure the sample

1

Clone the repository

Download or clone the sample project from GitHub.
2

Open in Xcode

Open MetabindSampleRetail.xcodeproj in Xcode 15 or later.
3

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
4

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

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.