Skip to main content

Use Agentforce to Fix the App

The Agentforce Adventure Tools App

This special playground includes the custom-built Agentforce Adventure Tools, your companion app featuring a Quick Dice Roller for tabletop and role-playing games (RPG) campaigns.

This is a lightweight sample app that brings a dice roller into your playground. In this app you can roll dice on command, add modifiers (like enchanted gear or spell effects), and check for those glorious natural 20s that trigger a critical!

In tabletop role-playing games, a critical is a dice roll with an exceptionally good (or bad) outcome, often a critical hit for a special success or a critical failure for a particularly poor result. In this app only critical hits are counted, when any die hits the maximum face value.

Every roll becomes part of the adventure log in the custom object named Dice Roll ( Dice_Roll__c ), saving notation, totals, crit flags, and results for later bragging rights. Think of it as your character sheet for random fate.

In RPG terms, this service handles the dice mechanics, keeps the quest fair by enforcing rules, and ensures every adventurer’s roll is logged.

Screenshot of the Agentforce Adventure Tools app in Salesforce.

Note

Depending on the size of your screen, you might need to scroll down to see all the results.

Set a modifier for their rolls, choose the user rolling the dice, and one-tap roll common dice (a D4 is a four sided die, a D6 is a six sided die, and so on) with clear totals for each roll, critical callouts, and a tidy history of results. Roll initiative, cast your D20, and may the crits be ever in your favor.

Under the hood, it pairs a simple Apex controller with a Lightning Web Component—perfect for exploring Agentforce code suggestions and refactoring help. Use it as your adventuring hub while you learn, then customize it for your own campaigns.

Your mission: after a few code updates, a fellow developer noticed that the Quick Dice Roller isn’t working as expected. With Agentforce at your side, you must track down the bug and refine the code to restore balance to the roll.

This Way to Adventure!

  1. Return to the browser tab with your playground. If asked, log in again with your credentials.
  2. Click App Launcher to open App Launcher, then search for and select Agentforce Adventure Tools.
  3. In the Quick Dice Roller page, click any button to roll a die. For Example: In the D20 section, click the 1 D20 button.
  4. Notice that a toast message appears stating that the roll is saved, but the sum is shown as undefined.

Screenshot of a success banner in Salesforce.

Not only is the sum undefined, but the values displayed on each tile are incorrectly formatted, and the final sum is not being calculated or shown properly.

Screenshot of the D20 tile in the Agentforce Adventure Tools dice roller, with missing values for sum of rolls, and totals.

Time to investigate. Back to your hideout IDE tab.

Use Agentforce to Fix the App

First, confirm that you're still connected to your playground.

You could run a command like sf org display or sf org list. But to make things more fun and help you get started, ask Agentforce.

  1. From the Agentforce panel, scroll down and click Start a New Task.
  2. Ask Agentforce to show you the results using this prompt: What is the username of the Salesforce Org I'm currently connected to?
  3. Press enter. Note: If asked, approve the commands so Agentforce can perform the request.
Note

Agentforce may run several actions to complete your prompt. You may need to approve commands more than once, and button labels can change based on the action. If the final output meets your request, that is expected and fine.

You should see your username listed on the task's results. If you're not connected to that correct playground, change and open your default org.

Reveal the Source, Hero

  1. Press Ctrl+Shift+E (Windows) or Cmd+Shift+E (macOS) and open the Files Explorer view.
  2. Check if your project’s root directory has a folder named manifest, containing a package.xml file. Note: If your project’s root folder is missing the manifest folder, it will need to be added.
    • Make sure the dx-project folder is highlighted and click the new folder button.

New folder button highlighted.

  • Name the new folder manifest.
  • With the manifest folder selected, click the new file button and name it package.xml.

New file button highlighted.

  1. Replace the contents of your manifest/package.xml file with this:
<?xml version="1.0" encoding="UTF-8" standalone="yes" ?>
<Package xmlns="http://soap.sforce.com/2006/04/metadata">
   <types>
       <members>DiceRollService</members>
       <members>DiceRollServiceTest</members>
       <name>ApexClass</name>
   </types>
   <types>
       <members>Agentforce_Adventure_Tools</members>
       <name>CustomApplication</name>
   </types>
   <types>
       <members>Dice_Roll__c</members>
       <name>CustomObject</name>
   </types>
   <types>
       <members>Adventure_Tools</members>
       <members>Dice_Roll__c</members>
       <name>CustomTab</name>
   </types>
   <types>
       <members>Agentforce_Adventure_Tools_Landing</members>
       <members>Agentforce_Adventure_Tools_UtilityBar</members>
       <name>FlexiPage</name>
   </types>
   <types>
       <members>diceRoller</members>
       <name>LightningComponentBundle</name>
   </types>
   <version>64.0</version>
