---
title: AppProvider
description: >+
  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.









api_version: v4 latest
api_name: shopify-app-remix
source_url:
  html: >-
    https://shopify.dev/docs/api/shopify-app-remix/latest/entrypoints/appprovider
  md: >-
    https://shopify.dev/docs/api/shopify-app-remix/latest/entrypoints/appprovider.md
---

# App​Provider

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

### FeaturesConfig

* \[key: string]

  ```ts
  boolean | undefined
  ```

* dynamicTopBarAndReframe

  ```ts
  boolean
  ```

```ts
export interface FeaturesConfig {
    dynamicTopBarAndReframe?: boolean;
    [key: string]: boolean | undefined;
}
```

### TranslationDictionary

* \[key: string]

  ```ts
  string | TranslationDictionary
  ```

```ts
interface TranslationDictionary {
    [key: string]: string | TranslationDictionary;
}
```

## Examples

### Examples

* #### Set up AppProvider

  ##### Description

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

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

  ```typescript
  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>
    );
  }
  ```

* #### Localize Polaris components

  ##### Description

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

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

  ```typescript
  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)