Exercise 6 (Optional): Invoke Prompt Templates from Apex and Lightning Web Components

In this exercise, you’ll create a Flex prompt template that generates social posts for a Pronto storefront. Then you’ll invoke the prompt template from Apex (using the Connect API) and from a Lightning Web Component (LWC) on a Storefront__c record page.

Step 1: Create the Flex prompt template

1. In Setup, search for Prompt Builder, and select Prompt Builder.

2. Click New Prompt Template.

3. Configure the prompt template as follows:

   Field	Value
   Prompt Template Type	Flex
   Prompt Template Name	Generate Storefront Social Posts
   API Name	Generate_Storefront_Social_Posts
   Template Description	Generates social posts (Twitter, LinkedIn, Slack) for a Pronto storefront.

4. Add a new resource and configure it as follows:

   Field	Value
   Name	Storefront
   API Name	storefront
   Object	Storefront__c

   TIP

   Use the exact API names above:

   • Prompt Template API Name: Generate_Storefront_Social_Posts
   • Resource API Name: storefront

5. Click Next.

6. Paste the following text in the Prompt Template Workspace:

   You are the social media manager for Pronto, a food delivery platform.
   
   Write social media posts that promote a Pronto storefront.
   
   Storefront details:
   - Name: {!$Input:storefront.Name}
   - Type/Cuisine: {!$Input:storefront.Type__c}
   - City: {!$Input:storefront.City__c}
   - Average Rating: {!$Input:storefront.Average_Rating__c}
   - Number of Reviews: {!$Input:storefront.Number_of_Reviews__c}
   
   Output rules:
   - Provide exactly these top-level keys: "twitter", "linkedin", "slack_blockkit"
   - "twitter" must be < 280 characters and include 1-2 relevant emojis
   - "linkedin" should be 4-8 lines, friendly, and include a short call to action
   - "slack_blockkit" must be valid Slack Block Kit JSON (as a JSON object, not a string)
   - Do not invent prices, promotions, addresses, or menu items.

7. In the Configuration sidebar, set Response format to JSON.

8. In the Preview panel, select any Storefront__c record from your org.

9. Click Save & Preview and validate the output includes the expected keys.

10. Click Activate.

Step 2: Execute the prompt template using the Connect API in Apex

In this step, you’ll invoke the prompt template from Apex using the Connect API.

1. From App Launcher, open Code Builder.

2. Create a new Apex class named StorefrontSocialPostsController.

3. Replace the default Apex class with the following code:

   public with sharing class StorefrontSocialPostsController {
       @AuraEnabled
       public static String generateStorefrontSocialPosts(String storefrontId) {
           // Create inputs
           Map<String, String> storefront = new Map<String, String>();
           storefront.put('id', storefrontId);
           ConnectApi.WrappedValue storefrontValue = new ConnectApi.WrappedValue();
           storefrontValue.value = storefront;
   
           Map<String, ConnectApi.WrappedValue> inputParams = new Map<String, ConnectApi.WrappedValue>();
           inputParams.put('Input:storefront', storefrontValue);
   
           // Configure invocation parameters
           ConnectApi.EinsteinPromptTemplateGenerationsInput executeTemplateInput =
               new ConnectApi.EinsteinPromptTemplateGenerationsInput();
           executeTemplateInput.additionalConfig = new ConnectApi.EinsteinLlmAdditionalConfigInput();
           executeTemplateInput.additionalConfig.applicationName = 'PromptBuilderPreview';
           executeTemplateInput.isPreview = false;
           executeTemplateInput.inputParams = inputParams;
   
           // Call the service
           ConnectApi.EinsteinPromptTemplateGenerationsRepresentation generationsOutput =
               ConnectApi.EinsteinLLM.generateMessagesForPromptTemplate(
                   'Generate_Storefront_Social_Posts',
                   executeTemplateInput
               );
   
           return generationsOutput.generations[0].text;
       }
   }

4. Save the file.

5. Deploy the class to your org.

Step 3: Test the Apex method (Execute Anonymous)

1. Run the following in Execute Anonymous:

   Storefront__c sf = [SELECT Id FROM Storefront__c LIMIT 1];
   String postsJson = StorefrontSocialPostsController.generateStorefrontSocialPosts(sf.Id);
   System.debug(postsJson);

2. Confirm the output is valid JSON and contains twitter, linkedin, and slack_blockkit.

Step 4: Create a Lightning Web Component that uses the Apex method

In this step, you’ll create an LWC you can place on a Storefront__c record page to generate the posts.

1. In Code Builder, create a new LWC named generateStorefrontSocialPosts.

2. Replace generateStorefrontSocialPosts.html with:

   <template>
     <lightning-card
       title="Generate Storefront Social Posts"
       icon-name="utility:socialshare"
     >
       <div class="slds-var-p-around_small">
         <lightning-button
           onclick="{handleGenerate}"
           label="Generate"
           class="slds-var-m-bottom_small"
         ></lightning-button>
   
         <template lwc:if="{error}">
           <div class="slds-text-color_error">{error}</div>
         </template>
   
         <template lwc:if="{posts}">
           <lightning-textarea
             label="Twitter"
             value="{posts.twitter}"
             readonly
           ></lightning-textarea>
           <lightning-textarea
             label="LinkedIn"
             value="{posts.linkedin}"
             readonly
           ></lightning-textarea>
           <lightning-textarea
             label="Slack Block Kit (JSON)"
             value="{slackBlockKit}"
             readonly
           ></lightning-textarea>
         </template>
       </div>
     </lightning-card>
   </template>

3. Replace generateStorefrontSocialPosts.js with:

   import { api, LightningElement } from "lwc";
   import generateStorefrontSocialPosts from "@salesforce/apex/StorefrontSocialPostsController.generateStorefrontSocialPosts";
   
   export default class GenerateStorefrontSocialPosts extends LightningElement {
     @api recordId;
     posts;
     slackBlockKit;
     error;
   
     async handleGenerate() {
       this.error = undefined;
       this.posts = undefined;
       this.slackBlockKit = undefined;
   
       try {
         const jsonText = await generateStorefrontSocialPosts({
           storefrontId: this.recordId
         });
         const parsed = JSON.parse(jsonText);
         this.posts = parsed;
         this.slackBlockKit = JSON.stringify(parsed.slack_blockkit, null, 2);
       } catch (e) {
         this.error =
           e?.body?.message || e?.message || "Failed to generate posts.";
       }
     }
   }

4. Update generateStorefrontSocialPosts.js-meta.xml so it can be placed on a Storefront__c record page:

   <?xml version="1.0" encoding="UTF-8"?>
   <LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
     <apiVersion>60.0</apiVersion>
     <isExposed>true</isExposed>
     <targets>
       <target>lightning__RecordPage</target>
     </targets>
     <targetConfigs>
       <targetConfig targets="lightning__RecordPage">
         <objects>
           <object>Storefront__c</object>
         </objects>
       </targetConfig>
     </targetConfigs>
   </LightningComponentBundle>

5. Deploy the component to your org.

Step 5: Add the component to a Storefront record page

1. Open any Storefront__c record.

2. Click Edit Page.

3. Drag Generate Storefront Social Posts onto the page.

4. Click Save, then Activate (Org Default is fine for this workshop).

5. Return to the record page and click Generate.

Summary

In this exercise, you created a Flex prompt template that generates Pronto storefront social posts, invoked it from Apex using the Connect API, and exposed it through an LWC on a Storefront__c record page.