</Package>
  1. Press Ctrl+S (Windows) or Cmd+S (macOS) to save the file.
Note

When asked, if the Start a New Task button is not available, run Developer: Reload Window from the command palette and go through the steps again.

  1. Click the Agentforce icon “Agentforce vibes icon” again to open its window.
  2. Click the Start a New Task button.
  3. Ask Agentforce to retrieve the source from your org using this prompt: Please retrieve the source from my default org based on the manifest file
  4. Press enter. Note: If asked, approve the commands, and use your default org.
    • Alternatively, you can run the following command from the command palette: SFDX: Retrieve Source in Manifest from Org
  5. Ensure the class and LWC files are now listed.
    • Open the Explorer view.
    • Expand the folder force-appin the root directory.
    • Confirm that the subfolder named /force-app/main/default/classes has the DiceRollService class
    • Confirm that the subfolder named/force-app/main/default/lwc has the diceRoller Lightning web component's files.

If the files were retrieved from the org, you’re all set.

Note

Agentforce is powered by AI, and while it can be a powerful ally, it isn’t perfect. Sometimes it may suggest code or steps that aren’t quite right. Always review the output carefully, apply your own judgment, and test the solution before relying on it.

Use Agentforce to Format the Code

The Apex code formatting looks a bit off. Call on Agentforce to properly format the code for better readability and consistency.

  1. Press Ctrl+P (Windows) or Cmd+P (macOS) and open the Search File field.
  2. Type DiceRollService.cls and press Enter to select it.
  3. Note: It is the file located in the /force-app/main/default/classes folder.
  4. Click the Agentforce icon “Agentforce vibes icon” in the Activity Bar.
  5. Click the Start a New Task button.
  6. Ask Agentforce to format the code: copy this prompt and paste it into the input: Please format the DiceRollService class using prettier-plugin-apex. If the plugin is not installed, install it using npm and then use the npx prettier --write command.
  7. Press enter. If asked, click Allow, Run Command, Proceed While Running and Yes, proceed. You might need to click this a few times.
Note

Agentforce may temporarily display some warnings or errors. This is expected and part of the non-deterministic behavior of Agentforce. Just like a human developer working through a task, it might try different approaches that trigger warnings or errors. As long as the final output meets the request, everything is fine.

  1. Review the commands suggested by Agentforce. It uses the basic rules from Prettier Code Formatter. For more details, refer to the Salesforce Extensions documentation.
  2. Ignore any problems listed in the Problems tab.
  3. Double-check that everything looks correct, save the class with Ctrl+S (Windows) or Cmd+S (macOS).

Use Agentforce to Fix the Bug

Now, fix that bug.

  1. In the Agentforce window, click the Start a New Task button.
  2. Copy this prompt and paste it into the input:

The diceRoller LWC is not displaying the total sum of all dice rolls or indicating whether a roll was a critical hit.
Please help me identify and fix the issue. This component uses the DiceRollService Apex class.
I suspect the problem may be related to the visibility of fields in the RollResult inner class. Don't add debug logs, investigate the issue with the variables in the RollResult subclass to make sure they have the appropriate aura annotations for continuation. I'm pretty sure the problem is in those variables, in the Apex class. Not in the LWC. Important: keep the changes inside the RollResult class. Finally, after the changes are accepted, run the command npx prettier --write again to adjust the indentation.

3. Press enter/return and look over what Agentforce returns.

Note

Agentforce is powered by AI, and while it can be a powerful ally, it isn’t perfect. Sometimes it may suggest code or steps that aren’t quite right. Always review the output carefully, apply your own judgment, and test the solution before relying on it.

If the suggestion isn’t accurate, throws an error message, or doesn't resolve the issue, feel free to reject it and ask Agentforce to take another shot. If it's taking too long to process the request, you can also run Developer: Reload Window and go through the steps again.

Agentforce attempts to change the DiceRollService class and might display a split screen with the suggested fixes.

Screenshot of side-by-side screen with Agentforce’s suggestions for the DiceRollService class.

