Search this Site

Google Search Screenshot

David Colaursso
Co-director, Suffolk's Legal Innovation & Tech Lab

This is the 20th post in my series 50 Days of AI.  Previous Post | Next Post

Similar to last Thursday's post, we're taking a break from LLMs to see some more "non-AI" LIT Prompt features. We already know about two of the three possible output types (i.e., LLMs & Prompts). Today we introduce JavaScript. The JavaScript output type allows you to write a prompt containing code that runs when the prompt is triggered. If you're unfamiliar with JavaScript (JS) it's a programing language that runs a lot of the web. We're not going to spend a lot of time learning JS. I expect you'll get the gist of how it works just by reading the code in the prompts below. And that's what we're going for, a high-level understanding that we can call JS in our LIT Prompts, and that in so doing we can act on the world (or at least our computer). As the subhead makes clear, this is a foundation we will later use to explore the idea of agentic AI.

Today we're going to use JavaScript to open a new page and conduct a site search on the site from which we launched the prompt. This will be done with two prompts, the first prompt passing information to the latter. The first prompt will ask us what we're looking for, and the second prompt will construct the URL for a Google site search then open that search page for the site we're on when it's triggered. That being said, let's build something!

We'll do our building in the LIT Prompts extension. If you aren't familiar with the LIT Prompts extension, I imagine the above was a bit confusing, but don't worry. We'll walk you through setting things up before we start building. If you have used the LIT Prompts extension before, skip to The Prompt Pattern (Template).

Up Next

• Setup LIT Prompts
• Install the extension
• Point it at an API
• The Prompt Pattern (Template)
• Kick the Tires
• TL;DR References

Setup LIT Prompts

7 min intro video

LIT Prompts is a browser extension built at Suffolk University Law School's Legal Innovation and Technology Lab to help folks explore the use of Large Language Models (LLMs) and prompt engineering. LLMs are sentence completion machines, and prompts are the text upon which they build. Feed an LLM a prompt, and it will return a plausible-sounding follow-up (e.g., "Four score and seven..." might return "years ago our fathers brought forth..."). LIT Prompts lets users create and save prompt templates based on data from an active browser window (e.g., selected text or the whole text of a webpage) along with text from a user. Below we'll walk through a specific example.

To get started, follow the first four minutes of the intro video or the steps outlined below. Note: The video only shows Firefox, but once you've installed the extension, the steps are the same.

Install the extension

Follow the links for your browser.

• Firefox: (1) visit the extension's add-ons page; (2) click "Add to Firefox;" and (3) grant permissions.
• Chrome: (1) visit the extension's web store page; (2) click "Add to Chrome;" and (3) review permissions / "Add extension."

If you don't have Firefox, you can download it here. Would you rather use Chrome? Download it here.

Point it at an API

Here we'll walk through how to use an LLM provided by OpenAI, but you don't have to use their offering. If you're interested in alternatives, you can find them here. You can even run your LLM locally, avoiding the need to share your prompts with a third-party. If you need an OpenAI account, you can create one here. Note: when you create a new OpenAI account you are given a limited amount of free API credits. If you created an account some time ago, however, these may have expired. If your credits have expired, you will need to enter a billing method before you can use the API. You can check the state of any credits here.

Login to OpenAI, and navigate to the API documentation.

Once you are looking at the API docs, follow the steps outlined in the image above. That is:

1. Select "API keys" from the left menu
2. Click "+ Create new secret key"

---

On LIT Prompt's Templates & Settings screen, set your API Base to https://api.openai.com/v1/chat/completions and your API Key equal to the value you got above after clicking "+ Create new secret key". You get there by clicking the Templates & Settings button in the extension's popup:

1. open the extension
2. click on Templates & Settings
3. enter the API Base and Key (under the section OpenAI-Compatible API Integration)

Once those two bits of information (the API Base and Key) are in place, you're good to go. Now you can edit, create, and run prompt templates. Just open the LIT Prompts extension, and click one of the options. I suggest, however, that you read through the Templates and Settings screen to get oriented. You might even try out a few of the preloaded prompt templates. This will let you jump right in and get your hands dirty in the next section.

