Build a Multi-Framework App with React

In this workshop, you'll use Agentforce Vibes to build a React app on Salesforce in small, visible increments. Each exercise adds one capability at a time so you can see the app evolve from a simple shell into an interactive Partner Command Center backed by Salesforce data.

Prerequisite

Before starting this workshop, complete Workshop 2, Exercise 1: Launch and Explore Agentforce Vibes.

That exercise walks you through opening Agentforce Vibes, upgrading to Vibes 2.0, reviewing the sidebar, and understanding the controls you'll use in this workshop.

Scenario

Partner managers need a focused command center for understanding partner performance. The app starts with mock data so you can build the user experience quickly. Then you add interactivity with React, connect the app to Salesforce data, add workflow recommendations, and deploy it to your org.

What You'll Build

• A React app called Partner Command Center.
• Partner performance cards with mock data.
• Summary metrics calculated from visible partners.
• Tier filters, search, sorting, pagination, and a detail panel.
• A Salesforce-backed version that loads partner Accounts and related Opportunities.
• Recommended next actions based on partner performance.
• A deployed app that runs from your Salesforce org.

Continue with the exercises

• Exercise 1: Create the App Shell and Mock Data
• Exercise 2: Add Interactivity
• Exercise 3: Connect to Salesforce and Add Workflow
• Exercise 4: Deploy to Your Salesforce Org