Polaris App Home — App Bridge

Reference for the App Bridge surface inside polaris-app-home: the useAppBridge React hook, all shopify.* API namespaces, and the two App Bridge web components that don't validate as JSX (<s-app-nav>, <s-app-window>). Save bar is documented end-to-end here (declarative form attribute + programmatic API).

When to use

YES: Code calls a shopify.* API (toast, modal, save bar, scanner, idToken, picker, scopes, intents, web vitals, POS). YES: Code uses useAppBridge() from @shopify/app-bridge-react. YES: Adding <s-app-nav> (top-of-app navigation) or <s-app-window> (embedded iframe). YES: Setting up a save bar (<form data-save-bar>) or programmatic save bar control. NO: Writing Polaris <s-page>, <s-section>, <s-button>, etc. markup — use polaris-app-home-web-components. NO: Title bar — title bar is configured via <s-page> slots in polaris-app-home-web-components (there is no shopify.titleBar namespace).

Instructions

1. Find the API / hook / component in the appendix below. If missing, route through shopify-dev-mcp → search_docs_chunks with api_name: "polaris-app-home" and a doc-path hint (e.g. "save bar API", "resource picker", "useAppBridge").
2. Write code following the Rules.
3. Validation caveat: validate_component_codeblocks does NOT type-check App Bridge web components in JSX. <s-app-nav>, <s-app-window>, and <s-link rel="home"> will fail JSX validation with Property 's-app-nav' does not exist on type 'JSX.IntrinsicElements'. Treat these specific failures as expected, not errors. Polaris <s-*> markup in the same file should still be validated normally.
4. If validate_component_codeblocks flags a Polaris component or prop (not an App Bridge component listed above), fix and re-validate. Max 2 attempts. If still failing, surface the error via the AskUserQuestion tool with options: "Retry with hints", "Skip validation", "Abort". Recommended: "Retry with hints".