Exercise 3: Render the Widget in the Agent

The widget and Lightning Type are in your org, but Employee_Assistant still treats the action's output as plain data. In this exercise, you'll ask Agentforce Vibes to update the agent's Agent Script so the output renders as your card, and then verify it in a real conversation. The agentforce-generate skill handles retrieving, editing, validating, publishing, and activating the agent.

Step 1: Update the Agent Script

Approvals and timing

With Bypass (trust all), Vibes edits, validates, deploys, publishes, and activates the agent without asking. Expect about 4–6 minutes. Vibes can take 3–6 minutes to load after you reopen it; you can ignore Apex Language Server errors while it loads. You already retrieved the agent in Exercise 2 and installed the AgentScript SDK in Exercise 1, so this prompt doesn't retrieve or install anything.

1. Open the Agentforce Vibes Sidebar. If the chat isn't empty, click + (New chat) to start a new conversation.

2. Click the Settings icon and set Default session mode to Bypass (trust all) if it isn't already; reopening Vibes can reset it. Click Back.

3. Use this prompt:

   Use the agentforce-generate skill. It's already installed and its AgentScript SDK is already set up, so don't search for skills, run sf update, or install anything. The Employee_Assistant agent was already retrieved in Exercise 2; don't retrieve it again.
   
   Work in force-app/main/default/aiAuthoringBundles/Employee_Assistant/. A published version is locked. If the retrieve created Employee_Assistant_N instead, copy its .agent file into Employee_Assistant/ with a bundle-meta.xml that has no <target>. If it created Employee_Assistant, just delete the <target> line from its bundle-meta.xml. Leave any Employee_Assistant_N folder untouched.
   
   In the browse_storefronts subagent, update the storefront output of the getStorefrontFromName action so it renders as the storefrontProfileCard widget:
   - complex_data_type_name: "c__storefrontProfileCardOutput"
   - is_displayable: True
   - filter_from_agent: False
   
   Change nothing else in the agent. Then, in this order: validate the script with the skill's local compiler; deploy only the bundle with sf project deploy start --metadata AiAuthoringBundle:Employee_Assistant; publish with sf agent publish authoring-bundle --api-name Employee_Assistant --skip-retrieve; and activate the new version with sf agent activate --api-name Employee_Assistant. Don't redirect error output to /dev/null on any command.

4. Vibes applies the edit right away, without a diff to approve. When it finishes, click the Employee_Assistant.agent file chip (+3 −1) in its summary to open the diff. The storefront output should change from complex_data_type_name: "lightning__recordInfoType" to the three settings above, and nothing else in the agent should change. The bundle-meta.xml chip (−1) is the removed <target> line.

5. When Vibes finishes, click Accept All so no changes stay pending.

Here's what each setting does:

• complex_data_type_name: "c__storefrontProfileCardOutput" points the output at your Lightning Type, which resolves to the widget through @widget/c/storefrontProfileCard instead of a generic record layout.
• is_displayable: True is the setting that turns rendering on. It unlocks a platform tool, __show_tool_results__, that the model calls to render the output as a widget.
• filter_from_agent: False keeps the output in the agent's context. It's already the default, but it's good practice to be explicit once an output becomes displayable.

Prefer to make the change in Agentforce Builder?

1. In Setup, go to Agents and open Employee_Assistant to launch Agentforce Builder.

2. Open the browse_storefronts subagent, click Canvas, and select Script.

3. Find the storefront output of the getStorefrontFromName action and replace it with:

   storefront: object
       label: "Storefront"
       complex_data_type_name: "c__storefrontProfileCardOutput"
       filter_from_agent: False
       is_displayable: True

4. Click Save, then Commit Version (confirm in the modal), then Activate.

Then continue with Step 2.

Step 2: Verify in the Agentforce Conversation

1. In your org, open the Agentforce conversation panel and make sure Employee_Assistant is selected in the Agent Picker. If a You're about to use Agentforce screen appears, click Got It.

2. Ask about the same storefront you used in Exercise 1:

   Tell me about Artisan's Edge Uptown.

   You should now see a card instead of the plain-text sentence from Exercise 1: a colored status badge, the cuisine, rating, address, and phone, and the View Menu and Check Hours buttons. Pronto's existing Customer Reviews widget may also render below the card. The sentence above the card may mention details, such as hours, that aren't on the card.

   The model decides whether to render the output as a card, so a card isn't guaranteed. The agent usually renders a card on the first question of a fresh conversation, and later questions in the same conversation usually get text. If you get text, click the Clear history icon in the panel header, confirm Clear History, and ask again; it can take two or three tries.

3. Click View Menu. The card sends "Show me the menu for Artisan's Edge Uptown" into the conversation, exactly as if you'd typed it, and the agent responds with that storefront's menu.

4. Each card's buttons work once. To try Check Hours, click Clear history, confirm, ask Tell me about Artisan's Edge Uptown. again, and click Check Hours on the new card. The agent responds with the storefront's operating hours.

5. Ask about a storefront that isn't active, and notice that the badge color changes, driven by the statusVariant value the Apex action computes. Clear history before each question:

   Tell me about Harvest Grill.

   Harvest Grill is Suspended, so its badge uses the error variant. For a secondary badge, ask about The Green Fork, which is Closed.

Both buttons use action/sendMessage, so the widget stays purely declarative: it never calls Apex directly, and the agent's existing actions answer whatever the button asks.

Summary

You bound the getStorefrontFromName action's storefront output to storefrontProfileCardOutput and marked it displayable, then published and activated a new version of Employee_Assistant. In the Agentforce conversation panel, you confirmed that the card renders and that its buttons drive the conversation the same way typed questions do.