1. Reference
2. UIKit
3. Copilot

Copilot component

<wy-copilot> | WyCopilot

Weavy copilot component to render single, contextual and personal chats with an AI agent.

It needs to be configured with an AI agent and can have custom instructions and use any contextual data you provide (as long as it's a string). To get started, you can use Weavy's built-in "assistant" agent.

The copilot chat is agent-to-user which means each user has their own private chat with the agent. Each time the copilot component is loaded a fresh chat is started. A fresh conversation can be started at any time by using the .reset() method. The component can optionally be configured with a uid to persist the conversation.

If you specify a uid it needs to be unique per user and agent (if you intend to use several agents). For ease-of-use, you can do this automatically by specifying the generateUid property instead of the uid property. It's optional to provide a uid and in many cases not needed. When using a uid it's often useful to base the uid on something that identifies the location where the component is rendered. Typically you would use something like a product id, page id or path.

Predefined elements with the suggestion class can be placed in the suggestion-list slot to create text hints for the user on what to do. When clicked, the suggestion text gets automatically placed in the message editor.

Complement this with the <wy-notification-toasts> component to also get realtime in-app notifications or browser notifications when new messages arrive.

Component layout

The component is block-level with pre-defined CSS styling to adapt to flex- and grid-layouts as well as traditional flow-layouts. It's usually recommended to use a proper flex-layout for the container you are placing the component in for a smooth layout integration.

The height grows with the content per default. Content is automatically loaded during scrolling when the last content becomes visible (aka infinite scrolling). If placed in a flex- or grid-layout or if an explicit height is set, the component becomes scrollable.

The content within the component is per default aligned to the edges of it's own box. It's recommended to add your default padding to the container or to the component to make it fit your design. If you want the component to go all the way to the edges of your container without any outermost roundness or padding, you can set the padding to 0 and set the --wy-border-radius-outer to 0 to make the component align nicely with the edge.

You can add additional styling using CSS Custom Properties and CSS Shadow Parts and further customization using slots.

Importing

If you installed the UIKit with npm you can use the following snippet to import the component into your project. Otherwise, if you installed the UIKit as a <script> you can ignore this section.

import { WyCopilot } from "@weavy/uikit-web";

Examples

Generic AI copilot chat

Displays a chat based AI copilot, placed in a container using a flex layout which the component adapts to.

The agent property is required and should correspond to an agent in your environment. You may switch between agents whenever you like, but remember that the conversation also changes.

Here we use the built-in agent with uid assistant.

<div style="display: flex; height: 100%;">
  <wy-copilot agent="assistant"></wy-copilot>
</div>

Copilot with instructions and contextual data

The copilot gets much more useful if it knows about the data and content on your page. You can update this anytime you like to keep it up-to-date. Here we provide data from the DOM to the agent using the contextualData property.

<div id="my-sample-content">
  <h1>ACME</h1>
  <ul>
    <li>Wile E. Coyote</li>
    <li>Daffy Duck</li>
    <li>Porky Pig</li>
  </ul>
</div>

<wy-copilot uid="my-copilot" agent="assistant"></wy-copilot>

<script>
  const myContent = document.querySelector("#my-sample-content");
  const copilot = document.querySelector("wy-copilot");
  copilot.instructions = "Answer in a whacky way with many emojis.";
  copilot.contextualData = myContent.innerHTML;
</script>

Copilot with a custom button and suggestions

You may use slots to provide custom functionality to the copilot. This example shows a button to reset the conversation and some custom suggestions.

When the suggestions have the .suggestion class, they automatically get their text inserted into the editor when clicked.

In this example we use the pre-styled weavy sub components, but you may use any elements or components you like.

<wy-copilot uid="my-copilot" agent="assistant">
  <wy-button
    slot="actions"
    kind="icon"
    onclick="document.querySelector('#my-copilot').reset()"
  >
    <wy-icon name="stars"></wy-icon>
  </wy-button>

  <wy-button slot="suggestion-list" class="suggestion"
    >Summarize this page</wy-button
  >
  <wy-button slot="suggestion-list" class="suggestion"
    >What keywords are used?</wy-button
  >
</wy-copilot>

All Weavy sub components can be found by importing WeavyComponents from the UI Kit.

HTML attributes

Attributes can be set when using the component in HTML. All attributes have corresponding Javascript properties.

Most attributes are optional and/or has sensible default values. Any required attributes are indicated with an asterisk (*).

Learn more about attributes and properties.

JavaScript properties

Properties can be used in JavaScript. Some of them have corresponding HTML attributes where applicable.

JavaScript methods

Methods for the component are available in JavaScript. Methods that are async return a promise.

DOM Events

The component triggers custom events that bubbles up the DOM tree. They can be listened to using the addEventListener() method.

Learn more about events.

Slots

The slots can be used to inject elements into the component. All predefined child nodes of the slot will be replaced with the injected content.

To prevent child nodes from rendering before the component has loaded you can hide them using CSS.

wy-copilot:not(:defined) {
  display: none;
}

Available features

The following features are available for the component. Configure them with a space separated list using the features attribute. Features that are available but disabled by default are indicated by parenthesis ().

Learn more about features.