---
title: Quick Start
slug: oms/ZOaw-quick-start
docTags: 
createdAt: 2022-11-07T21:14:19.000Z
---

## Installing

In order to install the necessary Chord packages, follow the guide below on how to configure your package manager to access Chord's packages.

[npm Access for @chordcommerce Packages](docId\:FM833n8oMGr3pWLk8HVPq) 

After completing the steps in the guide above, you can install the package and its peer dependencies:

:::CodeblockTabs
yarn

```shell
yarn add @chordcommerce/react-autonomy @chordcommerce/chord-magic react react-dom react-redux redux
```

npm

```none
npm install @chordcommerce/react-autonomy @chordcommerce/chord-magic react react-dom react-redux redux
```
:::

## Developing

Your application needs to be wrapped in the [Function: ChordProvider](docId\:gnQxgTJO29ortOE2E6mT2) component. `react-autonomy` keeps track of your application state and makes it available to components. For example, what is currently in a user's cart is automatically persisted. `<ChordProvider>` makes the state available throughout your application.

`<ChordProvider>` requires a configuration object with information about your storefront. Here's an example:

::::CodeDrawer{title="<ChordProvider>" isResponseExpanded="false" autoGeneratedAnchorSlug="chordprovider" legacyHash="MB-0Q9CyqHwBZZXDs4xOU"}
:::CodeblockTabsExamples
```javascript
import ChordProvider from '@chordcommerce/react-autonomy'
import MagicClient from '@chordcommerce/chord-magic'

const App = ({ children }) => {
  const magicClient = new MagicClient(process.env.MAGIC_API_KEY)

  return (
    <ChordProvider
      config={{
        brandName: process.env.CHORD_OMS_BRAND_NAME,
        currency: 'USD',
        domain: process.env.CHORD_OMS_API_URL,
        locale: 'en-US',
        omsId: process.env.CHORD_OMS_ID,
        storeId: process.env.CHORD_OMS_STORE_ID,
        tenantId: process.env.CHORD_OMS_TENANT_ID
      }}
      authClient={magicClient}
    >
      {children}
    </ChordProvider>
  )
}
```
:::

:::CodeblockTabsResponses
```javascript
```
:::
::::

The `config` object requires these keys:

| Name        | Type   | Description                                                                                        |
| ----------- | ------ | -------------------------------------------------------------------------------------------------- |
| `brandName` | String | The store's name.                                                                                  |
| `currency`  | String | The store's currency. For example, `USD`.                                                          |
| `domain`    | String | The base URL of the OMS API to use for requests. For example, `https://my-store.assembly-api.com`. |
| `locale`    | String | The store's locale. For example, `en-US`.                                                          |
| `omsId`     | String | A unique identifier generated by Chord during provisioning.                                        |
| `storeId`   | String | A unique identifier generated by Chord during provisioning.                                        |
| `tenantId`  | String | A unique identifier generated by Chord during provisioning.                                        |

Once your application is wrapped in the `<ChordProvider>` component, you can use SDK methods throughout your code. For example, here's a React component for adding an item to the cart:

::::CodeDrawer{title="<AddToCartButton>" isResponseExpanded="false" autoGeneratedAnchorSlug="addtocartbutton" legacyHash="UaZbwQekJgS6ZhfMgvdNF"}
:::CodeblockTabsExamples
```javascript
import { useCart } from '@chordcommerce/react-autonomy'

export default () => {
  const { addToCart } = useCart()
  const onSubmit = ({ sku, quantity }) => {
    addToCart({ sku, quantity })
  }
}
```
:::

:::CodeblockTabsResponses
```javascript
```
:::
::::