Add Images and Brands to Your React App Using the Content Read-Only MCP Server and Tools (Beta)

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 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.

• “Using media search, show me images of luxury apartments with a swimming pool.”
• “Using media search, retrieve images from Salesforce CMS showing exteriors of properties.”
• “Using media search, find the images that have palace vibes and a lakeside ceremony.”
• “Using media search, search for the official corporate logo and use it for the tenant portal.”

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.

• The search_electronic_media tool uses Data 360 hybrid search (vector search and keyword search) to find an image based on your prompt.
• The search_media_cms_channels tool uses keywords to find an image based on your prompt.