This tutorial will show how to add Weavy to your web app using our UIKit built with web components.
The final product will be our chat component rendered in your web app.
Have your project ready, and let's get started.
We're adding our group chat component to your web app using out UIKit.
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 the backend URL and an API key to communicate with Weavy.
<script> element is the easiest way to add Weavy to your application as it automatically registers all components, and you can start using Weavy directly. Just add the following <script> element to load the UIKit directly from your Weavy backend.head of your page
<script src="WEAVY_URL/uikit-web/weavy.js"></script>
Replace WEAVY_URL with your backend URL.
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.This will return an access token - copy and paste the value below.
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.
head
<!DOCTYPE html>
<html>
<head>
<script src="WEAVY_URL/uikit-web/weavy.js"></script>
<script>
const weavy = new Weavy();
weavy.url = "WEAVY_URL";
weavy.tokenFactory = async (refresh) => "*******ACCESSTOKEN*******";
</script>
</head>
<body>
<wy-chat uid="weavy-chat"></wy-chat>
</body>
</html>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 web 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.