Next.js

The first order of business is to setup Next.js. You should already have Node.js and npm installed on your machine.

Create a new Next app with:

npx create-next-app@latest

Next will ask you a few questions about your app. You can leave the defaults as they are or customize to your liking.

With your app created, change directories into your new app and run:

npm run dev

By default, your Next app will run on http://localhost:3000.

You can view your running localhost app by:

1. Opening the Highlight app (right click Highlight icon in menu/task bar, click “Open Highlight App”)
2. Click “Settings” towards the bottom navigation bar.
3. Click “Advanced” at the top bar.
4. Select the toggle switch next to “Developer Mode”.
5. A new Local Development app will appear in your pinned apps. Click it.

One of Highlight’s powerful features is showing the user suggestions that explain what your app can help with them with using the context of their screen.

When you use the Highlight hotkey and tab to your app, you will notice no suggestions loading:

This is because we are missing a suggestions prompt.

Create a new file inside your Next app: my-app/public/suggestions.hbs

Paste the following into the file:

{{! 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}}

After saving, verify you can access your prompt file from a web browser by navigating to http://localhost:3000/suggestions.hbs.

Update your Next.js configuration to allow Highlight to access the suggestions prompt:

/** @type {import('next').NextConfig} */
const nextConfig = {
  async headers() {
    return [
      {
        // match the suggestions prompt
        source: "/suggestions.hbs",
        headers: [
          { key: "Access-Control-Allow-Credentials", value: "true" },
          { key: "Access-Control-Allow-Origin", value: "*" },
          {
            key: "Access-Control-Allow-Methods",
            value: "GET,OPTIONS,PATCH,DELETE,POST,PUT",
          },
          {
            key: "Access-Control-Allow-Headers",
            value:
              "X-CSRF-Token, X-Requested-With, Accept, Accept-Version, Content-Length, Content-MD5, Content-Type, Date, X-Api-Version",
          },
        ],
      },
    ];
  },
};

export default nextConfig;

Now, when you activate your Highlight hotkey, you should start seeing suggestions that were generated using your new prompt.

Now for the fun part. Let’s use Highlight’s Runtime API to discover when the user selects a suggestion.

First, add the Highlight runtime library to your Next project:

npm install @highlight-ai/app-runtime --save

Let’s make the main index route of the Next app a client component so that it can access the Highlight runtime API. Then, let’s add an event listener and listen for the onContext event:

"use client";

import { useEffect, useState } from "react";
import Highlight, { type HighlightContext } from "@highlight-ai/app-runtime";

export default function Home() {
  const [selectedItem, setSelectedItem] = useState("");

  useEffect(() => {
    const destructor = Highlight.app.addListener('onContext', () => {
     setSelectedItem(context.suggestion ?? "");
    })

    return () => {
      destructor();
    };
  }, []);

  return <p>Selected item: {selectedItem}</p>;
}

You’re ready to see your app in action.

First, try opening your app from the sidebar of the main Highlight app.

Notice how no item is shown as selected:

Now, let’s select a suggestion and see what happens.

• Open the Highlight overlay (use the Highlight hotkey).
• With the selected app as Local Development (the top bar of the overlay), select a suggestion item using the arrow keys and press enter on your keyboard.

Your selection will now appear:

Congrats! You’ve built your first Highlight app.

You’ve just been given a brief overview of what you can do with Highlight. Continue on to the Runtime API to view the full set of API methods available to you.

Also, join our Discord to chat with the team, other developers, and to get help building your app.