This guide 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.
Before you can work with Weavy, you'll need to sign up for an account or sign into your existing account.
<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="WY_BACKEND_URL/uikit-web/weavy.js"></script>
WY_BACKEND_URLwith the URL to your Weavy backend.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.
curl WY_BACKEND_URL/api/users -H "Authorization: Bearer WY_API_*****************" --json "{ 'uid': 'USER_ID', 'name': 'USER_NAME' }"WY_BACKEND_URLwith 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_URLwith 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.
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_BACKEND_URL";
weavy.tokenFactory = async (refresh) => "USER_ACCESS_TOKEN";
</script>
</head>
<body>
<wy-chat uid="weavy-chat"></wy-chat>
</body>
</html>WY_BACKEND_URLwith 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 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.
To access live chat with our developer success team you need a Weavy account.