Your own UI

import { WebView } from "react-native-webview";
import { GraineProvider, GraineVoiceLauncher, type GraineVoiceApi } from "@graineai/inapp-react-native";
 
export function Assistant({ open, onClose }: { open: boolean; onClose: () => void }) {
  return (
    <GraineProvider client={client} autoConnect={false}>
      {/* Mounted at launch with active={false}: the engine loads idle, so opening is a tap away */}
      <GraineVoiceLauncher webView={WebView} active={open} autoStart onEnded={() => setTimeout(onClose, 900)}>
        {(api) => (open ? <MyCallBar api={api} onClose={onClose} /> : null)}
      </GraineVoiceLauncher>
    </GraineProvider>
  );
}
 
function statusOf(api: GraineVoiceApi): string {
  if (api.network === "offline") return "No connection";
  if (api.micDenied) return "Microphone is off for this app";
  if (api.callFailed) return "Couldn’t connect · tap to retry";
  if (api.reconnecting || api.connectStage === "retrying" || api.connectStage === "switching") return "Reconnecting…";
  if (!api.ready || api.connecting) return api.slowConnect ? "Still connecting…" : "Connecting…";
  if (api.phase === "thinking") return "Thinking…";
  if (api.phase === "speaking") return "Speaking";
  if (api.connected) return api.quality === "poor" ? "Weak connection" : "Listening";
  return "Tap to talk";
}
 
function MyCallBar({ api, onClose }: { api: GraineVoiceApi; onClose: () => void }) {
  return (
    <MyBar
      status={statusOf(api)}
      caption={api.captionsOn ? api.caption?.text : undefined}
      live={api.connected}
      muted={api.muted}
      onTalk={() => (api.connected ? api.setMuted(!api.muted) : api.start())}
      onEnd={() => (api.connected || api.connecting ? api.end() : onClose())}
    />
  );
}

class CallActivity : Activity() {
    private val graine get() = GraineInApp.get()
 
    private val listener = object : GraineListener {
        override fun onCallState(connected: Boolean, connecting: Boolean) = render()
        override fun onConnectProgress(stage: ConnectStage?, slow: Boolean, failed: Boolean) = render()
        override fun onCaption(role: Role, text: String, live: Boolean) { captionView.text = text }
        override fun onMicDenied(reason: String) { showMicExplanation() }
        override fun onReconnecting(active: Boolean) = render()
        override fun onQuality(quality: ConnectionQuality) = render()
        override fun onEnded() { captionView.postDelayed({ finish() }, 900) }
    }
 
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.call)
        graine.voice.attach(this)                 // the engine, idle — no bar
        graine.addListener(listener)
        talkButton.setOnClickListener {
            val v = graine.voice
            if (v.connected) v.setMuted(!v.muted) else v.start()
        }
        endButton.setOnClickListener { graine.voice.end() }
        render()
    }
 
    override fun onDestroy() { graine.removeListener(listener); super.onDestroy() }
 
    override fun onRequestPermissionsResult(code: Int, permissions: Array<out String>, results: IntArray) {
        if (!graine.voice.onRequestPermissionsResult(code, results)) super.onRequestPermissionsResult(code, permissions, results)
    }
 
    private fun render() {
        val v = graine.voice
        statusView.text = when {
            v.callFailed -> "Couldn’t connect · tap to retry"
            v.reconnecting || v.connectStage == ConnectStage.RETRYING || v.connectStage == ConnectStage.SWITCHING -> "Reconnecting…"
            !v.ready || v.connecting -> if (v.slowConnect) "Still connecting…" else "Connecting…"
            v.phase == CallPhase.THINKING -> "Thinking…"
            v.phase == CallPhase.SPEAKING -> "Speaking"
            v.connected -> if (v.quality == ConnectionQuality.POOR) "Weak connection" else "Listening"
            else -> "Tap to talk"
        }
    }
}

import SwiftUI
import GraineInApp
 
struct CallBar: View {
    @ObservedObject private var voice = GraineInApp.shared.voice
 
    var body: some View {
        HStack {
            Text(status).accessibilityAddTraits(.updatesFrequently)
            Spacer()
            Button(voice.connected ? (voice.muted ? "Unmute" : "Mute") : "Talk") {
                voice.connected ? voice.setMuted(!voice.muted) : voice.start()
            }
            Button("End the call") { voice.end() }.disabled(!voice.connected && !voice.connecting)
        }
        .onAppear { voice.attach() }              // the engine, idle — in the app's key window
    }
 
    private var status: String {
        if voice.callFailed { return "Couldn’t connect · tap to retry" }
        if voice.reconnecting || voice.connectStage == .retrying || voice.connectStage == .switching { return "Reconnecting…" }
        if !voice.ready || voice.connecting { return voice.slowConnect ? "Still connecting…" : "Connecting…" }
        switch voice.phase {
        case .thinking: return "Thinking…"
        case .speaking: return "Speaking"
        default: return voice.connected ? (voice.quality == .poor ? "Weak connection" : "Listening") : "Tap to talk"
        }
    }
}
 
