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.
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!
- Return to the browser tab with your playground. If asked, log in again with your credentials.
- Click
to open App Launcher, then search for and select Agentforce Adventure Tools.
- In the Quick Dice Roller page, click any button to roll a die. For Example: In the D20 section, click the 1 D20 button.
- Notice that a toast message appears stating that the roll is saved, but the sum is shown as undefined.
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.
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.
- From the Agentforce panel, scroll down and click Start a New Task.
- Ask Agentforce to show you the results using this prompt:
What is the username of the Salesforce Org I'm currently connected to?
- Press enter. Note: If asked, approve the commands so Agentforce can perform the request.
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
- Press Ctrl+Shift+E (Windows) or Cmd+Shift+E (macOS) and open the Files Explorer view.
- 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.
- Make sure the dx-project folder is highlighted and click the new folder button.
- Name the new folder
manifest
.
- With the manifest folder selected, click the new file button and name it
package.xml
.
- 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>
- Press Ctrl+S (Windows) or Cmd+S (macOS) to save the file.
- Click the Agentforce icon
again to open its window.
- Click the Start a New Task button.
- 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
- 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
- Alternatively, you can run the following command from the command palette:
- Ensure the class and LWC files are now listed.
- Open the Explorer view.
- Expand the folder
force-app
in 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.
- Open the Explorer view.
If the files were retrieved from the org, you’re all set.
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.
- Press Ctrl+P (Windows) or Cmd+P (macOS) and open the Search File field.
- Type
DiceRollService.cls
and press Enter to select it.
- Note: It is the file located in the
/force-app/main/default/classes
folder.
- Click the Agentforce icon
in the Activity Bar.
- Click the Start a New Task button.
- 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.
- Press enter. If asked, click Allow, Run Command, Proceed While Running and Yes, proceed. You might need to click this a few times.
- Review the commands suggested by Agentforce. It uses the basic rules from Prettier Code Formatter. For more details, refer to the Salesforce Extensions documentation.
- Ignore any problems listed in the Problems tab.
- 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.
- In the Agentforce window, click the Start a New Task button.
- 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.
Agentforce attempts to change the DiceRollService class and might display a split screen with the suggested fixes.
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.
- Scroll down in the Agentforce window and click the button Start a New Task.
- Ask Agentforce to deploy the changes to your org by using the prompt below:
Deploy the DiceRollService.cls class to my default org
- If asked, approve the commands.
- 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.
- You can also run
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!
- Back in your playground, refresh the Agentforce Adventure Tools page.
- In the Modifier field, add a positive or negative value.
- Click the buttons to roll the dice and check the results. Do this a few times.
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.
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 @track
decorators are used to make fields reactive.
- Open the IDE tab.
- Press Ctrl+P (Windows) or Cmd+P (macOS) and open the Search File field.
- 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!
- From the Agentforce window, click the button Start a New Task.
- 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.
- Press enter/return.
- Once you have good results, click Save.
- 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.
- From the Agentforce window, click the button Start a New Task.
- Ask Agentforce to deploy the changes to your org, by using the prompt below:
Deploy the diceRoller LWC to my default org
- 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.
- To force a manual deployment, you can run
- Return to the Agentforce Adventure Tools app.
- 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!