Integrating OpenClaw Real‑Time Explainability Widget into iOS and Android Apps

Introduction

Real‑time explainability is becoming a non‑negotiable feature for AI‑driven mobile products. Hosting OpenClaw on UBOS gives you a managed endpoint that streams model decisions instantly to the user interface. In this tutorial, we walk you through a complete mobile demo that integrates the OpenClaw widget into both iOS (Swift) and Android (Kotlin) SDKs. By the end of the article you will have a working cross‑platform demo, a clear architecture diagram, and a set of reusable code snippets you can drop into any UBOS‑powered project.

The demo is built on the UBOS platform overview, leveraging its low‑code Web app editor on UBOS for backend configuration and the Workflow automation studio to orchestrate data flow between the mobile client and the OpenClaw service.

iOS (Swift) Integration – Step‑by‑Step

Follow these steps to embed the OpenClaw widget into a SwiftUI project. The code assumes you have already created an UBOS solutions for SMBs account and obtained an API key.

1️⃣ Add the OpenClaw Swift Package

Open Xcode, select File → Swift Packages → Add Package Dependency, and paste the repository URL:

https://github.com/ubos-tech/openclaw-swift-sdk

2️⃣ Configure API Credentials

Create a Config.plist file and store your UBOS API key securely:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
    <key>OpenClawAPIKey</key>
    <string>YOUR_UBOS_API_KEY</string>
</dict>
</plist>

3️⃣ Build the Explainability View

Wrap the OpenClaw widget in a SwiftUI view:

import SwiftUI
import OpenClawSDK

struct ExplainabilityView: UIViewRepresentable {
    let inputData: String

    func makeUIView(context: Context) -> OpenClawWidget {
        let widget = OpenClawWidget()
        widget.apiKey = Bundle.main.object(forInfoDictionaryKey: "OpenClawAPIKey") as? String
        widget.input = inputData
        widget.startStreaming()
        return widget
    }

    func updateUIView(_ uiView: OpenClawWidget, context: Context) {
        // No‑op – widget updates itself via streaming
    }
}

4️⃣ Embed the View in Your Screen

Use the view inside any SwiftUI screen, passing the model input you want explained:

struct ContentView: View {
    @State private var userInput = ""

    var body: some View {
        VStack(spacing: 20) {
            TextField("Enter text for AI model", text: $userInput)
                .textFieldStyle(RoundedBorderTextFieldStyle())
                .padding()

            if !userInput.isEmpty {
                ExplainabilityView(inputData: userInput)
                    .frame(height: 250)
                    .border(Color.gray, width: 1)
            }
        }
        .padding()
    }
}

5️⃣ Test on Device

Run the app on a simulator or physical device. As you type, the OpenClaw widget streams a live explanation of the AI model’s decision.

For developers who need voice‑enabled explanations, the ElevenLabs AI voice integration can be added with a single line of code.

Why Host OpenClaw on UBOS?

UBOS provides a fully managed environment for AI services, including automatic scaling, secure API gateways, and built‑in observability. By hosting OpenClaw on UBOS, you eliminate the operational overhead of maintaining a custom explainability server, letting you focus on product features instead of infrastructure.

The platform also integrates seamlessly with other UBOS modules such as the AI marketing agents and the UBOS templates for quick start, enabling you to spin up end‑to‑end AI solutions in minutes.