If you receive an error when trying to run a template after entering your Base and Key, and you are using OpenAI, make sure to check the state of any credits here. If you don't have any credits, you will need a billing method on file.

If you found this hard to follow, consider following along with the first four minutes of the video above. It covers the same content. It focuses on Firefox, but once you've installed the extension, the steps are the same.

The Prompt Pattern (Template)

Maps are models; they don't show everything. That's okay as long as you don't confuse the map for the territory.

When crafting a LIT Prompts template, we use a mix of plain language and variable placeholders. Specifically, you can use double curly brackets to encase predefined variables. If the text between the brackets matches one of our predefined variable names, that section of text will be replaced with the variable's value. If the text within brackets is not the name of a predefined variable, like {{What is your name?}}, it will trigger a prompt for your user that echo's the placeholder (e.g., a text bubble containing, "What is your name?"). After the user answers, their reply will replace this placeholder. A list of predefined variables can be found in the extension's documentation.

Here we have two templates the firts asks a question, prompting the user to input a search. This is passed on to a second template using the {{passThrough}} variable. We use the Post-run Behavior parameter to govern what happens after a template is run. If you use Post-run Behavior to send one template's output to another template, the first template's output can be read by the second template via the {{passThrough}} variable. It is in this second template where we'll use some JavaScript to read in the search, detect the domain of the site we're on, construct a site search tailored to that site, and open a new window with the results.

To run the template, be sure you're on the site you want search then trigger the template.

Here's the template's title.

🔍 🌎 Search this site

Here's the template's text.

{{What are you looking for?}}

And here are the template's parameters:

• Output Type: Prompt. By choosing "Prompt" the template runs without being submitted to an LLM. It's output is just the template after slotting in variable values.
• JSON: No. This asks the model to output its answer in something called JSON. We don't need to worry about that here, hence the selection of "No."
• Output To: Hidden. We can output to a number of places, the screen, the clipboard... Here, we're going to hide the conetnt as it is intended for the next template, not the user to see.
• Post-run Behavior: open search. Like the choice of output, we can decide what to do after a template runs. Here we have chosen the name of another template. So, after this template runs it will trigger that template and pass through its output.
• Hide Button: unchecked. This determines if a button is displayed for this template in the extension's popup window.

Here's the second template's title.

open search

Here's the second template's text.

var site = window.location.hostname;
var query = encodeURIComponent(passThrough) + "+site:" + encodeURIComponent(site);
var googleSearchUrl = "https://www.google.com/search?q=" + query;
window.open(googleSearchUrl, '_blank');
return true

And here are the template's parameters:

• Output Type: JavaScript. This choice means that we'll "run" any JavaScript code found in the template.
• JSON: No. This asks the model to output its answer in something called JSON. We don't need to worry about that here, hence the selection of "No."
• Output To: Hidden. We can output to a number of places, the screen, the clipboard... Here, we're going to hide the conetnt as it is intended for the browser, not the user to see (e.g., command to open a window).
• Post-run Behavior: CLOSE POP-UP. Like the choice of output, we can decide what to do after a template runs. To keep things simple, I went with "CLOSE POP-UP." This closes the screen on which the LIT Prompts appear since we're expecting it to open a new page.
• Hide Button: checked. TThis determines if a button is displayed for this template in the extension's popup window. Here we want to hide this button as it wouldn't work properly if triggered before the prior prompt because it is counting on the passThrough variable.

Working with the above templates

To work with the above template, you could copy it and its parameters into LIT Prompts one by one, or you could download a single prompts file and upload it from the extension's Templates & Settings screen.

You can download a prompts file (the above template and its parameters) suitable for upload by clicking this button:

Kick the Tires

It's one thing to read about something and another to put what you've learned into practice. Let's see how this template performs.

• Needle in a Haystack. Navigate to a page that doesn't have very good internal search (or maybe it does) and use this template to find something you otherwise might have a hard time finding.