Skip to main content
1

Install Canopy

You need to import an instance of the Canopy Class into your project.
<!-- Paste this into the head of your html file -->
<script src="https://unpkg.com/canopy/dist/canopy.min.js"></script>
All the steps for Canopy as an HTML script tag are the same as that of the ES6
2

Import the Canopy Class

We should try logging the Canopy class to make sure it is properly imported.
console.log(Canopy);
3

Get Authentication Token

Since you connect to Canopy from the client side, you will need to use a token to authenticate your requests from the server and pass these to the client. If you are unsure you can see examples with different languages . You can get your token from the Dashboard .
curl -X GET "https://api.canopyai.xyz/get-auth-token?api_token=<apiToken>"
4

Initialise Canopy

In Step 2, we imported the Canopy class. Now we need to initialise it with the token we got from Step 3. Click for a full list of paremeters to pass into CanopyConfig. In your HTML create an element with id connect.
Most browsers have a security feature that requires the user interact with the page before it can start listening for audio. This means the canopy.listen method must be called in response to a browser event. 
const CanopyConfig = {
    authToken: "<your-token>"
}
const canopy  = new Canopy(CanopyConfig);

const { success, error } = await canopy.connect();



if(success) {
    console.log("Connected to Canopy");
} else {
    console.log("Error connecting to Canopy", error);
}

document.getElementById("connect").addEventListener("click", async () => {
  canopy.listen()
});
5

Use and Close

See our quickstarts, API Reference, and documentation to be able to build agents or CRUD. to the messageThread. Once you have access to the canopy instance, you have a whole range of functionality found here.

Make sure to close Canopy when you are done using it. 

canopy.close();