---
title: AppProvider
description: Sets up the Polaris AppProvider and injects the App Bridge script.
api_version: v2
source_url:
  html: 'https://shopify.dev/docs/api/shopify-app-remix/v2/entrypoints/appprovider'
  md: 'https://shopify.dev/docs/api/shopify-app-remix/v2/entrypoints/appprovider.md'
api_name: shopify-app-remix
---

# AppProvider

Sets up the Polaris `AppProvider` and injects the App Bridge script.

This component extends the [`AppProvider`](https://polaris.shopify.com/components/utilities/app-provider) component from Polaris, and accepts all of its props except for `linkComponent`, which is overridden to use the Remix `Link` component.

#### AppProviderProps

Props for the `AppProvider` component.

* **apiKey**

  **string**

  **required**

  The API key for your Shopify app. This is the `Client ID` from the Partner Dashboard.

  When using the Shopify CLI, this is the `SHOPIFY_API_KEY` environment variable. If you're using the environment variable, then you need to pass it from the loader to the component.

* **children**

  **React.ReactNode**

  Inner content of the application

* **features**

  **FeaturesConfig**

  For toggling features

* **i18n**

  **TranslationDictionary | TranslationDictionary\[]**

  The internationalization (i18n) configuration for your Polaris provider.

* **isEmbeddedApp**

  **boolean**

  Whether the app is loaded inside the Shopify Admin. Default is `true`.

* **theme**

  **ThemeName**

Examples

### Examples

* ####

  ##### Description

  Wrap your app in the \`AppProvider\` component and pass in your API key.

  ##### /app/routes/\*\*\\/\*.ts

  ```ts
  import {authenticate} from '~/shopify.server';
  import {AppProvider} from '@shopify/shopify-app-remix/react';

  export async function loader({ request }) {
    await authenticate.admin(request);

    return json({ apiKey: process.env.SHOPIFY_API_KEY });
  }

  export default function App() {
    const { apiKey } = useLoaderData();

    return (
      <AppProvider isEmbeddedApp apiKey={apiKey}>
        <Outlet />
      </AppProvider>
    );
  }
  ```

* ####

  ##### Description

  Pass in a different locale for Polaris to translate its components.

  ##### /app/routes/\*\*\\/\*.ts

  ```ts
  import {authenticate} from '~/shopify.server';
  import {AppProvider} from '@shopify/shopify-app-remix/react';

  export async function loader({ request }) {
    await authenticate.admin(request);

    return json({
      apiKey: process.env.SHOPIFY_API_KEY,
      polarisTranslations: require("@shopify/polaris/locales/fr.json"),
    });
  }

  export default function App() {
    const { apiKey, polarisTranslations } = useLoaderData();

    return (
      <AppProvider apiKey={apiKey} i18n={polarisTranslations}>
        <Outlet />
      </AppProvider>
    );
  }
  ```

***

## Related

[Learn more about App Bridge. - App bridge](https://shopify.dev/docs/api/app-bridge-library)

[Learn more about Polaris. - Polaris](https://shopify.dev/docs/apps/tools/polaris)

***