Integrating AI Widget with iOS using SwiftUI

This guide will walk you through the process of embedding the AI Widget in an iOS app using SwiftUI and WebKit.

Embedding the AI Widget Frame

To embed the AI Widget frame in your iOS app using SwiftUI, you'll need to use the WebView component provided by the WebKit framework.

First, add the following import statement at the top of your SwiftUI view file:

import WebKit

Next, create a WebView struct that conforms to the UIViewRepresentable protocol:

struct WebView: UIViewRepresentable {
    let url: URL

    func makeUIView(context: Context) -> WKWebView {
        return WKWebView()
    }

    func updateUIView(_ webView: WKWebView, context: Context) {
        let request = URLRequest(url: url)
        webView.load(request)
    }
}

Now, you can use the WebView in your SwiftUI view to display the AI Widget frame:

struct ContentView: View {
    let widgetUrl = URL(string: "https://chatbotkit.com/integrations/widget/{WIDGET_ID}/frame")!

    @State private var showWidget = false

    var body: some View {
        VStack {
            Button("Show AI Widget") {
                showWidget = true
            }

            if showWidget {
                WebView(url: widgetUrl)
                    .frame(height: 600)
            }
        }
    }
}

In this example, the AI Widget frame is displayed when the "Show AI Widget" button is tapped, setting the showWidget state variable to true.

Advanced Integration

Setting Client-Side Functions

To set client-side functions for the AI Widget, you'll need to use the postMessage protocol. Here's an example of how to set functions:

struct ContentView: View {
    let widgetUrl = URL(string: "<https://chatbotkit.com/integrations/widget/{WIDGET_ID}/frame>")!

    @State private var showWidget = false

    var body: some View {
        VStack {
            Button("Show AI Widget") {
                showWidget = true
            }

            if showWidget {
                WebView(url: widgetUrl)
                    .frame(height: 600)
                    .onAppear {
                        setFunctions()
                    }
            }
        }
    }

    func setFunctions() {
        let userLocation = ... // Assumes userLocation points to the user's current location

        let functions = [
            "getCurrentUserLocation": [
                "description": "Provides the current user location",
                "parameters": [:],
                "result": [
                    "data": userLocation
                ]
            ]
        ]

        let jsonData = try! JSONSerialization.data(withJSONObject: functions)
        let jsonString = String(data: jsonData, encoding: .utf8)!

        let script = """
        window.postMessage({
            type: 'setFunctions',
            props: {
                value: \\(jsonString)
            }
        }, '*');
        """

        let webView = UIApplication.shared.windows.first?.rootViewController?.view.subviews.first(where: { $0 is WKWebView }) as? WKWebView

        webView?.evaluateJavaScript(script)
    }
}

In this example, the setFunctions() method is called when the WebView appears. It prepares the function configurations, converts them to a JSON string, and then injects a JavaScript script into the WebView to send the postMessage event to the AI Widget frame.

Make sure to replace {WIDGET_ID} with your actual widget ID in the widgetUrl.