Build an AI Chef with Salesforce | LWC and Prompt Builder

Build an ai powered chef app in Salesforce using prompt builder and Lightning Web Components to generate three recipe cards from ingredients, dietary restrictions, meal type, and servings.

Set up a Salesforce developer org with AI features like Prompt Builder and agent force by signing up, confirming your email, resetting your password, and accessing preloaded AI tools.

Create a Salesforce lightning app named chef, customize a pink theme, and add a one-region lightning page. Activate and attach it to the app launcher, then manage tabs and navigation.

Learn to build an AI chef prompt template in Salesforce LWC, enabling prompt builder, define inputs (ingredients, dietary restrictions, meal type, servings), map data, and test JSON responses.

Set up a Salesforce LWC project in vscode, create a recipe generator and recipe form, configure fields for ingredients, dietary restrictions, meal type, and servings, and deploy to the org.

Create apex class ai recipe controller that accepts ingredients, dietary restrictions, meal type, and servings, caches them as connect API wrapped values, and uses the Einstein prompt template.

Fetch data from Apex to LWC by calling an Apex controller method on button click, using async/await, and map form data to ingredients, dietary restrictions, meal type, and servings.

Integrate apex responses into the UI by parsing and validating recipe data, including tags and times, and render recipes with a loading spinner.

Create a reusable recipe stat box component displaying prep time, cook time, difficulty, and servings with icons and dynamic parent values, in a four-column layout.

Display and format the recipe ingredients in a two-column layout alongside the instructions, using a bullet list and a responsive grid to show amount, unit, and name for each ingredient.

Render instructions on the ui beside ingredients in a lightning layout item, switch to an ordered list with slds list_ordered, and loop through the instructions array to display each item.

Display a chef tip in a styled card with a lightning icon and heading, then render the tip text using a grid layout and styling.

Apply final touches by implementing error handling with user-friendly messages and enforcing input validation, default values, and checks for ingredients and meal type.