--- schema_version: "1" id: a61ec3b5fe2501258af872a5e94047f37221678be6113c6a13216e45160bba1d title: Configure Your Org for React App Development collection: developer version: current locale: en-us portal_url: https://docs.salesforce.com/developer/current/en-us/salesforcedx/einsteinfordevs/guides/files/reactdev-setup.md canonical_url: https://developer.salesforce.com/docs/platform/einstein-for-devs/guide/reactdev-setup.html source_site: developer.salesforce.com content_type: documentation content_hash: 59db81a00cff7a6761217bb0d2a63d17d790164b9647f993384470f18a6952c6 products: - Agentforce Vibes Developer Guide (Deprecated) - salesforcedx --- # Configure Your Org for React App Development Before you can begin working with React apps, enable the Salesforce app domain 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. ## Review Prerequisites and Considerations **Available in**: Salesforce Multi-Framework is available in Lightning Experience in Enterprise, Unlimited, and Developer editions where English is the default language. Before you begin: - Confirm that you have the latest versions of the [Salesforce CLI](https://developer.salesforce.com/docs/atlas.en-us.sfdx_setup.meta/sfdx_setup/sfdx_setup_update_cli.htm) and the [Salesforce Extension Pack](https://marketplace.visualstudio.com/items?itemName=salesforce.salesforcedx-vscode) 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, 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. Keep these limitations and considerations in mind: - Packaging is unsupported. - Namespaced orgs are unsupported. - For developer orgs, only `c` namespaces are supported. ## Enable the Salesforce App Domain | USER PERMISSIONS NEEDED | | | :----------------------------------- | :------------------------ | | To enable the Salesforce App Domain: | **Customize Application** | If you plan to create an internal React app for employees signing in with their Salesforce credentials, ensure that the Salesforce app domain is enabled. This separate, top-level domain facilitates web app hosting on Salesforce, while enforcing strong browser-native isolation boundaries. When the domain is enabled, your app is served from `.my.salesforce.app`. **note:** After you enable the Salesforce app domain, you can’t disable it. `salesforce.app` domains are unavailable for Gov Cloud or Air Gap orgs. For the Salesforce app domain to function correctly, the Salesforce Edge Network is required. For more information, see [Salesforce Edge Network](https://help.salesforce.com/s/articleView?id=xcloud.domain_name_edge_network.htm). Additionally, the Require first-party use of Salesforce cookies domain setting must be disabled. 1. From Setup, in the Quick Find box, enter Salesforce Multi-Framework, and select **React Development with Salesforce Multi-Framework**. 2. Click **Enable Domain**. 3. Click **Enable** to confirm the change. 4. Then, from Setup, in the Quick Find box, enter My Domain, and select **My Domain**. 5. In the Routing and Policies section, click **Edit** and ensure that **Require first-party use of Salesforce cookies** is disabled. ## Configure Agentforce Vibes 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](https://developer.salesforce.com/docs/platform/einstein-for-devs/guide/einstein-setup.md). If you don’t plan to use Agentforce Vibes to develop your React apps, you can skip the setup steps in this section. ### Activate Salesforce MCP Servers To activate the [Metadata Experts MCP Server (Beta)](https://developer.salesforce.com/docs/platform/einstein-for-devs/guide/mdexperts.md) and the [Metadata API Context MCP Server (Beta)](https://developer.salesforce.com/docs/atlas.en-us.api_meta.meta/api_meta/meta_salesforce_api_mcp_intro.htm) 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**. ### Confirm Your Agentforce Vibes Configuration 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](https://developer.salesforce.com/media/einsteinfordevs/vibes_icon.png '{"class": "image-icon-sm"}'). 2. In VS Code, [create or open a Salesforce DX project](https://developer.salesforce.com/docs/platform/sfvscode-extensions/guide/create-project.html), and then [connect to a Salesforce org](https://developer.salesforce.com/docs/platform/sfvscode-extensions/guide/default-org.html). 3. Click **Manage MCP Servers** ![Manage MCP Servers icon](https://developer.salesforce.com/media/einsteinfordevs/codicon_server_icon.png '{"class": "image-icon-sm"}') 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](https://developer.salesforce.com/media/einsteinfordevs/codicon_law_icon.png '{"class": "image-icon-sm"}') and confirm that all Salesforce skills and all Salesforce rules are enabled. **tip:** If you encounter setup issues, check out the [Troubleshooting Checklist](https://developer.salesforce.com/docs/platform/einstein-for-devs/guide/einstein-troubleshoot.md). ### (Optional) Set Up the Content Read-Only MCP Server and Tools (Beta) 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. **note:** The Content Read-Only MCP Server is a pilot or beta service that is subject to the Beta Services Terms at [Agreements](https://www.salesforce.com/company/legal/)-[Salesforce.com](http://Salesforce.com) or a written Unified Pilot Agreement, if executed by Customer, and applicable terms in the [Product Terms Directory](https://ptd.salesforce.com/). 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. #### Enable the Content Read-Only MCP Server in Your Org 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](#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. #### Configure the Content Read-Only MCP Server in Agentforce Vibes Extension 1. Open VS Code and authorize the org in which you set up the content-readonly MCP server. 1. Open the Command Palette and run [SFDX: Authorize an Org](https://developer.salesforce.com/docs/platform/sfvscode-extensions/guide/default-org.html). 1. Select **Production** if the org is a production org. 1. Enter an org alias, and make a note of it for later. 1. Log in to your org to authenticate it, and then go back to VS Code. 1. Open the Agentforce Vibes Extension, and then open the **Remote Servers** tab. 1. 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. 1. Click **Add Server**. 1. Connect to the Salesforce org that contains your CMS content. 1. In the code editor, in the content-readonly configuration, add the `cmsAssetProviderOrg` parameter. 1. Set the parameter value to the org alias that you created in step 1. 1. 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. #### Enable Data 360 Hybrid Search for the search_electronic_media MCP Tool 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)](https://help.salesforce.com/s/articleView?id=xcloud.cms_base_data_kit_setup.htm). 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](https://help.salesforce.com/s/articleView?id=data.c360_a_hybridsearch_index_create.htm). ### (Optional) Configure Agentforce Conversation Client 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](https://developer.salesforce.com/docs/platform/accsdk/overview). Your Salesforce org must meet specific architectural requirements to support session persistence between Salesforce and the React application. #### Set up Agentforce Employee Agent (AEA) 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. #### Configure Routing and Policies 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. To configure this policy: 1. Go to **Setup**. 2. In the Quick Find box, enter `My Domain`, and then select **My Domain**. 3. Under the **Routing and Policies** section, locate the checkbox for "Require first-party use of Salesforce cookies" (you may need to click **Edit** first). 4. Uncheck **Require first-party use of Salesforce cookies**. 5. Click **Save**. #### Set Up Trusted Domains for Agentforce Conversation Client 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:`) must be registered in the Trusted Domains for Inline Frames registry within Salesforce Session Settings. To add a trusted domain: 1. At the top of any Salesforce page, click the setup gear icon, then click **Setup**. 2. From the Setup page, enter `Session` in the Quick Find box, and then select **Session Settings**. 3. Scroll down to **Trusted Domains for Inline Frames** and click **Add Domain**. 4. Enter the domain for your web app (such as, `http://localhost:`). Example: `http://localhost:5173`. 5. Select **Lightning Out** for the iFrame type and save.