Exercise 1: Create the App Shell and Mock Data

In this exercise, you'll create a Salesforce Multi-Framework React app and build the first visible version of the Merchant Operations Center. You'll start with an app shell, add mock storefront data, calculate summary metrics, and add simple status labels.

If you know LWC, here is the mental model

LWC	Multi-Framework React
Component bundle (HTML, JS, CSS)	Vite app (React and TypeScript), built into static files
@wire and Lightning Data Service	Data SDK: GraphQL on UI API, plus fetch
lightning-* base components	shadcn/ui components styled with Tailwind, preinstalled in the project
Deployed as a LightningComponentBundle	Deployed as a UI Bundle
Runs inside the Lightning Experience shell	Runs on its own domain, outside the Lightning shell

Step 1: Create the React App Project

1. Open Agentforce Vibes from Setup.

2. Open the Agentforce Vibes Sidebar.

3. Close any open chat windows.

4. Click New Project.

   

5. Select React App.

   

6. Click Create a Project.

7. Select Internal User App.

   

   What does "Internal User App" mean?

   It means the app is for the users of your own org. Once deployed, it shows up in the App Launcher like any other Salesforce app, and access is controlled with a permission set. You'll set that up in Exercise 4.

   Apps for external users, such as customers or partners, are exposed differently, through an Experience Cloud site. A React app can also be embedded inside a Lightning page as a microfrontend, wrapped by a Lightning web component.

8. Update the project name to merchant-operations-center.

   

9. Click Create Project.

10. Wait for Vibes to create the project. It automatically opens in a new workspace.

What's in the project?

The project isn't empty. Vibes created it from the Internal User App template, a working React app you'll reshape into the Merchant Operations Center.

force-app/main/default/
├── applications/
│   └── merchantoperationscenter.app-meta.xml                   # CustomApplication: puts the app in the App Launcher
├── permissionsets/
│   └── merchantoperationscenter_Access.permissionset-meta.xml  # Grants users access to the app
└── uiBundles/
    └── merchantoperationscenter/                               # The React app (React, Vite, TypeScript, Tailwind)
        ├── merchantoperationscenter.uibundle-meta.xml          # UI Bundle metadata
        ├── package.json                                        # dev, build, and test scripts
        └── src/                                                # App source, including shadcn/ui components

The starter app has a Home page and an Account search example that reads Salesforce data. Nothing is in your org yet. You'll deploy the app in Exercise 4.

Step 2: Install and Run the Starter App

1. Once the new project is loaded, open the Agentforce Vibes Sidebar.

2. Agree to the extension terms, then click Enable Agentforce.

3. Open a terminal with Terminal > New Terminal. It opens in the project root.

4. Install the project's tooling:

   npm install

5. Move into the React app and install its dependencies:

   cd force-app/main/default/uiBundles/merchantoperationscenter
   npm install

   You'll see npm warnings about vulnerabilities and engines. They're expected. Don't run npm audit fix --force, as it can break the project.

6. Click the Preview button at the top of the Agentforce Vibes extension. This starts the Vite dev server, which serves the app with instant reloads.

   

7. When prompted to select a UI Bundle, select merchantoperationscenter.

   

8. Look around the starter app. It has a React App header and a Home page. You'll replace both in the next step.

   

Step 3: Build the App Shell

1. In the Agentforce Vibes Sidebar, toggle from Chat mode to Plan mode.

   

2. Use this prompt to ask Vibes to plan the first visible version:

   Turn this Salesforce Multi-Framework React app, merchant-operations-center, into the Merchant Operations Center.
   
   Use Merchant Operations Center as the user-facing app title.
   
   For the first version, build only the app shell with a header, page title, and empty main content area.
   
   Use clean Salesforce-inspired styling.

3. Review the plan Vibes proposes.

4. Approve the plan to switch back to Chat mode and let Vibes build the app shell. Keep an eye on Live Preview: it updates as Vibes edits each file.

5. If Vibes asks to run setup, install, or build commands, approve them.

6. Review the files Vibes creates or updates.

7. When Vibes finishes, confirm that Live Preview shows the Merchant Operations Center header in place of the starter React App header.

What just happened?

This is the usual React workflow:

1. npm install downloaded the project's dependencies in Step 2.
2. The Vite dev server that Live Preview started picked up Vibes' changes. It serves your app with instant reloads and proxies Salesforce calls using your authenticated org session. That's what Live Preview shows.
3. Nothing has been deployed yet. Your changes live only in this workspace until Exercise 4, where the app is built into static files (the dist folder) and deployed to your org as a UI Bundle.

So the loop is: edit, see it in Live Preview, and deploy when you're ready.

Step 4: Add Mock Storefront Data

1. Use this prompt to add realistic mock data:

   Add mock storefront performance data to the Merchant Operations Center app.
   
   Each storefront should include:
   - storefrontName
   - cuisine
   - city
   - ordersToday
   - revenue
   - avgRating
   - openOrders
   
   Render the storefronts in a simple list or card grid.

2. Preview the app and confirm that storefront cards or rows appear.

   

3. If the data renders but the layout feels crowded, ask Vibes to keep the layout simple before moving on.

Step 5: Add Summary Cards

1. Use this prompt to add calculated summary metrics:

   Add summary cards at the top of the Merchant Operations Center.
   
   Calculate from the mock storefront data:
   - Total Storefronts
   - Orders Today
   - Total Revenue
   - Average Rating
   - Open Orders

2. Preview the app and compare the summary cards with the storefront list.

   

3. Ask Vibes to fix any metric that looks incorrect before continuing.

Step 6: Add Status Labels

1. Use this prompt to make the storefront cards easier to scan:

   Add visual status labels to each storefront card.
   
   Use:
   - Strong if average rating is 4.5 or higher
   - Healthy if average rating is 4.0 to 4.4
   - Needs Attention if average rating is 3.0 to 3.9
   - At Risk if average rating is below 3.0

2. Preview the app and confirm that each storefront has a status label.

   

3. These labels and rating cutoffs match the Review Storefront Health Flow you reviewed in Explore Salesforce Hosted MCPs, so a storefront reads the same way across the workshop.

4. If a status label does not match the storefront's rating, paste the example into Vibes and ask it to correct the calculation.

Summary

• You created a Salesforce Multi-Framework React app.
• You installed the dependencies and previewed the starter app.
• You built the Merchant Operations Center app shell.
• You added mock storefront performance data.
• You calculated summary metrics from the mock data.
• You added status labels so storefront health is easy to scan.

In the next exercise, you'll make the app interactive with filters, search, sorting, and a detail panel.