# App Bridge
App Bridge is the JavaScript SDK for [Embedded Apps](/docs/apps/admin/embedded-app-home), providing access to data and UI rendering within the Shopify Admin. App Bridge integrates directly into standard Web Platform APIs you're already familiar with, making it easy to build and maintain performant apps on the Shopify platform.

For more information about the motivation behind App Bridge, refer to [Shopify's platform is the Web platform](https://shopify.engineering/shopifys-platform-is-the-web-platform).

## Getting started
If you created your app using the [Shopify Remix App template](https://github.com/Shopify/shopify-app-template-remix), then your app is already set up with App Bridge. If not, you can add App Bridge to your app by including the <code>app-bridge.js</code> script tag and your <code>apiKey</code> as seen in the example.

 The <code>app-bridge.js</code> script loads directly from Shopify and automatically keeps itself up-to-date so you can start building right away.


### Setup

```html
&lt;head&gt;
  &lt;meta name="shopify-api-key" content="%SHOPIFY_API_KEY%" /&gt;
  &lt;script src="https://cdn.shopify.com/shopifycloud/app-bridge.js"&gt;&lt;/script&gt;
&lt;/head&gt;

```


## Your first API call
The following example uses [`Resource Picker`](https://shopify.dev/docs/api/app-bridge-library/apis/resource-picker) to open a UI component that enables users to browse, find, and select products from their store using a familiar experiences.


### Resource Picker

```html
&lt;!DOCTYPE html&gt;

&lt;head&gt;
  &lt;meta name="shopify-api-key" content="%SHOPIFY_API_KEY%" /&gt;
  &lt;script src="https://cdn.shopify.com/shopifycloud/app-bridge.js"&gt;&lt;/script&gt;
&lt;/head&gt;

&lt;body&gt;
  &lt;button id="open-picker"&gt;Open resource picker&lt;/button&gt;
  &lt;script&gt;
    document
      .getElementById('open-picker')
      .addEventListener('click', async () =&gt; {
        const selected = await shopify.resourcePicker({type: 'product'});
        console.log(selected);
      });
  &lt;/script&gt;
&lt;/body&gt;

```


## React
Shopify App Bridge provides a companion npm library for React components and hooks, available at [`@shopify/app-bridge-react`](https://www.npmjs.com/package/@shopify/app-bridge-react).

For more information about the React library, see the documentation on [React components](/docs/api/app-bridge-library/react-components) and [React hooks](/docs/api/app-bridge-library/react-hooks).


### Installation

```shell
npm install @shopify/app-bridge-react

```

```shell
yarn add @shopify/app-bridge-react

```


## TypeScript
Shopify App Bridge provides a companion npm library for TypeScript types, available at [`@shopify/app-bridge-types`](https://www.npmjs.com/package/@shopify/app-bridge-types).

If you're using the [React library](/docs/api/app-bridge-library#react), then the types package is already included.
### Installation
The <code>@shopify/app-bridge-types</code> package can be installed using <code>yarn</code> or <code>npm</code>.
### Installation

```shell
npm install --save-dev @shopify/app-bridge-types

```

```shell
yarn add --dev @shopify/app-bridge-types

```


### Configuration
Adding the <code>@shopify/app-bridge-types</code> package to your <code>tsconfig.json</code> file will enable type checking for all files in your project.
### Configuration

```json
{
  "compilerOptions": {
    "types": ["@shopify/app-bridge-types"]
  }
}

```




## Global variable
After App Bridge is set up in your app, you have access to the <code>shopify</code> global variable. This variable exposes various App Bridge functionalities, such as [displaying toast notifications](/docs/api/app-bridge-library/apis/toast) or [retrieving app configuration details](/docs/api/app-bridge-library/apis/config).

To explore all the functionality available on the <code>shopify</code> global variable:

1. Open the Chrome developer console while in the Shopify admin.

2. Switch the frame context to your app's <code>iframe</code>.

3. Enter <code>shopify</code> in the console.


## Direct API access
You can make requests to the Admin API directly from your app using the standard [web `fetch` API](https://developer.mozilla.org/en-US/docs/Web/API/fetch)!

Any `fetch()` calls from your app to Shopify's Admin GraphQL API are automatically authenticated by default. These calls are fast too, because Shopify handles requests directly.

Direct API access is disabled by default. It can be [enabled](/docs/apps/tools/cli/configuration#admin) in your app TOML file, along with whether you want to use direct API access with [online access](/docs/apps/auth/oauth/access-modes#online-access) or [offline access](/docs/apps/auth/oauth/access-modes#offline-access) mode.


### Query Shopify data

```js
const res = await fetch('shopify:admin/api/graphql.json', {
  method: 'POST',
  body: JSON.stringify({
    query: `
      query GetProduct($id: ID!) {
        product(id: $id) {
          title
        }
      }
    `,
    variables: {id: 'gid://shopify/Product/1234567890'},
  }),
});

const {data} = await res.json();
console.log(data);

```

```js
const res = await fetch('shopify:admin/api/2025-01/graphql.json', {
  method: 'POST',
  body: JSON.stringify({
    query: `
      query GetProduct($id: ID!) {
        product(id: $id) {
          title
        }
      }
    `,
    variables: {id: 'gid://shopify/Product/1234567890'},
  }),
});

const {data} = await res.json();
console.log(data);

```


- [Learn more about API access modes](/docs/apps/tools/cli/configuration): Configuration guide
## Next steps
Now that you've initialized your app, you can use any [Shopify App Bridge features](/docs/api/app-bridge-library/apis).


## Resources



## References
- [Config](https://shopify.dev/docs/api/app-bridge-library/apis/config.txt): Configuration information for your app
- [Environment](https://shopify.dev/docs/api/app-bridge-library/apis/environment.txt): Platform information for embedded apps
- [Resource Fetching](https://shopify.dev/docs/api/app-bridge-library/apis/resource-fetching.txt): Send an authenticated fetch request
- [ID Token](https://shopify.dev/docs/api/app-bridge-library/apis/id-token.txt): Retrieves an ID token from Shopify
- [Loading](https://shopify.dev/docs/api/app-bridge-library/apis/loading.txt): Displays a loading indicator
- [Modal](https://shopify.dev/docs/api/app-bridge-library/apis/modal.txt): Displays an overlay with important information.
- [Navigation](https://shopify.dev/docs/api/app-bridge-library/apis/navigation.txt): Allows you to navigate within and outside of your app
- [Picker](https://shopify.dev/docs/api/app-bridge-library/apis/picker.txt): Opens a Picker in your app
- [POS](https://shopify.dev/docs/api/app-bridge-library/apis/pos.txt): Interact and retrieve data for the POS
- [Print](https://shopify.dev/docs/api/app-bridge-library/apis/print.txt): Print the embedded app page from a mobile device
- [Modal Component](https://shopify.dev/docs/api/app-bridge-library/react-components/modal-component.txt): Displays an overlay with important information.
- [NavMenu Component](https://shopify.dev/docs/api/app-bridge-library/react-components/navmenu-component.txt): Creates a navigation menu for your app.
- [SaveBar Component](https://shopify.dev/docs/api/app-bridge-library/react-components/savebar-component.txt): Display a save bar from your app.
- [TitleBar Component](https://shopify.dev/docs/api/app-bridge-library/react-components/titlebar-component.txt): Populates the title bar for your app.
- [useAppBridge](https://shopify.dev/docs/api/app-bridge-library/react-hooks/useappbridge.txt): Enables you to access the `shopify` global in your app.
- [Resource Picker](https://shopify.dev/docs/api/app-bridge-library/apis/resource-picker.txt): Opens a Resource Picker in your app
- [Save Bar](https://shopify.dev/docs/api/app-bridge-library/apis/save-bar.txt): Display a save bar when a form has unsaved changes.
- [Scanner](https://shopify.dev/docs/api/app-bridge-library/apis/scanner.txt): Use the mobile device's camera to scan barcodes
- [Scopes](https://shopify.dev/docs/api/app-bridge-library/apis/scopes.txt): Manage optional access scopes
- [Share](https://shopify.dev/docs/api/app-bridge-library/apis/share.txt): Share content from your embedded app on a mobile device
- [Support](https://shopify.dev/docs/api/app-bridge-library/apis/support.txt): Register a custom handler for support requests.
- [Toast](https://shopify.dev/docs/api/app-bridge-library/apis/toast.txt): Creates a Toast notification in your app
- [User](https://shopify.dev/docs/api/app-bridge-library/apis/user.txt): Retrieves information about the current user
- [ui-modal](https://shopify.dev/docs/api/app-bridge-library/web-components/ui-modal.txt): Displays an overlay with important information.
- [ui-nav-menu](https://shopify.dev/docs/api/app-bridge-library/web-components/ui-nav-menu.txt): Creates a navigation menu for your app.
- [ui-save-bar](https://shopify.dev/docs/api/app-bridge-library/web-components/ui-save-bar.txt): Display a save bar from your app.
- [ui-title-bar](https://shopify.dev/docs/api/app-bridge-library/web-components/ui-title-bar.txt): Populates the title bar for your app.
- [Web Vitals](https://shopify.dev/docs/api/app-bridge-library/apis/web-vitals.txt): Monitor Web Vitals for your app