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

Add Weavy to your React app

This tutorial 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. 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

2. Weavy API Key

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

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 WEAVY_URL/api/users -H "Authorization: Bearer ********************" --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 WEAVY_URL/api/users/USER_ID/tokens -H "Authorization: Bearer ********************"
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.
Use this snippet to add Weavy to your React project 
import { useWeavy, WyChat } from "@weavy/uikit-react";

export function WeavyComponent() {
  useWeavy({
    url: "WEAVY_URL",
    tokenFactory: async () => "*******ACCESSTOKEN*******"
  });
  
  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
Next

What's next?

Ask AI
Support

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

Sign in or create a Weavy account