Get started
Add Weavy to your React app
Prerequisites
This tutorial is based on React v16 or later.
Weavy supports regular React projects as well as server rendered projects (SSR), such as Next.js using React Server Components.
This tutorial is based on React v16 or later.
Weavy supports regular React projects as well as server rendered projects (SSR), such as Next.js using React Server Components.
We're adding our group chat component to your React app.
Want to see how it looks? Well, you're in luck - you can try it out right here with all the bells and whistles.
We need an API key to communicate with the Weavy backend.
Before you can work with Weavy, you'll need to sign up for an account or sign into your existing account.
npm install @weavy/uikit-react
curl WY_BACKEND_URL/api/users -H "Authorization: Bearer WY_API_*****************" --json "{ 'uid': 'USER_ID', 'name': 'USER_NAME' }"
WY_BACKEND_URL
with the URL to your Weavy backend.WY_API_*****************
with an API key for your Weavy backend.USER_ID
with the id of the Weavy user.USER_NAME
with the name of the Weavy user.You can find this information in your Weavy account.
You haven't selected an API key. If you do - code snippets, scripts and files you download will automatically be updated with API key and backend URL.
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.
curl -X POST WY_BACKEND_URL/api/users/USER_ID/tokens -H "Authorization: Bearer WY_API_*****************"
WY_BACKEND_URL
with the URL to your Weavy backend.WY_API_*****************
with an API key for your Weavy backend.USER_ID
with the id of the Weavy user.You can find this information in your Weavy account.
You haven't selected an API key. If you do - code snippets, scripts and files you download will automatically be updated with API key and backend URL.
Issuing an access token using Curl is for demo purposes only. Access tokens should be created from your backend; read more about authentication and access tokens here.
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.
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}/>;
}
WY_BACKEND_URL
with the URL to your Weavy backend.USER_ACCESS_TOKEN
with an access token for the Weavy user.You can find this information in your Weavy account.
You haven't selected an API key. If you do - code snippets, scripts and files you download will automatically be updated with API key and backend URL.
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.
We need an API key to communicate with Weavy for authentication, etc
To access live chat with our developer success team you need a Weavy account.