Build and Deploy a React App Using Agentforce Vibes (Beta)

Vibe code React using natural language prompts and let Agentforce Vibes handle scaffolding, metadata, and more. Use a template or sample app to get started, and build a full React app complete with custom objects and fields, images, and complex application logic, all through conversations with Agentforce Vibes.

A React app is a Salesforce DX project that includes React metadata represented by the UIBundle metadata type. For an overview of the typical project structure, see React App Project Structure.

The simplest way to create a React app is from the Agentforce Vibes Welcome Page. But before you begin, it helps to understand the available starting points.

A project template provides a great starting point for building your own React app. The two available templates provide the necessary UIBundle project structure and some basic features that differ by use case but don’t contain Salesforce metadata.

• Internal User App: Use this template to create apps for employees signing in with their Salesforce credentials. The template includes an Agentforce Conversation Client and object search.
  To use this template, make sure that you follow the configuration steps in Configure Agentforce Conversation Client.

• External User App: Use this template to create apps for business to business (B2B) and business to consumer (B2C) use cases, such as partners or customers signing in from outside your org. The template provides a prebuilt shell that includes an Experience Cloud site with several pages, navigation, authentication, and object search.

For an example of a more robust React app that includes the required UIBundle project structure, custom objects, sample data, and Apex classes, you can clone a sample app.

• Property Management App: Use this sample app to explore an internal employee app for managing properties rentals, tenant applications, and maintenance requests, along with a dashboard and an Agentforce Conversation Client. The app includes custom objects, permission sets, and sample data.
  To use this sample app, follow the steps in Configure Agentforce Conversation Client.

• Property Rental App: Use this sample app to test drive the external site where prospective tenants can view and apply for property listings. The app acts as a companion to the Property Management App and includes custom objects, permission sets, an Experience Cloud site, sample data, and Apex classes and triggers.

To get started:

1. In VS Code, create or open a Salesforce DX project, and then use the SFDX: Authorize an Org command from the Command Palette to authorize an org.
   Agentforce Vibes requires that you authorize an org before you can use any of its features.
2. To open the Agentforce chat interface, click the Agentforce Vibes icon in the VS Code Activity Bar.
3. To open the Agentforce Vibes Welcome Page, from the Command Palette, run Agentforce: Show Welcome Page.
4. Click the React App tile.
   
5. From this page, choose whether to create a project based on a template or clone a sample app.
   Enter the name of the project and the location on your computer where you want Agentforce Vibes to create the DX project. Then click Create Project.

Explore the metadata files in your new DX project. All the files are in the force-app/main/default/uiBundles/{MyProject} directory under their associated metadata directory, such as classes for Apex classes.

Plan Mode is the best place to start your development process. This read-only interaction mode helps you build a comprehensive implementation plan within the context of the connected org and the existing project code.

For example, you could start the process by instructing Agentforce Vibes, “Use the instructions in the README to build my React application called MyReactApp.” Including the app name produces better results.

If you have a specific purpose in mind, the more detail that you include in your prompt, the better the result. Here’s an example of a prompt that builds a food delivery app.

“I want you to build a customer-facing React app for a food delivery platform called 'Pronto'. The app must be intentionally simple: one page where customers can browse a restaurant list. Use only mock data for now. Give it a modern, easy-to-use design. Don’t build any other functionality.”

Then let Agentforce Vibes guide you through its project recommendations. Agentforce Vibes responds with its interpretation of your requirements, flags potential gaps, and asks you for clarification if necessary. For more details, see Agentforce Plan and Act Modes.

After you confirm your project requirements, switch to Act Mode. In this mode, Agentforce Vibes generates metadata according to the implementation plan. It uses Salesforce-hosted MCP servers and Salesforce skills, along with any external MCP servers, rules, and skills that you enable.

In general, Agentforce Vibes creates metadata in this order.

1. Create the data model, including custom objects and fields.
2. Create application and business logic, such as validation rules, Apex triggers, and flows.
3. Create UI components, such as pages and components.
4. Create permission sets.
5. Create the React app.

As Agentforce Vibes creates metadata files and installs dependencies, you can review each modification by using checkpoints.

At this stage of the project, if you configured the Content Read-Only MCP server and you have existing images in Salesforce CMS, you can ask Agentforce Vibes to add the images to your app. And you can use any published brand from Salesforce CMS and apply it to a React app. See Add Images and Brands to Your React App Using the Content Read-Only MCP Server and Tools (Beta).

You can also ask Agentforce Vibes to add a search feature or authentication. For example, if you tell Agentforce Vibes to add search to the Home page, the agent looks across directories to find any existing search features. If the agent can’t find the feature locally, it searches for a Salesforce-provided feature, such as object search. When Agentforce Vibes finds an appropriate feature, it provides information about the feature, installs it, and integrates it with your app.

To work with record data in a React app, use the Data SDK to run a GraphQL query or mutation operation. See Data SDK and GraphQL (Beta).

Or, to add an Agentforce chat feature to your app, integrate the Agentforce Conversation Client. See Integrate Agentforce Conversation Client in Your React App.

As you iterate on your app with Agentforce Vibes, you can use Live Preview to view changes right when you make them. When Agentforce Vibes saves changes to the source code, Live Preview automatically updates your app preview. Quickly review your app’s progress without deploying code or manually refreshing the preview in your browser.

1. To make sure you’re using the latest version of the CLI commands, run sf update before you start a Live Preview instance.
2. To open Live Preview, from the Command Palette, run SFDX: Open in Live Preview.
3. Select your React app. The app opens in a Live Preview tab in VS Code.

Before you create and run tests for your app, consider running the validation workflow. Ask Agentforce Vibes to validate your app. Apply any necessary fixes in the app so that you don't include anti-patterns in tests.

In the same Agentforce Vibes task, ask Agentforce Vibes to build unit tests. Your request can be simple, such as “Generate comprehensive tests for my React app” or "Generate tests for my-component.tsx." Tests use Vitest and the React Testing Library based on the vitest.setup.ts config file in your project.

You can then ask Agentforce Vibes to run the tests. Alternatively, run the tests from your app directory. For example:

After your tests pass, run the validation workflow again to confirm that your fixes resolved any issues and that no regressions remain.

With the context of your Salesforce DX project, Agentforce Vibes can create a custom test suite that meets code coverage requirements. Apex test methods can test validation rules, flows, object and field relationships, and more.

Before you can run Apex tests, you must deploy your project metadata to an org. To deploy, ask Agentforce Vibes, “Deploy all metadata to my org.” After deployment, Agentforce Vibes provides the deployment results, a deployment summary, and recommended next steps.

After you deploy your React app, run the unit tests. In your project, ask Agentforce Vibes, “Run all test classes” or “Run the test classes that I just deployed.” Agentforce Vibes provides the test results along with suggestions if any of the tests failed.

To access your deployed React app, open the App Launcher in your org and select the app. You can also access the React app from the App Launcher in the Salesforce mobile app. And for external apps that are based on an Experience Cloud site, you can access the site and some administration settings via the Digital Experiences app.

As you review your deployed app, you may find areas that you want to fix or improve. To refine your app, use the same Salesforce DX project and begin another conversation with Agentforce Vibes. You can even ask Agentforce Vibes to analyze your project and suggest specific areas for improvement.