---
title: AppProvider
description: Sets up your app to look like the admin
api_version: v2
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
api_name: shopify-app-react-router
---

# App​Provider

Sets up your app to look like the admin

Adds Polaris Web components and the App Bridge script to the route, using the `apiKey` you provide.

#### AppProviderProps

Props for the `AppProvider` component.

* **api​Key**

  **string**

  **required**

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

  The App Bridge script will be included on the page using this API key. 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**

  The children to render.

Examples

### Examples

* ####

  ##### Description

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

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

  ```ts
  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 apiKey={apiKey}>
        <Outlet />
      </AppProvider>
    );
  }
  ```

***

## Related

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

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

***