Configure Your Org for React App Development

Before you begin working with React apps, configure the Salesforce app domain and review the prerequisites for your org. If you want to add an Agentforce Conversation Client, complete the additional configuration steps.

If you’re using Agentforce Vibes to build your app and you want to use content from Salesforce CMS, complete the steps to set up the Content Read-Only MCP Server.

Available in: Salesforce Multi-Framework is available in Enterprise, Performance, Unlimited, Developer, and Partner Developer editions hosted on Hyperforce where English is the default language.

Before you begin:

  • Confirm that your org is hosted on Hyperforce. Salesforce Multi-Framework is available only on Hyperforce.
    1. From Setup, in the Quick Find box, enter Company Information, and then select Company Information.
    2. In the Organization Detail section, if the instance name has a three-letter prefix followed by a number, such as abc123, your org is on Hyperforce.
  • Confirm that you have the latest versions of Salesforce CLI and the Salesforce Extension Pack installed. This step ensures that you have the latest Agentforce Vibes and CLI capabilities, such as updated Salesforce skills and Live Preview.
  • To create an external React app, such as a public-facing portal for customers or partners, make sure that:
    • Digital Experiences is enabled in your org. See Enable Digital Experiences in Salesforce Help.
    • You have the correct user licenses. You need Customer Community or Customer Community Plus user licenses for B2C portal users, and Partner Community and Channel Account for B2B users.

Keep these limitations and considerations in mind:

  • Packaging is unsupported.
  • Namespaced orgs are unsupported.
  • For developer orgs, only c namespaces are supported.
USER PERMISSIONS NEEDED
To enable the Salesforce App Domain:Customize Application

To create an internal React app for employees who log in with their Salesforce credentials, confirm that the Salesforce app domain is enabled. This separate, top-level domain hosts web apps on Salesforce while enforcing strong browser-native isolation boundaries. The domain is automatically enabled for most orgs and serves internal apps from .my.salesforce.app.

For the Salesforce app domain to function correctly, Salesforce Edge Network is also required. See Salesforce Edge Network in Salesforce Help.

  1. From Setup, in the Quick Find box, enter Salesforce Multi-Framework, and then select React Development with Salesforce Multi-Framework.
  2. If you see the Enable Domain button, click it and confirm your change. If not, the domain is already enabled.
  3. In the Quick Find box, enter My Domain, and then select My Domain.
  4. In the Routing and Policies section, if Salesforce Edge Network isn’t enabled, click Edit, enable the setting, and save your changes.

With the Agentforce Conversation Client (ACC), you can integrate conversational AI interactions into your React apps for internal employee use cases. For more details on Agentforce Conversation Client, check out the Agentforce Conversation Client (ACC) Developer Guide.

Your Salesforce org must meet specific architectural requirements to support session persistence between Salesforce and the React application.

You must have at least one Agentforce Employee Agent (AEA) configured with topics and actions. Additionally, ensure that the global Agentforce preference is enabled:

  1. From Setup, in the Quick Find box, enter Agentforce Agents and then select Agentforce Agents.
  2. Enable the Agentforce preference.

To ensure that the ACC can maintain state within the React application, the Salesforce org must permit the use of cookies for the integration path.

Cookie Policy: The requirement for first-party use of Salesforce cookies must be disabled within the My Domain settings.

  1. From Setup, in the Quick Find box, enter My Domain, and then select My Domain.
  2. In the Routing and Policies section, if Require first-party use of Salesforce cookies is enabled, click Edit, and then deselect the setting.
  3. Save your changes.

Because React applications are typically hosted on origins external to Salesforce (including localhost during development), the Salesforce iframe must be explicitly authorized to render on those domains.

Domain Authorization: The application’s hosting domain (for example, https://myapp.com or localhost:<PORT>) must be registered in the Trusted Domains for Inline Frames registry within Salesforce Session Settings.

  1. From Setup, in the Quick Find box, enter Session, and then select Session Settings.
  2. In the Trusted Domains for Inline Frames section, click Add Domain.
  3. Enter the domain for your web app, such as http://localhost:<PORT_NUMBER>. For example, http://localhost:5173.
  4. Select Lightning Out for the iFrame type and save your changes.

If you’re using Agentforce Vibes to create your React app, you can add Salesforce CMS images and branding by setting up the content-readonly MCP server. Otherwise, you can skip the setup steps in this section.

This MCP server enables Agentforce Vibes to get content, such as images and brands, from a Salesforce org and then apply that content to your React app.

The Content Read-Only MCP Server is a pilot or beta service that is subject to the Beta Services Terms at Agreements-Salesforce.com or a written Unified Pilot Agreement, if executed by Customer, and applicable terms in the Product Terms Directory. Use of this beta service is at the Customer’s sole discretion.

The Non-GA Services are used in conjunction with GA Services which consume paid credits or entitlements (“entitlements”). Any corresponding consumption of entitlements arising from Customer’s use of the Non-GA Services shall not give rise to any refund or credit rights.

The content-readonly MCP server is available only in Developer Edition orgs or scratch orgs.

Complete these setup steps in the org that contains your CMS content. This org is likely your production org connected to your sandbox.

  1. From Setup, in the Quick Find box, enter CMS, and then select Salesforce CMS.
  2. Turn on Access the Content Read-Only MCP Server and Tools (Beta).
  3. In the Quick Find box, enter MCP, and then select MCP Servers.
  4. Find the content-readonly MCP server and click to open its detail page.
  5. Click Activate. This activates the MCP server and all the tools within it. To use the search_electronic_media tool, you must complete additional setup steps. See Deploy the CMS Base Data Kit to Ingest CMS Content into Data 360 in Salesforce Help.
  6. (Optional) On the detail page, copy the Server URL and save it for the next set of steps.
  1. Open VS Code and authorize the org where you set up the content-readonly MCP server.
  2. Open the Command Palette and run SFDX: Authorize an Org.
  3. Select Production if the org is a production org.
  4. Enter an org alias and make a note of it for later.
  5. Log in to your org to authenticate it, and then go back to VS Code.
  6. Open the Agentforce Vibes Extension and from the Toolkit, in MCP Servers, click Add Server.
  7. Enter content-readonly in the Server Name field, and enter https://api.salesforce.com/platform/mcp/v1-beta.2/platform/content-readonly in the Server URL field. Note: This URL is for DE orgs. If you copied the Server URL from the MCP detail page in Setup, you can paste it in the field instead.
  8. Click Add Server.
  9. Connect to the Salesforce org that contains your CMS content.
  10. In the code editor, in the content-readonly configuration, add the cmsAssetProviderOrg parameter.
  11. Set the parameter value to the org alias that you created in step 4.
  12. Save the MCP configuration file.

The content-readonly server and most of its tools are now ready to use in the Agentforce Vibes Extension. To use the search_electronic_media tool, deploy the CMS Base data kit and enable the search index if you haven’t already.