Configure Your Org for React App Development (Beta)

Before you can begin working with React apps, enable the Salesforce Multi-Framework beta and review the prerequisites for your org. Optionally, if you want to use content from Salesforce CMS in your app or add an Agentforce Conversation Client, complete the additional configuration steps.

Available in: For this beta release, Salesforce Multi-Framework for React app development is available only in sandbox and scratch orgs 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. This step ensures that you have the latest Agentforce Vibes 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:
    1. In Setup, make sure that Digital Experiences is enabled in your org. External React apps rely on Experience Cloud sites.
    2. In Digital Experiences | All Sites, click New. This step ensures that required dependencies are created.
    3. You don’t need to choose a site template, so click Back to Setup in the site creation wizard.
    4. Make sure that 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.
USER PERMISSIONS NEEDED
To enable Salesforce Multi-Framework (Beta):Customize Application

To build a React app, you must enable Salesforce Multi-Framework in your sandbox or scratch org.

After you enable Salesforce Multi-Framework, you can’t disable it.
  1. In Setup, search for Salesforce Multi-Framework and click React Development with Salesforce Multi-Framework (Beta).
  2. Click Enable Beta.
  3. Click Enable to confirm the change.

To vibe code a React app, first make sure that Agentforce Vibes is configured correctly in your development environment. For full prerequisites and enablement steps, see Agentforce Vibes Setup.

If you don’t plan to use Agentforce Vibes to develop your React apps, you can skip the setup steps in this section.

To activate the Metadata Experts MCP Server (Beta) and the Metadata API Context MCP Server (Beta) in your org, follow these steps.

  1. From Setup, in the Quick Find box, enter MCP, and then select MCP Servers.
  2. On the MCP Servers page, select metadata-experts.
  3. On the Metadata Experts MCP Server page, click Activate.
  4. Return to the MCP Servers page, and then select salesforce-api-context.
  5. On the API Context MCP Server page, click Activate.

After you activate the Salesforce MCP servers, open VS Code with the Agentforce Vibes extension.

  1. To open the Agentforce Vibes panel, from the Activity Bar, click Agentforce Vibes Agentforce Vibes icon.
  2. In VS Code, create or open a Salesforce DX project, and then connect to a Salesforce org.
  3. Click Manage MCP Servers Manage MCP Servers icon and confirm that these MCP servers are enabled and connected to your org.
    • Salesforce DX MCP server
    • Salesforce Metadata Experts MCP server
    • Salesforce API Context MCP server
  4. Click Manage Rules, Workflows, Hooks & Skills Manage Rules, Workflows, Hooks & Skills icon and confirm that all Salesforce skills and all Salesforce rules are enabled.

If you encounter setup issues, check out the Troubleshooting Checklist.

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, and then open the Remote Servers tab.
  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.