---
title: Function: ChordProvider
slug: chord-ui/function-chordprovider
docTags: 
createdAt: 2023-11-06T15:03:31.904Z
---

[react-autonomy](docId\:zoZ6W56ubpPACr0PO0GLS).ChordProvider

▸ **ChordProvider**(`props`, `context?`): `ReactElement`\<`any`, `any`>

React context provider for Chord services. This component is mainly a wrapper
for a [Redux](https://redux.js.org/) store that powers Chord's analytics,
cart, checkout, subscription and user models.



```javascript
import ChordProvider from '@chordcommerce/react-autonomy'
import { StytchClient } from '@chordcommerce/chord-stytch'
import { StytchProvider } from '@stytch/nextjs'

const App = ({ children }) => {
  const authClient = new StytchClient({
    apiKey: process.env.STYTCH_API_KEY,
  })

  return (
    <ChordProvider
      config={{
        domain: process.env.CHORD_OMS_DOMAIN,
        brandName: process.env.CHORD_OMS_BRAND_NAME,
        storeId: process.env.CHORD_OMS_STORE_ID,
        omsId: process.env.CHORD_OMS_ID,
        tenantId: process.env.CHORD_OMS_TENANT_ID,
        storeSlug: process.env.CHORD_OMS_STORE_SLUG,
        productUrlFormatter: (product) => {
          return product.url || `https://example.com/${product.variant?.slug}`
        }
      }}
      authClient={authClient}
    >
      <StytchProvider stytch={authClient.getServiceClient()}>
        {children}
      </StytchProvider>
    </ChordProvider>
  )
}
```

### Parameters

| Name       | Type                                                                                             |
| ---------- | ------------------------------------------------------------------------------------------------ |
| `props`    | `PropsWithChildren`\<`PropsWithChildren`\<[`ChordProviderProps`](docId\:FvyfILkytcWHFpJ-4yxsT)>> |
| `context?` | `any`                                                                                            |

### Returns

`ReactElement`\<`any`, `any`>

### Defined in

node\_modules/@types/react/index.d.ts:543