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
- A Weavy account and an environment up and running.
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 thetokenFactory
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.