Prompting the AI

Prompt engineering is the process of crafting prompts to interact with the AI. We are not going to dive deep into prompt engineering in this guide, but we will show you how to use prompts in your supastarter app to get data generated by the AI that you can use in your app.

Create a prompt

We have prepared a prompt library file in the ai package.

The idea is that you create a prompt with placeholders that can then be filled with data from your app and be sent to the AI as a message.

export function generateProductNamesPrompt(topic: string) {
	return `List me five funny product names that could be used for ${topic}. Format the output as a JSON array of objects with the key name that contains the generated value. Also remove code highlighting.`;
}

This function will return a prompt that can be used to generate product names for a given topic.

Use the prompt

To use the prompt, you can call the function and pass the topic as an argument:

const prompt = generateProductNamesPrompt("dog food");
 
const response = await streamText({
	model: textModel,
	messages: [
		{ role: "user", content: prompt }
	]
});

A possible response from the AI could be:

[
    {"name": "Bark Bites: Woof-tastic Chews"},
    {"name": "Paw-some Pâté: Tail-Wagging Treats"},
    {"name": "Mutt Munchies: Canine Crunchies"},
    {"name": "Fido's Feast: Bark-quet Delights"},
    {"name": "Pup-ular Chow: Snout-Approved Snacks"}
]

You can then parse the value as JSON and use the data to display the values inside your application.

This is a very basic example, but you can create more complex prompts and use the data in your app.

Check out the Prompt Engineering Guide for more examples and ideas.