Welcome to this lesson on generating new recipes with AI! So far, you have learned how to interact with large language models (LLMs), structure prompts, and manage LLM calls in your TypeScript application using Express. Now, you will see how these skills come together to create a feature that generates unique cooking recipes based on a list of ingredients provided by the user.
Imagine you have a few ingredients in your fridge and want to know what you can cook. With AI-powered recipe generation, your app can suggest creative, step-by-step recipes instantly. This not only makes your app more helpful but also demonstrates the power of combining AI with modern web development in TypeScript.
In this lesson, you will learn how to connect your Express backend to the AI, send ingredient lists, and return structured recipes to your users. By the end, you will understand the full flow of generating a recipe with AI and preparing it for use in your application.
Before we dive in, let’s briefly recall two important concepts from previous lessons:
-
Prompt Templates:
You learned how to use template files to create prompts for the AI. These templates can include placeholders (like{{ingredients}}) that are filled in with real values before being sent to the AI. -
LLM Manager:
TheLLM Manageris a helper that handles all communication with the language model. It loads the right prompts, fills in variables, sends the request, and returns the AI’s response.
These tools are the foundation for generating recipes with AI. In this lesson, you will see how they are used together in a real Express route.
Let’s walk through how your Express app generates a recipe using AI, step by step.
Your app provides a special route for generating recipes:
- This route listens for
POSTrequests at/generate. - It expects a JSON body with an
ingredientsarray. - If no ingredients are provided, it returns an error.
Example request:
The route uses two prompt templates: a system prompt and a user prompt. These are loaded and filled in with the user’s ingredients.
generateResponseloads the prompt templates and fills in the{{ingredients}}variable.- The system prompt sets the AI’s role and output format.
- The user prompt asks the AI to create a recipe using the given ingredients.
The AI returns a recipe as a formatted string, for example:
This response is then processed by your app.
After receiving the AI’s response, your app needs to extract the recipe name, ingredients, and steps so they can be returned as structured data.
First, split the AI’s response into lines and set up variables to track the current section and store the parsed data:
linesis an array of each line in the AI’s response.sectionkeeps track of which part of the recipe you are reading.
Loop through each line to determine which section you are in and to extract the relevant data:
- If the line starts with
Name:, extract the recipe name by splitting on the colon and joining the rest, then trimming whitespace. - If the line starts with
Ingredients:, set the section to"ingredients". - If the line starts with
Steps:, set the section to"steps". - While in the ingredients section, if a line starts with
-, remove the dash and any extra whitespace, then add it to the ingredients array. - While in the steps section, if a line starts with a digit (e.g.,
1.), trim and add it to the steps array.
Finally, return the structured recipe as JSON:
Example output:
This makes it easy for your frontend or other parts of your app to use the generated recipe.
Here is the complete implementation of the recipe generation route in your Express app, combining all the steps discussed above:
And here is the parser utility used to extract the recipe from the AI's response:
This code brings together all the concepts from the lesson: receiving user input, preparing prompts, calling the AI, parsing the response, and returning a structured recipe. You can now use this route in your Express app to generate recipes based on any list of ingredients provided by your users.
In this lesson, you learned how your Express app generates new recipes using AI. You saw how the app:
- Receives a list of ingredients from the user,
- Prepares and sends prompts to the AI,
- Parses the AI’s response to extract the recipe name, ingredients, and steps,
- Returns the structured recipe as JSON.
You are now ready to practice building and testing this feature yourself. In the next exercises, you will get hands-on experience with the TypeScript code, try generating recipes with different ingredients, and see how the AI responds. This skill is a key part of making your cooking helper app truly smart and interactive.
