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 you have the latest versions of the Salesforce CLI and the Salesforce Extension Pack installed.
  • 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 logging 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 required. For more information, 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 the global Agentforce preference is enabled:

  1. Go to Setup Einstein Einstein Generative AI Agentforce Studio Agentforce Agents.
  2. Enable the Agentforce preference.

To ensure 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 deslect 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 don’t plan to use Agentforce Vibes to develop your React apps, you can skip the setup steps in this section.

To add Salesforce CMS images and brand your React app while you vibe code, set up the content-readonly MCP server. 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). Also select Ingest CMS Content into Data 360 (Beta). This is the first step to enable Data 360 hybrid search for the search_electronic_media tool.
  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. Note: To use the search_electronic_media tool, you must complete some additional setup steps. See Enable Data 360 Hybrid Search for the search_electronic_media MCP Tool.
  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 in which 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, from 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 1.
  12. Save the MCP configuration file.

The content-readonly server and most of its tools are now ready to use in the Agentforce Vibe Extension. To use the search_electornic_media tool, follow the next set of steps about enabling Data 360 hybrid search.

To use the search_electronic_media tool, ingest your CMS content into Data 360 by deploying the CMS Base (Beta) data kit, and then configure a search index. Complete these setup steps in the same org where you enabled the content-readonly MCP server.

First, ingest your CMS content into Data 360 by following the steps in Ingest CMS Content into Data 360 (Beta).

Then manually create the search index in Data 360.

  1. From the App Launcher, select Data Cloud.
  2. Click Search Index | New.
  3. Click Advanced Setup | Next.
  4. On the Select Source DMO page, select Hybrid Search.
  5. Select the default data space, and then select Electronic Media for the source object.
  6. Click Next.
  7. Set up chunking and vectorization.
  8. Click Manage Fields, select Description, and then save your changes.
  9. Open the Chunking Strategy for the Description field.
  10. Select Passage Extraction, activate Prepend fields to each chunk, and then select Name for the field.
  11. Click Next.
  12. Configure source object fields for filtering and ranking factors.
  13. Drag these direct fields to the Selected fields list: Data Source Object, Electronic Media Type, and Is Primary.
  14. Open Related Fields, and then drag the Digital Content Channel to the Selected fields list.
  15. Click Next.
  16. Review and build the index.
  17. Enter Electronic Media Sfdc for the Search Index Configuration Name, and enter Electronic_Media_Sfdc for the API name.
  18. Review the configuration and target data model objects.
  19. Save your changes.

For more information about Data 360 search indexes, see Create a Hybrid Search Index with Advanced Setup.