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 Drop-in UI which uses iframes to display server rendered HTML, the React UI kit uses the Web API to communicate with the Weavy backend.
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 <Messenger>
component
Next add the <Messenger>
component to your React app. The <Messenger>
is a component that combines some of the other UI kit
components (<Conversation>
and <ConversationList>
) that is exposed by 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 Messenger:
import React from 'react';
import { WeavyClient, WeavyProvider, Messenger } from '@weavy/uikit-react';
const weavyClient = new WeavyClient({
url: "{WEAVY_BACKEND_URL}",
tokenFactory: async () => "{ACCESS_TOKEN}"
});
function App() {
return (
<div className="App">
<WeavyProvider client={weavyClient}>
<Messenger />
</WeavyProvider>
</div>
)
}
export default App;
3. Configure url and authentication
In the code snippet above replace {WEAVY_BACKEND_URL}
with the url to your Weavy backend
and implement the token factory function that provides Weavy with an access_token
for acting on behalf of your authenticated user.
4. Run the app
Start your React app. You should see the Weavy Messenger component rendering a Conversation list and a Conversation with the currently selected conversation.