# Add Intelligems Provider
The [`IntelligemsNextClientsideAppDirectoryProvider`](https://headless.intelligems.io/reference/providers/provider-props) component stores Intelligems data in React Context so hooks and components can access it throughout your app.
### Example Configuration (App Router)
Create a client-only provider wrapper (for example, `app/intelligems-provider.tsx`):
{% hint style="warning" %}
**REQUIRED:** The `activeCurrencyCode` prop is required and must be provided.
{% endhint %}
```tsx
"use client";
import { IntelligemsNextClientsideAppDirectoryProvider } from "@intelligems/headless/next-clientside-app-directory";
export function IntelligemsProvider({
children,
}: {
children: React.ReactNode;
}) {
return (
{children}
);
}
```
Then wrap your root layout:
```tsx
import { IntelligemsProvider } from "./intelligems-provider";
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
{children}
);
}
```
{% hint style="warning" %}
ESM Errors
Depending on the setup of your site, you may encounter an `ERR_REQUIRE_ESM` error when using our package. Try adding the snippet below to `next.config.js` and/or reach out to support.
`transpilePackages: ['@intelligems/headless']`
{% endhint %}