If Agentforce found and fixed the issue and the class is in good shape, accept the change and, if asked, click Save and Run Command. You can also save the file manually by pressing Ctrl+S (Windows) or Cmd+S (macOS). Now, deploy your changes.

  1. Scroll down in the Agentforce window and click the button Start a New Task.
  2. Ask Agentforce to deploy the changes to your org by using the prompt below: Deploy the DiceRollService.cls class to my default org
  3. If asked, approve the commands.
  4. If the deploy command fails, ask Agentforce to redo the action, or fix the code manually, then try to deploy the source code again.
    • You can also run SFDX: Deploy This Source to Org with the DiceRollService.cls class open in your workspace.

Test Your Fix (and Your Luck)

Time to roll again, adventurer! Just like before, test your luck. Add a modifier and choose how many dice to hurl into fate’s hands. With the right prep, your results should now appear clearly, showing the total and revealing any critical hits.

May your rolls be ever in your favor!

  1. Back in your playground, refresh the Agentforce Adventure Tools page.
  2. In the Modifier field, add a positive or negative value.
  3. Click the buttons to roll the dice and check the results. Do this a few times.

Screenshot of the Agentforce Adventure Tools app in Salesforce showing the Quick Dice Roller after a fix.

If the dice rolls are now showing the totals and sums like in the screenshot above, and the rolls are being saved in the Dice Rolls object, your task is complete. Victory is yours!

To see the list view of the rolls, navigate to the Dice Rolls tab and select the All Rolls List View to see the recent rolls. Click on any of the records to see the details of the roll.

Screenshot of a Dice Roll record detail page in the Agentforce Adventure Tools app on Salesforce.

Use Agentforce to Improve the Code (and Roll a Perception)

As a developer who follows Salesforce best practices and keeps up with the latest updates, you know that @trackdecorators are used to make fields reactive.

  1. Open the IDE tab.
  2. Press Ctrl+P (Windows) or Cmd+P (macOS) and open the Search File field.
  3. Type diceRoller.js and press Enter to select it.

This will open the diceRoller.js file from the /force-app/main/default/lwc/diceRoller/ folder.

Rolling a high perception check, you spot that the tileResults variable in the diceRoller controller might be using an unnecessary @track decorator. Time to investigate. Back to Agentforce!

  1. From the Agentforce window, click the button Start a New Task.
  2. Copy this prompt and paste it into the input:

I think the @track decorator might be unnecessary in the diceRoller.js file. As you know, @track is only needed for objects or arrays when mutating their internal properties directly. In this case, the code reassigns the entire tileResults object using the spread operator (...this.tileResults), so reactivity should still work without @track.
Instead of simply removing the decorator, let’s take a safer approach. What do you think about replacing the @track tileResults variable with a getter and setter?
Rename the internal variable to _tileResults, define a simple get tileResults() that returns the _tileResults, and a simple set tileResults(value) that sets the _tileResults. I think we might also remove the @track import. Please don't change anything else.
  1. Press enter/return.
Note

Agentforce may attempt several passes when editing files, and that’s perfectly fine. It’s making sure nothing is left behind.

If a suggestion isn’t accurate or doesn’t resolve the issue, reject it and Agentforce tries again. If it takes too long to process a request or won’t cancel a task, run Developer: Reload Window and try again.

Screenshot of side by side screen with Agentforce's suggestions for the diceRoller.js file.

  1. Once you have good results, click Save.
  2. Confirm that the variable is renamed and the getter and setter is successfully created in the diceRoller.js file and Agentforce uses the values provided in the prompt.
  3. From the Agentforce window, click the button Start a New Task.
  4. Ask Agentforce to deploy the changes to your org, by using the prompt below: Deploy the diceRoller LWC to my default org
  5. If asked, approve the commands.
    • To force a manual deployment, you can run SFDX: Deploy This Source to Org with the diceRoller.js file open in your workspace.
  6. Return to the Agentforce Adventure Tools app.
  7. Retest the Quick Dice Roller to ensure everything is still working smoothly.

End of Quest, Start of Mastery

Agentforce is a powerful ally when you’re investigating bugs or refactoring code, offering guidance, insights, and a steady hand as you navigate the challenges of development.

Think of it like summoning a helpful wizard during your quest. Sure, casting the spell yourself (aka running the command manually) might be faster sometimes, but using Agentforce helps you learn the ropes and uncover hidden lore.

All we have to decide is how to roll with the dice we’re given. The more you team up with it, the stronger its code-crafting powers become!

Resources

在 Salesforce 帮助中分享 Trailhead 反馈

我们很想听听您使用 Trailhead 的经验——您现在可以随时从 Salesforce 帮助网站访问新的反馈表单。

了解更多 继续分享反馈