1. Get started
  2. React UI kit

Get started with the React UI kit

The React UI kit is a library that you can add to your new or existing React application. The UI kit consists of various UI components for the Weavy apps . In contrast to the JS UI kit which uses iframes to display server rendered HTML, the React UI kit uses the Web API to communicate with the Weavy environment.

See also: React UI kit reference

Prerequisites

Getting started

This guide explains how to install the React UI kit and add Weavy chat functionality to your React application.

1. Installation

Install the React UI kit from npm (you can also clone the open-source weavy-uikit-react repo and build it yourself).

npm install @weavy/uikit-react

2. Add the <Chat> component

Next, add the <Chat> component to your React app. The <Chat> is a UI kit component from the @weavy/uikit-react library. (note that that Weavy UI kit must be wrapped in a <WeavyProvider> component).

In your app.tsx or wherever you would like to add the Weavy Chat:

import React from 'react';
import { WeavyClient, WeavyProvider, Chat } from '@weavy/uikit-react';

const weavyClient = new WeavyClient({ 
   url: "{WEAVY_ENVIRONMENT_URL}", 
   tokenFactory: async () => "{ACCESS_TOKEN}"
});

function App() {
   return (
       <div className="App">
           <WeavyProvider client={weavyClient}>
               <Chat uid="demochat" />   
           </WeavyProvider>
       </div>
   )
}

export default App;

3. Get a user access token

The tokenFactory should return a valid access_token for a user in your application. In this quickstart, we simply call the Weavy API to create a Weavy user. The response will contain an access_token that we can use.

curl -H "Authorization: Bearer {WEAVY_APIKEY}" -H "Content-Type: application/json" {WEAVY_ENVIRONMENT_URL}/api/users/demouser/tokens -d "{'name': 'Demo User', 'expires_in': 7200}"

Example of creating a user and get an user access token with the Weavy API

Replace the {WEAVY_APIKEY} and {WEAVY_ENVIRONMENT_URL} with a Api Key and url from your your Weavy account environment. The api request above will return an user access token for the user with the unique id demouser. If the user doesn't exist in the Weavy environment, the user is created.

In the React code snippet above, replace {WEAVY_ENVIRONMENT_URL} with the url to your Weavy account environment and {ACCESS_TOKEN} with the token you get in response to the Weavy API request.

Please note that the tokenFactory should always return an access token for the signed in user in your application. We highly recommend that the tokenFactory function calls an endpoint on your backend which in turn requests an access token from the Weavy environment.

4. Init the app

Before you can use an app you must initialize the app in the backend. This is done from your backend using the API key. This initialization will create the app if needed and also allows you to add the demouser to the app.

curl -H "Authorization: Bearer {WEAVY_APIKEY}" -H "Content-Type: application/json" {WEAVY_ENVIRONMENT_URL}/api/apps/init -d "{ app: { uid: 'demochat', name: 'Demo chat', type: 'chat' }, user: { uid: 'demouser' } }"

Example of initializing an app and adding a user with the Weavy API

Once the initialization has been done, the Chat component with uid demochat can be loaded and used by React.

5. Add the stylesheet

Import the weavy.css to your root app component.

import "@weavy/uikit-react/dist/css/weavy.css";

6. Run the app

Start your React app. You should see the Weavy Chat component rendering the demochat conversation.

Weavy Docs