<iframe src="https://www.googletagmanager.com/ns.html?id=GTM-PP7S83N" height="0" width="0" style="display:none;visibility:hidden">
Get started

Add Weavy to your React app

This guide will show how to add Weavy to your React app and render our chat component. Have your project ready, and let's get started.

1. Weavy API Key

We need an API key to communicate with the Weavy backend.

2. Install UIKit React

Weavy has a dedicated UIKit for React with regular React components and additional React hooks for easy configuration and usage.
Run npm in your terminal 
npm install @weavy/uikit-react

3. Create a demo user

For this tutorial, we're creating a demo user, and for that, we need a display name (what the end user sees) and a unique identifier.
Now it's time to create the user in Weavy through the API using Curl with the information provided.
Copy and paste this into a terminal window and run it 
curl WY_BACKEND_URL/api/users -H "Authorization: Bearer WY_API_*****************" --json "{ 'uid': 'USER_ID', 'name': 'USER_NAME' }"

4. Issue access token

For our chat component to know who we're rendering for, we must issue an access token that we'll pass on to the UIKit.

Copy and paste this into a terminal window and run it 
curl -X POST WY_BACKEND_URL/api/users/USER_ID/tokens -H "Authorization: Bearer WY_API_*****************"
This will return an access token - copy and paste the value below.

5. Add chat component

Now, it's time to add the chat component to your React app using the access token we just generated.

All web components in the Weavy UIKit are available as React components but with tag names adapted to the React framework, for example <WyChat> instead of <wy-chat></wy-chat>. Property binding for attributes using prop={value} syntax may be used normally just as expected.

Use this snippet to add Weavy to your React project 
import { useWeavy, WyChat } from "@weavy/uikit-react";

export function WeavyComponent() {
  useWeavy({
    url: "WY_BACKEND_URL",
    tokenFactory: async () => "USER_ACCESS_TOKEN"
  });
  
  const uid = "weavy-chat";
  return <WyChat uid={uid}/>;
}

6. Done!

You should now have a group chat component up and running in your React app. This tutorial's goal was to quickly introduce the concepts of Weavy, especially the understanding of creating users and issuing access tokens.

Now it's time to start building for real - follow our recommended next steps below.

On this page
Support

To access live chat with our developer success team you need a Weavy account.

Sign in or create a Weavy account