Quickstart

SyncStream is the easiest way to bring Spotify & Apple Music into your app.

Prerequisites

Before integrating SyncStream, ensure your project meets the following requirements:

• React version 18 or higher

• TypeScript version 5 or higher

Installation

You can install SyncStream using npm or yarn. Choose your preferred package manager and run the following command:

npm

npm install @syncstreamai/syncstream

yarn

yarn add @syncstreamai/syncstream

Set Up Your App with SyncStream

After installing the package, import the SyncstreamProvider component into your project and wrap your app with it. The SyncStreamProvider should wrap any component or page that will use SyncStream. It is recommended to place it as close to the root of your application as possible.

Example NextJS or Create React App:

NextJS

'use client';

import { OneTap, SyncstreamProvider } from "@syncstreamai/syncstream";
import "@syncstreamai/syncstream/dist/index.css";

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

React

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"
      signInRequired
    >
      <OneTap spotifyDefaultLink="spotify:artist:2hlmm7s2ICUX0LVIhVFlZQ" />
    </SyncstreamProvider>
  );
}

Property Descriptions

SyncstreamProvider Component

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

Property	Description
clientId	(Required) Your app or artist's client ID assigned by your SyncStream point-of-contact.
signInRequired	(Optional) Use this to add a blur overlay and prevent the user from accessing the site without first connecting a streaming provider.

OneTap Component In the examples above, notice that the OneTap component takes two properties:

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

The URI, or Uniform Resource Indicator, is a unique code that identifies a specific element on Spotify or Apple Music, such as an artist, album, track, playlist, or user. Click here to convert any Spotify song or album URL into a URI. Please refer to the Spotify documentation for more information about this.

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!