final class MicWatcher: GraineListener {          // every method has a default; implement what you need
    func onMicDenied(reason: String) { /* explain, and offer Settings */ }
    func onEnded() { /* close the call UI a second later */ }
}
// GraineInApp.shared.addListener(micWatcher) — listeners are held weakly, so keep a reference

MaterialApp(
  builder: (context, child) => GraineEngine(child: child!),   // the engine; no GraineAgentBar
  home: const HomeScreen(),
);
 
class CallBar extends StatelessWidget {
  const CallBar({super.key});
 
  @override
  Widget build(BuildContext context) {
    final voice = GraineInApp.instance.voice;
    return ListenableBuilder(
      listenable: voice,
      builder: (context, _) => Row(children: [
        Expanded(child: Text(_status(voice), semanticsLabel: _status(voice))),
        TextButton(
          onPressed: () => voice.connected ? voice.setMuted(!voice.muted) : voice.start(),
          child: Text(voice.connected ? (voice.muted ? 'Unmute' : 'Mute') : 'Talk'),
        ),
        TextButton(onPressed: voice.end, child: const Text('End the call')),
      ]),
    );
  }
 
  String _status(GraineVoice v) {
    if (v.micDenied) return 'Microphone is off for this app';
    if (v.callFailed) return 'Couldn’t connect · tap to retry';
    if (v.reconnecting || v.connectStage == ConnectStage.retrying || v.connectStage == ConnectStage.switching) return 'Reconnecting…';
    if (!v.ready || v.connecting) return v.slowConnect ? 'Still connecting…' : 'Connecting…';
    if (v.connected) return v.agentSpeaking ? 'Speaking' : (v.quality == ConnectionQuality.poor ? 'Weak connection' : 'Listening');
    return 'Tap to talk';
  }
}

<button id="talk" aria-live="polite">Talk to us</button>
<p id="caption" aria-live="off"></p>
 
<script>
  const GRAINE = "https://www.graine.ai";
  const KEY = "pk_live_…";                       // Agent → Embed & Widgets
  let frame, state = { connected: false, connecting: false };
 
  const send = (type, extra) => frame?.contentWindow?.postMessage({ type, ...extra }, GRAINE);
  const say = (text) => { document.getElementById("talk").textContent = text; };
 
  async function boot() {
    const s = await fetch(GRAINE + "/api/embed/session", {
      method: "POST", headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ publishableKey: KEY }),
    }).then((r) => r.json());
    const transport = s.appearance?.audioTransport === "rtc" ? "rtc" : "ws";
 
    // Invisible but laid out: a frame with no box may have its audio suspended.
    frame = document.createElement("iframe");
    frame.src = `${GRAINE}/embed/${s.webcallAgentId || s.agentId}` +
      `?mode=voice&embed=1&idle=1&transport=${transport}&pk=${encodeURIComponent(KEY)}`;
    frame.allow = "microphone; autoplay";
    frame.title = "Voice assistant";
    Object.assign(frame.style, { position: "fixed", bottom: "0", left: "0", width: "1px", height: "1px",
      opacity: "0", border: "0", pointerEvents: "none" });
    document.body.appendChild(frame);
  }
 
  window.addEventListener("message", async (e) => {
    if (e.origin !== GRAINE || e.source !== frame?.contentWindow) return;   // only the engine
    const m = e.data || {};
    switch (m.type) {
      case "graine:need-ticket": {                 // vouch for your site, from your origin
        const t = await fetch(GRAINE + "/api/embed/ticket", {
          method: "POST", headers: { "Content-Type": "application/json" },
          body: JSON.stringify({ publishableKey: KEY }),
        }).then((r) => (r.ok ? r.json() : null)).catch(() => null);
        send("graine:ticket", t ? { ticket: t.ticket, wsUrl: t.wsUrl } : { ticket: null });
        break;
      }
      case "graine:ready":    send("graine:warm"); break;               // register ahead of the tap
      case "graine:call":     state = m; say(m.connected ? "End the call" : m.connecting ? "Connecting…" : "Talk to us"); break;
      case "graine:progress":
        if (m.stage === "retrying" || m.stage === "switching") say("Reconnecting…");
        if (m.stage === "failed") say("Couldn’t connect · tap to retry");
        break;
      case "graine:caption":  document.getElementById("caption").textContent = m.text; break;
      case "graine:mic-denied": say("Allow the microphone to talk"); break;
      case "graine:ended":    setTimeout(() => say("Talk to us"), 900); break;
    }
  });
 
  document.getElementById("talk").onclick = () =>
    send(state.connected || state.connecting ? "graine:end-call" : "graine:start-call");
 
  boot();
</script>