This guide will help you build your first highlight app in vanilla JS using Vite.

Tutorial written by Vignesh Aithal

​
App Setup

In this guide, we will be building a basic app that will print the suggestion text to the screen.

​
Requirements

  • NodeJS
  • PNPM
  • ViteJS
1

Create a Vite project

Run below command to create a new Vite project.

pnpm create vite

Next it we’ll ask you a few fun questions about your app like name, framework, etc. Make sure you select Vanilla JS as the framework.

2

Run the app

Highlight detects your app ONLY if it is running on PORT 3000. So, make sure you specify --port=3000 when launching your app:

pnpm dev --port=3000

To view your app, you need to enable Developer Mode on Highlight. Here are the steps to do it:

  1. Open the Highlight app.
  2. Click “Settings” in the bottom navigation bar.
  3. Click “Advanced” in the top bar.
  4. Toggle the switch next to “Developer Mode”.
  5. A new Local Development app will appear in your pinned apps. Click it.
  6. You should now see your Vite JS app running inside Highlight.
3

Add Suggestions Prompt

Next, you need to add a suggestion prompt file which helps you show custom suggestions for your app when users invoke it by hovering over the Highlight icon or by pressing the shortcut key.

To generate suggestions for your app you just need to create a file called suggestion.hbs. So create a new file inside your JS app in the public folder: copythat/public/suggestions.hbs.

{{! suggestions.hbs }}

{{#system}}
You are an app that helps people communicate with their work colleagues. Using the context of the user's screen, you will generate a list of suggestions that can help the user communicate
with their colleagues.

Only go to 5.
Format the list in a JSON array like this: ["suggestion 1","suggestion 2","suggestion 3"].
{{/system}}

{{#user}}
{{#if application.focusedWindow.rawContents}}
The contents of everything else on the screen:
{{application.focusedWindow.rawContents}}
{{/if}}
{{#if application.focusedWindow.selectedText}}
  The text that is selected right now:
  {{application.focusedWindow.selectedText}}
{{/if}}
{{/user}}
4

Add Highlight APIs

Now we will add Highlight API listeners which will detect when users invoke the app.

Add below code to main.js.

import Highlight from "@highlight-ai/app-runtime"

Highlight.app.addListener("onContext", (context) => {
  console.log("onContext", context)

  const copyText = document.getElementById("copy-text")
  copyText.innerText = context.suggestion
})

And this code to index.html

<!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <link rel="icon" type="image/svg+xml" href="/vite.svg" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Vite App</title>
</head>

<body style="background-color: white;">
  <div id="app">
    Suggestion Text: <p id="copy-text"></p>
  </div>
  <script type="module" src="/main.js"></script>
</body>

</html>

The above code detects the suggestion then outputs it.

​
Great!

Congratulations on creating your first Highlight app!

You’ve now received a concise introduction to Highlight’s capabilities. For a comprehensive understanding of the available API methods, we recommend exploring the Runtime API documentation.

Additionally, we invite you to join our Discord community, where you can interact with our team and fellow developers, as well as seek assistance in developing your application.

Next.jsRuntime API