Apply Salesforce CMS Content to a React App

Learning Objectives:

Explain how to connect a Salesforce CMS workspace to a React app.
Describe how to create, customize, and apply a brand to a React app.

Get Started with React Apps and CMS

Salesforce Multi-Framework is a framework-agnostic runtime that lets you build Salesforce apps with modern frontend frameworks, such as React or Angular, and run them directly on the Salesforce Platform.

With the Agentforce Vibes VS Code extension, Nigel opens his React app project, which he created from a preconfigured template. He wants to publish the rental listing that he created in Unit 2 to his app, but first, he must connect to a CMS workspace. Nigel can set up this connection agentically.

With a simple prompt such as, “Can you connect my React app to a new CMS workspace?” Agentforce Vibes calls the get_or_create_cms_workspace_and_web_app_channel tool from the Content Write MCP server. This tool automatically creates a new CMS workspace, ‘Property Management App Content Workspace,’ and a new CMS channel, ‘propertymanagementapp,’ and it associates the two together.

This CMS workspace-channel connection matches the same underlying CMS architecture described in Unit 1, and the workspace works like any other workspace, in which you can manually or agentically create CMS content. The new CMS channel is designed specifically for web apps, and you can’t modify it within your org.

If the combination web app channel and CMS workspace are already present in the connected org, the get_or_create_cms_workspace_and_web_app_channel tool is designed so that these aren’t duplicated. Instead, you can use the existing workspace and channel to create, manage, and publish content for your React apps.

Content in Other CMS Workspaces

While CMS best practices encourage a separate workspace for each use case, you may already have content in other CMS workspaces that you want to include in your React app. To include that content, share content from an existing workspace with the new workspace.

For example, the rental listing that Nigel created in Unit 2 lives in the Rentals workspace, not in his new React app workspace. To make this listing available to the new workspace, Nigel configures workspace sharing. When Nigel publishes the rental listing, it becomes available to the React app. Additionally, now that he’s configured sharing between these two workspaces, whenever Nigel adds a new listing to the Rentals workspace, it’s automatically shared with the React app workspace.

Publish Content to a React App

To make CMS content available to the React app, it must be published in the Property Management App Content Workspace. Publishing doesn’t mean that the content automatically appears on the React app, it only means that the content is available to the app and ready to be shared publicly.

Nigel prompts Agentforce Vibes to publish the rental listing, and the agent uses the publish_cms_content MCP tool from the Content Write MCP server. Once published, Nigel continues chatting with Agentforce Vibes to add the new listing to a page within his React app.

Brand a React App

A functional React app that displays content is only half the job: The app also needs to look like it belongs to your organization. Now that Nigel’s React app is connected to his org and to Salesforce CMS, there are a few different methods that he can use to seamlessly brand his app.

No matter the path Nigel chooses, Agentforce Vibes always calls the get_brand_instructions tool from the Content Read-Only MCP server. This tool retrieves guidelines that help Agentforce Vibes apply branding consistently.

Then, depending on Nigel’s request, Agentforce Vibes can use one or both of these skills.

experience-cms-brand-apply—This skill applies any brand to the current app whether it’s a published brand from CMS or a set of brand styles in the local VS Code project.
experience-cms-brand-create—This skill extracts a brand’s colors, fonts, and styles from a source like a URL or a PDF, and creates a local brand based on the source material.

A prompt such as, "Apply the approved Property Management app brand" triggers Agentforce Vibes to run experience-cms-brand-apply if that brand already exists in CMS. Whereas a prompt such as, "Create a brand from our style guide PDF and apply it here," combines the experience-cms-brand-create skill with experience-cms-brand-apply.

After Nigel has a brand to start with, he refines the brand’s properties with the Brand Toolkit (Beta) in the Salesforce Live Preview VS Code extension. Any of the brand skills or tools can prompt Agentforce Vibes to open the Brand Toolkit (Beta), or you can open it manually by using the command SFDX: Open Brand Toolkit (Beta).

Within the Brand Toolkit (Beta), adjust a brand’s styles right from where you’re building. When you save, your changes are saved locally in your SFDX project, not in Salesforce CMS, so you have flexibility to adjust the brand as needed without risk of unintentionally modifying the original. To apply a brand from the toolkit, click Copy Prompt for Agentforce Vibes, paste the tailor-made prompt in the Agentforce Vibes chat, and Agentforce Vibes takes care of the rest.

The Brand Toolkit (Beta) in the Live Preview extension.

Preview, Test, and Deploy

After a React app is generated, branded, and updated with all your CMS content, you don't need to redeploy it to notice changes. The Live Preview extension reflects content and branding updates as you iterate, so that you always get the latest version of your app. For more information about previewing, testing, and deploying React apps, review the Salesforce Multi-Framework Developer Guide.

This badge only scratches the surface of all the available AI skills and MCP tools available to work agentically with Salesforce CMS content and React apps. With these tools and Agentforce Vibes, the possibilities are endless.

Check out the Salesforce CMS Developer Guide for more information about specific AI skills for Salesforce CMS, and for a complete list of CMS MCP tools, review the Content Read-Only and Content Write MCP Server references.

Tempo stimato

Argomenti

Hai bisogno di aiuto?

Risorse per Headless 360 Platform