Get started
Add Weavy to your app built with Angular
This guide will show how to add Weavy to your Angular app using our UIKit. The final product will be our chat component rendered in your app.
Have your project ready, and let's get started.
This guide will show how to add Weavy to your Angular app using our UIKit. 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 Angular 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.
npm install @weavy/uikit-web
You haven't selected an API key. If you do - code snippets and files you download will automatically be updated with API key and backend URL.
ng generate service weavy
You haven't selected an API key. If you do - code snippets and files you download will automatically be updated with API key and backend URL.
This generates the following files:
src/app/weavy.service.spec.ts
src/app/weavy.service.ts
curl WEAVY-URL/api/users -H "Authorization: Bearer WEAVY-API-KEY" --json "{ 'uid': 'USER_ID', 'name': 'USER_NAME' }"
WEAVY-URL
and WEAVY-API-KEY
with your backend URL and API key.You haven't selected an API key. If you do - code snippets and files you download will automatically be updated with API key and backend URL.
curl -X POST WEAVY-URL/api/users/USER_ID/tokens -H "Authorization: Bearer WEAVY-API-KEY"
WEAVY-URL
and WEAVY-API-KEY
with your backend URL and API key.You haven't selected an API key. If you do - code snippets and files you download will automatically be updated with API key and backend URL.
Open the generated weavy.service.ts
file in your editor and add the following code.
weavy.service.ts
file
import { Injectable, OnDestroy } from "@angular/core";
import { Weavy } from "@weavy/uikit-web";
@Injectable({
providedIn: "root",
})
export class WeavyService implements OnDestroy {
weavy = new Weavy();
constructor() {
this.weavy.url = new URL("WEAVY-URL");
this.weavy.tokenFactory = async (refresh) => "WEAVY-ACCESS-TOKEN";
}
ngOnDestroy(): void {
this.weavy.destroy();
}
}
WEAVY-URL
and WEAVY-ACCESS-TOKEN
with your backend URL and issued access token.You haven't selected an API key. If you do - code snippets and files you download will automatically be updated with API key and backend URL.
First we import the @weavy/uikit-web
package and create a new Weavy()
instance (importing the Weavy package also registers the web components for usage). Then we configure it with the URL
to your Weavy backend.
To handle destruction of Weavy properly, you need to implement the OnDestroy interface in Angular.
ng generate component chat
You haven't selected an API key. If you do - code snippets and files you download will automatically be updated with API key and backend URL.
This generates the following files:
src/app/chat/chat.component.css
src/app/chat/chat.component.html
src/app/chat/chat.component.spec.ts
src/app/chat/chat.component.ts
chat.component.ts
file and add the following code.chat.component.ts
import { CUSTOM_ELEMENTS_SCHEMA, Component, Input } from "@angular/core";
import { WeavyService } from "../weavy.service";
@Component({
selector: "app-chat",
standalone: true,
imports: [],
templateUrl: "./chat.component.html",
styleUrl: "./chat.component.css",
providers: [WeavyService],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class ChatComponent {
@Input() uid!: string;
constructor(private weavyService: WeavyService) {
this.weavyService = weavyService;
}
}
You haven't selected an API key. If you do - code snippets and files you download will automatically be updated with API key and backend URL.
You need to add the uid
property to the component with the @Input()
decorator so that you can use the component dynamically.
To make external custom web components valid in the Angular HTML, you need to add the CUSTOM_ELEMENTS_SCHEMA
. As of Angular v15.2 you need to make the component standalone by adding standalone: true
.
You also need to connect the Weavy service to the component. This is done by importing our WeavyService
, define it as a provider
and adding a reference to it in the constructor.
chat.component.html
. Note the property binding for the uid
property to the web component.chat.component.html
file
<wy-chat [uid]="uid"></wy-chat>
You haven't selected an API key. If you do - code snippets and files you download will automatically be updated with API key and backend URL.
ChatComponent
and reference it in the imports
in the app component src/app/app.component.ts
.app.component.ts
file
import { Component } from "@angular/core";
import { RouterOutlet } from "@angular/router";
import { ChatComponent } from "./chat/chat.component";
@Component({
selector: "app-root",
standalone: true,
templateUrl: "./app.component.html",
styleUrl: "./app.component.css",
imports: [RouterOutlet, ChatComponent],
})
export class AppComponent {
title = "weavy-example-app";
}
You haven't selected an API key. If you do - code snippets and files you download will automatically be updated with API key and backend URL.
src/app/app.component.html
template using the defined component selector name.app.component.html
file
<app-chat uid="my-chat"></app-chat>
You haven't selected an API key. If you do - code snippets and files you download will automatically be updated with API key and backend URL.
To test the example you can use the built-in Angular dev server, which will compile and start a test server. It also recompiles and reloads the app in the browser whenever you make changes.
Try it out by running ng serve
in your terminal and open the app in your browser, usually on http://localhost:4200
.
ng serve
You haven't selected an API key. If you do - code snippets and files you download will automatically be updated with API key and backend URL.
We need an API key to communicate with Weavy for authentication, etc
Learn about the communication between your app and Weavy
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.