Build a Lightning App
Build an Agent
Add Images and Brands to your React App (Beta)
Add Agentforce Conversation Client to Your React App
Validate and Optimize React Apps (Developer Preview)
Create Projects
To add an existing image or brand to your React app, Agentforce Vibes Extension uses the content-readonly MCP server (beta) and tools. To search for and add a brand, it uses get_brand_instructions and search_brands. To search for and add an image, it uses search_electronic_media or search_media_cms_channels.
Before Agentforce can use this MCP server, make sure that it’s set up in the right org. See Set Up the Content Read-Only MCP Server and Tools in the Salesforce Multi-Framework Developer Guide for more information.
To add a brand to your React app, Agentforce Vibes uses the get_brand_instructions and search_brands MCP tools from the content-readonly MCP server. Together, these tools enable Agentforce Vibes to find a published brand from Salesforce CMS and apply it.
For example, this prompt would trigger the get_brand_instructions and search_brand tools: “Get brand GlobalDesignSystem and apply text fonts, colors and buttons to my React Web App - across all pages”
To add an image to your React app, Agentforce Vibes uses the search_electronic_media or search_media_cms_channels tools from the content-readonly MCP server. These sample prompts can trigger the MCP tools.
After you enter the prompt, Agentforce asks you to choose a method for the search. Both the search_electronic_media and search_media_cms_channels tools search for images that are published only to public CMS channels.