Skip to content


Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time


React based UI kit for Weavy.


npm install @weavy/uikit-react

Minimum requirements

  • React >= 18.0.0
  • Weavy Backend >= 11.0.0

Gettting started

Make sure you have a Weavy backend up and running in order to test any of the frontend examples. To quickly get a backend up and running you can register for a free account on
That is the easiest and quickest way to get started and does not require you to deploy your own backend.

The React UI kit is dependant of the theme library that are shared by all our ui kits.

In your project directory, run:

npm install @weavy/themes

The Weavy UI kit components that you decide to use must be wrapped in the WeavyProvider component. The WeavyProvider handles all the common functionality for all the Weavy React UI components.

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

export default function App() {
   return (        
           <!-- Weavy components goes here -->

Adding the Messenger component

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

If you registered for a free account on, you can use the demo/test JWT token generated for you and use it in the getToken below and just return it as a string. But in a real application, this is typically fetched from a backend enpoint or similar that returns a valid JWT for your currently signed in user.

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

const getToken = () => {
   return new Promise(function (resolve, reject) {
       // typically an api call to your backend which returns a JWT
       var token = getTokenFromSomewhere();
       if (token) {
       } else {
           reject("Failed to retrieve token");

const weavyClient = new WeavyClient({ url: "https://url-to-weavy.backend", tokenFactory: getToken})

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

export default App;

Add the stylesheet

In your index.tsx (or index.js if you are not using TypeScript) file, add the following

// ---------------------------------------------------------
// add the following line of code
// ---------------------------------------------------------
import "@weavy/themes/dist/weavy-default.css";  
// ---------------------------------------------------------

const container = document.getElementById('root');
const root = createRoot(container!);
root.render(<App />);

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.


To learn more about all the different components that you can use and how to setup the authentication flow, head over to our Documentation site