# \<SyncstreamProvider />

{% tabs %}
{% tab title="NextJS" %}

<pre class="language-tsx"><code class="lang-tsx"><strong>'use client';
</strong>
import { OneTap, SyncstreamProvider } from "@syncstreamai/syncstream";
import "@syncstreamai/syncstream/dist/index.css";

export default function App() {
  return (
    &#x3C;SyncstreamProvider
      campaignId="EXAMPLE_CAMPAIGN_ID"
      signInRequired
    >
      &#x3C;OneTap spotifyDefaultLink="spotify:artist:2hlmm7s2ICUX0LVIhVFlZQ" />
    &#x3C;/SyncstreamProvider>
  );
}
</code></pre>

{% endtab %}

{% tab title="Create React App" %}

```tsx
import React from 'react';
import { OneTap, SyncstreamProvider } from "@syncstreamai/syncstream";
import "@syncstreamai/syncstream/dist/index.css";

export default function App() {
  return (
    <SyncstreamProvider
      campaignId="EXAMPLE_CAMPAIGN_ID"
      signInRequired
    >
      <OneTap spotifyDefaultLink="spotify:artist:2hlmm7s2ICUX0LVIhVFlZQ" />
    </SyncstreamProvider>
  );
}
```

{% endtab %}
{% endtabs %}

`SyncstreamProvider` component takes 2 properties:

<table><thead><tr><th width="332.5">Property</th><th>Description</th></tr></thead><tbody><tr><td>campaignId</td><td>(Required) Your campaign ID assigned by <a href="https://chat.recoupable.com/">Recoup</a>.</td></tr><tr><td>signInRequired</td><td>Optional. use this to add a blur overlay and prevent the user from accessing the site without first connecting a streaming provider.</td></tr></tbody></table>