I’m embedding Zapier MCP inside an Android WebView (Jetpack Compose).
The integration works sometimes, but intermittently the embed shows a blank screen — even though the console says ✅ mcp.js manually loaded.

@Composable
fun ZapierWebView(viewModel: ZapierViewModel) {
    AndroidView(factory = { context ->
        WebView(context).apply {
            WebView.setWebContentsDebuggingEnabled(true)
            settings.javaScriptEnabled = true
            settings.domStorageEnabled = true
            settings.mixedContentMode = WebSettings.MIXED_CONTENT_ALWAYS_ALLOW
            CookieManager.getInstance().setAcceptThirdPartyCookies(this, true)

            addJavascriptInterface(object {
                @JavascriptInterface
                fun onServerUrlReceived(url: String) {
                    Log.d("ZapierJS", "✅ MCP Server URL received: $url")
                }
            }, "AndroidBridge")

            webViewClient = object : WebViewClient() {
                override fun onPageFinished(view: WebView?, url: String?) {
                    val injectJS = """
                        (function() {
                            const script = document.createElement('script');
                            script.src = "https://mcp.zapier.com/embed/v1/mcp.js";
                            script.onload = () => {
                                const el = document.createElement('zapier-mcp');
                                el.setAttribute('embed-id', 'b21a2771-0250-4171-892d-9c9fd6f1ee63');
                                el.setAttribute('width', '100%');
                                el.setAttribute('height', '100%');
                                document.body.innerHTML = '';
                                document.body.appendChild(el);
                            };
                            document.head.appendChild(script);
                        })();
                    """.trimIndent()
                    view?.evaluateJavascript(injectJS, null)
                }
            }

            loadUrl("https://mcp.zapier.com/")
        }
    })
}

 

Problem

• Sometimes the Zapier MCP embed loads fine.

• Other times, the WebView stays blank.

• The console shows ✅ mcp.js manually loaded, but the <zapier-mcp> component never appears.

• In Chrome DevTools (remote WebView debugging), I occasionally see CSP (Content Security Policy) warnings from https://mcp.zapier.com

  🧠 What I’ve tried

• Using loadDataWithBaseURL("https://mcp.zapier.com/", html, "text/html", "UTF-8", null) instead of loadUrl

• Setting mixedContentMode = MIXED_CONTENT_ALWAYS_ALLOW

• Allowing 3rd-party cookies, DOM storage, and JS windows

• Waiting for page load before injecting
  Still the issue happens intermittently.