Build a React App Using Agentforce Vibes

Build and deploy React apps that run directly on the Agentforce 360 Platform with Salesforce Multi-Framework and Agentforce Vibes. React is an open-source framework for building modular and component-based web user interfaces (UIs), and provides a vast JavaScript library of components.

Vibe code your app using natural language prompts and let Agentforce Vibes handle scaffolding, metadata, and more. Use a template or sample app to get started, and add Salesforce data, Salesforce CMS content, and features such as search, authentication, and the Agentforce Conversation Client.

Before You Begin

Before you begin, configure your org for React development with Agentforce Vibes. For example, to use content from Salesforce CMS, set up the Content Read-Only MCP Server. Or to add an Agentforce Conversation Client, complete the required configuration steps. See Configure Your Org for React App Development in the Salesforce Multi-Framework Developer Guide.

Agentforce Vibes is enabled by default in supported editions. For developer environment prerequisites, see Set Up Agentforce Vibes.

To use the Metadata Experts and Metadata API Context MCP servers, an admin must activate them in your org. After activation, both servers are automatically enabled in Agentforce Vibes and no additional configuration is required.

To activate the Metadata Experts MCP Server (Beta) and the Metadata API Context MCP Server (Beta):

From Setup, in the Quick Find box, enter MCP, and then select MCP Servers.
Select metadata-experts, then click Activate.
Return to the MCP Servers page, select salesforce-api-context, then click Activate.

If you encounter setup issues, see the Troubleshooting Checklist.

Tip

Choose Your Starting Point

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 in the Salesforce Multi-Framework Developer Guide.

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.

Start from a Project Template

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.

Start from a Sample App

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:

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.
To open the Agentforce chat interface, click the Agentforce Vibes icon in the VS Code Activity Bar.
To open the Agentforce Vibes Welcome Page, from the chat, click + New Project.
Click the React App tile.
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.

If your connected org has existing metadata that’s relevant to the project, retrieve the source to the project before you begin a conversation with Agentforce Vibes. By doing so, you provide Agentforce Vibes with the full context of your org, so it can produce better responses.

Tip

Develop Project Requirements

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.

Generate Metadata

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.

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

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.

Preview Your 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.

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

Create Tests for Your App

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:

1cd force-app/main/default/uiBundles/internalapp npm run test

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

The Multi-Framework recipes repo provides examples of React component tests. Look for files that end with .test.tsx.

Note

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.

Thoroughly review generated tests for consistency in logic, meaningful assertions, and coverage of edge cases.

Important

Deploy and Test Your App

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 a deployed React app:

For internal apps, 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. Access to internal apps is controlled by permission sets or user profiles.
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.
For all apps, you can manage them in Setup in App Manager.

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.