---
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: v2
api_name: shopify-app-remix
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'
---

# App​Providercomponent

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.

* isEmbeddedApp

  boolean

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

* i18n

  TranslationDictionary | TranslationDictionary\[]

  The internationalization (i18n) configuration for your Polaris provider.

* theme

  ThemeName

* features

  FeaturesConfig

  For toggling features

* children

  React.ReactNode

  Inner content of the application

## Examples

Set up AppProvider

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

Localize Polaris components

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

### 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)