Co-Create and Preview Your Lightning App
Learning Objectives
After completing this unit, you’ll be able to:
- Explain the dependency order Agentforce Vibes follows to build the app.
- Review generated metadata visually with the Metadata Visualizer.
- Run the generated Jest tests to verify the component works as expected before you deploy.
Co-Create the App in Dependency Order
After you approve the plan, Agentforce Vibes executes it using the loaded MCP tools and AI Skills. In general, Agentforce Vibes works from the data model outward and builds in this order. Note that we won’t check the steps in this unit, but they help you to complete the challenge in the next unit.
-
Custom object. It creates the Tracked_Asset__c object first, since everything else references it.
-
Custom fields. It adds the fields that the Lightning web component form will capture, such as the asset’s serial number, status, purchase date, and assigned owner.
-
Custom Lightning web component form. It generates the assetForm Lightning web component bundle, including the HTML template, the JavaScript class, and the .js-meta.xml configuration file.
-
Jest tests. It uses the Jest testing framework to create local unit tests for the Lightning web component.
-
Lightning record page. It builds a Flexipage that represents the metadata associated with a Lightning record page. The page displays the assetForm component on each asset record, so the form appears without you opening Lightning App Builder manually.
-
Custom tab. It creates a tab so that the object has a home in the navigation bar.
-
Lightning app. It creates the Asset Tracker app with the Tracked Asset tab, and it adds a View action override so Tracked_Asset_Record_Page is the app default for Tracked_Asset__c.
-
Permission set. It creates a permission set that grants access to the object, its fields, the tab, and the app.
Review and Approve App Files
As Agentforce Vibes works, it drafts files in your project. How much it pauses for your approval depends on the session mode that you can set from the Agentforce Vibes Permissions and Safety settings tab. The preset Run safe defaults mode auto-approves read-only actions but still asks before file edits and other write operations.
For each file that Agentforce Vibes drafts, you can make precise, line-by-line edits, or choose to accept or reject all changes in the file. Reviewing changes as they’re generated catches issues early, before they cascade into later stages.
To easily review generated metadata files, use the built-in Salesforce Metadata Visualizer extension. Instead of reading raw metadata files, you see visual diagrams of your metadata, including fields, relationships, and properties. To open Metadata Visualizer, select Visualize next to the desired file name in the Agentforce Vibes Chat interface.
Test Lightning Web Components
As it followed your plan, Agentforce Vibes generated Jest tests alongside the Lightning web component form. Jest is the testing framework for Lightning web components, and these tests verify that your component renders and behaves correctly. For example, Jest tests can confirm that the form displays its fields and responds when a user saves a record. Running these tests now, before you deploy, confirms the component works while it's still easy to fix.
Jest tests run locally. Run them from the terminal with the command npm run test:unit, or ask Agentforce Vibes to run them for you with a prompt like “Run my local Jest tests.” , then read the results. A full passing test suite confirms your component behaves as expected. A failing test points to what to fix, and how Agentforce Vibes can help you resolve it.
Always review generated tests for sound logic, meaningful assertions, and coverage of edge cases. A test that passes but asserts something trivial can give you a false sense of confidence.
You now have a complete Lightning app, including a data model, the assetForm component, the record page, the tab, the app, and the permission set, along with passing tests. In the next unit, you deploy the app and set up the access that puts it in front of users.