This tutorial will show how to add Weavy to your Vue app using our UIKit, built with web components. The final product will be our chat component rendered in your app.
Have your project ready, and let's get started.
We're adding our group chat component to your Vue 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.
compilerOptions. You should set the compilerOptions.isCustomElement option to check if the tag names start with wy-.vite.config.js
export default defineConfig({
plugins: [
vue({
template: {
compilerOptions: {
isCustomElement: (tag) => tag.startsWith("wy-")
}
}
}),
],
})
npm install @weavy/uikit-webcurl 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 use it 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.
import { createApp } from "vue";
import App from "./App.vue";
import { Weavy } from "@weavy/uikit-web";
const weavy = new Weavy();
weavy.url = "WY_BACKEND_URL";
weavy.tokenFactory = async (refresh) => "USER_ACCESS_TOKEN";
const app = createApp(App);
app.provide("weavy", weavy);
app.mount("#app");
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.
<script setup>
import { inject } from 'vue'
inject('weavy')
defineProps({
uid: String
})
</script>
<style scoped>
wy-chat {
--wy-theme-color: green;
}
</style>
<template>
<wy-chat :uid="uid"></wy-chat>
</template>
To use the component simply import it and use it in a template.
.vue file
<script setup>
import { WeavyChat } from './WeavyChat.vue'
</script>
<template>
<WeavyChat uid="vue-chat" />
</template>We need an API key to communicate with Weavy for authentication, etc
Learn about the communication between your app and Weavy through the Web API
Complete reference of all endpoints in our Web API
Chat with our developer success team and get the help you need
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.