---
title: AppProvider
description: |+
  Sets up your app to look like the admin

  Adds Polaris Web components to the route. If embedded is true and apiKey is provided, then the App Bridge script will be added to the page.














api_version: v1 latest
api_name: shopify-app-react-router
source_url:
  html: https://shopify.dev/docs/api/shopify-app-react-router/latest/entrypoints/appprovider
  md: https://shopify.dev/docs/api/shopify-app-react-router/latest/entrypoints/appprovider.md
---

# App​Providercomponent

Sets up your app to look like the admin

Adds Polaris Web components to the route. If embedded is true and apiKey is provided, then the App Bridge script will be added to the page.

## AppProviderProps

Props for the `AppProvider` component.

`NonEmbeddedProps | EmbeddedProps`

### EmbeddedProps

* 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

  required

* embedded

  true

  required

  If this route should be rendered inside the Shopify admin.

  Setting this to true will include the App Bridge script on the page. If true and the route is loaded outside the Shopify admin, then the user will be redirected to the Shopify admin.

  Setting this to false will not include the App Bridge script on the page.

### NonEmbeddedProps

* children

  React.ReactNode

  required

* embedded

  false

  If this route should be rendered inside the Shopify admin.

  Setting this to false means only Polaris Web components will be added to the route, not App Bridge.

  Setting this to true will include the App Bridge script on the page.

### NonEmbeddedProps

* children

  ```ts
  React.ReactNode
  ```

* embedded

  If this route should be rendered inside the Shopify admin. Setting this to false means only Polaris Web components will be added to the route, not App Bridge. Setting this to true will include the App Bridge script on the page.

  ```ts
  false
  ```

```ts
interface NonEmbeddedProps extends BaseProps {
  /**
   * If this route should be rendered inside the Shopify admin.
   *
   * Setting this to false means only Polaris Web components will be added to the route, not App Bridge.
   *
   * Setting this to true will include the App Bridge script on the page.
   *
   * {@link https://shopify.dev/docs/apps/admin/embedded-app-home}
   */
  embedded?: false;
}
```

### EmbeddedProps

* apiKey

  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.

  ```ts
  string
  ```

* children

  ```ts
  React.ReactNode
  ```

* embedded

  If this route should be rendered inside the Shopify admin. Setting this to true will include the App Bridge script on the page. If true and the route is loaded outside the Shopify admin, then the user will be redirected to the Shopify admin. Setting this to false will not include the App Bridge script on the page.

  ```ts
  true
  ```

```ts
interface EmbeddedProps extends BaseProps {
  /**
   * If this route should be rendered inside the Shopify admin.
   *
   * Setting this to true will include the App Bridge script on the page.
   * If true and the route is loaded outside the Shopify admin, then the user will be redirected to the Shopify admin.
   *
   * Setting this to false will not include the App Bridge script on the page.
   *
   * {@link https://shopify.dev/docs/apps/admin/embedded-app-home}
   */
  embedded: true;
  /**
   * 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.
   */
  apiKey: string;
}
```

## Examples

Set up AppProvider for an embedded route

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

Set up AppProvider for a non-embedded route

Add Polaris web components to the route, without adding the App Bridge script.

### Examples

* #### Set up AppProvider for an embedded route

  ##### Description

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

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

  ```typescript
  import {useLoaderData} from 'react-router';
  import {authenticate} from '~/shopify.server';
  import {AppProvider} from '@shopify/shopify-app-react-router/react';

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

    return { apiKey: process.env.SHOPIFY_API_KEY };
  }

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

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

* #### Set up AppProvider for a non-embedded route

  ##### Description

  Add Polaris web components to the route, without adding the App Bridge script.

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

  ```typescript
  import {AppProvider} from '@shopify/shopify-app-react-router/react';

  export default function App() {
    return (
      <AppProvider embedded={false}>
        <Outlet />
      </AppProvider>
    );
  }
  ```

## Related

[Learn more about Polaris Web components. - Polaris Web components](https://shopify.dev/docs/api/app-home/using-polaris-components)

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