# Web - TypeScript/React

Follow this step-by-step tutorial on how to use CelebritySDK.

[API Documentation](https://celebrity-api-doc.web.app/)

## Requirements <a href="#requirements" id="requirements"></a>

* A Sceenic account
* Code Editor( [WebStorm](https://www.jetbrains.com/webstorm/download/), [VS Code](https://code.visualstudio.com/download))
* NPM token for Celebrity SDK
* [Node >= 8.10 and npm >= 5.6](https://nodejs.org/en/)

## Create a project <a href="#create-a-project" id="create-a-project"></a>

To create a project we recommended using the following stack: React + TypeScript.

* Create an empty React + Typescript project

```
npx create-react-app my-app --template typescript  
```

## Add Celebrity SDK library to your project <a href="#add-the-sync-sdk-library-to-your-project" id="add-the-sync-sdk-library-to-your-project"></a>

* Create ***.npmrc*** file. In the project’s root folder
* Put your `Access Token` inside `//registry.npmjs.org/:_authToken=YOUR_ACCESS_TOKEN`.
* Install Celebrity SDK via `npm i @sscale/celebritysdk`.

For more information on NPM installation look [here](/celebrity-sdk/tutorials/web/installing-the-npm-package.md).

## Basic usage

### Participant

* Add the following import:

```
 import { ParticipantAPI } from '@sscale/celebritysdk';
```

* Create participant API instance:

```
const participantAPI = new ParticipantAPI();
```

* Pass Watch Together access token ([reference](/watch-together-sdk/sscale-confluence-api-references/cluster-authentication-service-reference-cas-2.md)) to participant API instance:

```
participantAPI.setToken(WT_TOKEN);
```

* Invite/check/uninvite celebrity to/from your live Watch Together session created using WT\_TOKEN:

```
participantAPI.inviteCelebrity({})           
              .then(() => {})           
              .catch(e => {});
              
participantAPI.isCelebrityInvited()           
              .then((isInvited) => {})           
              .catch(e => {});

participantAPI.uninviteCelebrity()
              .then(() => {})           
              .catch(e => {});
```

### Celebrity

* Add the following import:

```
import { CelebrityAPI } from '@sscale/celebritysdk';
```

* Create celebrity API instance:

```
const celebrityAPI = new CelebrityAPI();
```

* Login with username/password provided by Sceenic:

```
celebrityAPI.login(username, password)            
            .then(() => {})            
            .catch(e => {});
```

* Subscribe to the list of available video/audio chat sessions:

```
celebrityAPI.subscribe(    
    ({total, sessions}) => {},    
    (e) => {}
);
```

* Unsubscribe/logout:

```
celebrityAPI.unsubscribe();

celebrityAPI.logout();
```

\
**Have a look at the API Documentation** [**here**](https://celebrity-api-doc.web.app/)**.**

## **Support**

Need technical support? Contact us at <Support@sceenic.co>.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://documentation.sceenic.co/celebrity-sdk/tutorials/web/web-typescript-react.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.