quickstart.md

Quickstart

The Syncstream-ai is the easiest way to onboard your users to web3 in your React App.\

0. Prerequsites

In order to integrate the syncstream-ai, your project must be on:

• a minimum React version of 18
• a minimum TypeScript version of 5

1. Installation​

{% tabs %} {% tab title="npm" %} npm install syncstream-ai {% endtab %}

{% tab title="yarn" %} yarn add syncstream-ai {% endtab %} {% endtabs %}

2. Set up your app with syncstream-ai

Once you install package, import the SyncstreamProvider component into your project, and wrap your app with it.

Concretely, the SyncstreamProvider must wrap any component or page that will use the syncstream-ai. It is generally recommended to render it as close to the root of your application as possible.

For example, in a NextJS or Create React App project, you may wrap your components like so:

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

'use client';

import { OneTap, SyncstreamProvider } from "syncstream-ai";
import "syncstream-ai/dist/index.css";

export default function App() {
  return (
    <SyncstreamProvider
      clientId="EXAMPLE_CLIENT_ID"
    >
      <OneTap contextUri="spotify:artist:2hlmm7s2ICUX0LVIhVFlZQ" />
    </SyncstreamProvider>
  );
}

{% endtab %}

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

import React from 'react';
import { OneTap, SyncstreamProvider } from "syncstream-ai";
import "syncstream-ai/dist/index.css";

export default function App() {
  return (
    <SyncstreamProvider
      clientId="EXAMPLE_CLIENT_ID"
    >
      <OneTap contextUri="spotify:artist:2hlmm7s2ICUX0LVIhVFlZQ" />
    </SyncstreamProvider>
  );
}

{% endtab %} {% endtabs %}

In the examples above, notice that the SyncstreamProvider component takes one property:

Property	Description
clientId	(Required) your app clientID.

In the examples above, notice that the OneTap component takes 2 properties:
Please refer to the Spotify documentation to learn more about this.

Property	Description
contextUri	Optional. Spotify URI of the context to play. Valid contexts are albums, artists & playlists. {context_uri:"spotify:album:1Je1IMUlBXcx1Fz0WE7oPT"}
uris	Optional. A JSON array of the Spotify track URIs to play. For example: {"uris": ["spotify:track:4iV5W9uYEdYUVa79Axb7Rh", "spotify:track:1301WleyT98MSxVHPZCA6M"]}

3. Just use syncstream-ai! 🎉​

Once you've wrapped your app with the SyncstreamProvider, you can now use the it throughout your components and pages via the OneTap!