This tutorial is based on React v16 or later.
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.
npm install @weavy/uikit-reactWe need an API key to communicate with the Weavy backend.
curl WEAVY_URL/api/users -H "Authorization: Bearer ********************" --json "{ 'uid': 'USER_ID', 'name': 'USER_NAME' }"WEAVY_URL and Bearer ******************** with your backend URL and API key.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 WEAVY_URL/api/users/USER_ID/tokens -H "Authorization: Bearer ********************"WEAVY_URL and Bearer ******************** with your backend URL and API key.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.
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}/>;
}WEAVY_URL and *******ACCESSTOKEN******* with your backend URL and the issued access token.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
Get answers faster with our tailored generative AI. Learn more about how it works
This is a custom LLM for answering your questions. Answers are based on the contents of the documentation and this feature is experimental.
You're not signed in to your Weavy account. To access live chat with our developer success team you need to be signed in.