Welcome to the lesson on Prompt Structure and Variables. In this lesson, we will explore how prompts are structured and how variables are used to create dynamic and flexible AI interactions. Prompts are essential for guiding AI behavior, allowing us to tailor responses to specific needs. By the end of this lesson, you will understand how to load and render templates using variables, a crucial skill in building the AI Cooking Helper.

Before we dive into templates, let's briefly recall file handling in TypeScript. This knowledge is essential, as we will be loading template files in this lesson. In TypeScript, we use the fs module to work with files. The fs.promises.readFile function allows us to read the contents of a file asynchronously. Here’s a quick example:

This code snippet reads the contents of a file named example.txt and prints them. The await keyword is used to wait for the file to be read before continuing.

Our templates will represent prompts that can be enriched with variables, in the form of text files with placeholders. These placeholders will be enclosed in curly braces, like {{input}}. Let's look at an example template:

In this template, {{input}} is a placeholder that will be replaced with a specific sentence when the template is rendered. This structure allows us to create flexible prompts that can adapt to different inputs.

To use a template, we first need to load it from a file. Let's break down the loadTemplate function:

We start by defining the loadTemplate function, which takes a name as an argument.

Here, we use the join function from the path module to construct the full path to the template file. The config.promptsDir variable points to the folder where prompt templates are stored. The file name is created by appending .txt to the template name.

Notice that we do not use the await keyword inside the loadTemplate function itself. Instead, we simply return the result of fs.readFile, which is a Promise. Because the function is marked as async, it will automatically wrap the returned Promise, allowing callers to use await when they call loadTemplate. This pattern is useful when you want to let the calling code decide when and how to wait for the result, or when you want to chain additional asynchronous operations.

Once we have loaded a template, we can render it by replacing placeholders with actual values. Let's explore the renderTemplate function:

This function takes a template string tpl and a dictionary of variables vars. It uses a regular expression to find all placeholders in the form {{variable}} and replaces them with the corresponding value from vars. If a variable is not provided, the placeholder remains unchanged.

Finally, let's see how loading and rendering are combined in the renderPromptFromFile function:

This function first loads the template using loadTemplate(), then renders it with renderTemplate(), replacing placeholders with the provided variables.

In this lesson, you learned how to structure prompts using templates and variables. We covered loading templates from files, rendering them with actual values, and combining these steps to create dynamic prompts. As you move on to the practice exercises, you'll apply these skills to create and render your own templates. Experiment with different inputs to see how they affect the output. Keep up the great work, and enjoy the hands-on practice!