Use HXL Widgets on Channels That Support MCP

Some AI agents use MCP to interact with data in your org, such as Claude Desktop, Slackbot, and ChatGPT. HXL widgets are compatible with the MCP Apps industry standard, which means that the widget works in any client that is MCP Apps compatible.

HXL widgets don’t currently render when using Block Kit for Slackbot. Block Kit extends the MCP Apps protocol so MCP servers can return native Slack Block Kit JSON when Slackbot is the client.

Warning

To use an HXL widget on channels that support MCP, you must create a custom MCP server and add associated tools and resources. You can also update an existing custom MCP server if you prefer.

Before You Begin 

It’s assumed that you’ve already:

  • Set up your local DX developer environment, such as installing Salesforce CLI and the VS Code Salesforce extensions. See Get Started by Creating a New DX Project. (You can ignore the Dev Hub instructions unless you plan to create a scratch org.)

  • Created a local Salesforce DX project that contains the metadata files for your widget and custom lightning types.

    For channels that support MCP, be sure you’ve created two object-based custom Lightning types. See Connect Your Widget to a Custom Lightning Type.

  • Authorized your Salesforce development org so you can deploy and retrieve metadata to and from it.

    Use the VS Code SFDX: Authorize an Org command or the org login web Salesforce CLI command. In the Salesforce CLI command examples, we assume you gave your org the alias my-org.

  • Deployed the widget and custom Lightning types from your DX project to your Salesforce org.

General Workflow 

Here are the general steps to use your widget on channels that support MCP:

  1. Create the Apex action that returns data from your org for your widget to display.
  2. Create or modify a custom MCP server. This step includes creating the MCP tool that uses the Apex action and wiring it up to the widget.
  3. Configure your org so your AI clients can access it through the custom MCP server.
  4. Connect your MCP client to your org and test your widget on it.

Vibe Code 

These MCP topics show how to complete tasks manually, such as using a Salesforce CLI command to deploy metadata and editing XML files in the VS Code editor. We think it’s useful to document all these details because you learn how all the HXL building blocks fit together, which makes it easier to troubleshoot problems. And saves you tokens.

However, you can also use Agentforce Vibes to complete many of these tasks. For example, rather than run the project deploy start Salesforce CLI command in a terminal to deploy new metadata, run this prompt in the Agentforce Vibes chat interface:

Deploy the Apex class I just created.

See Also 

Beta Feature

Headless Experience Layer is a pilot or beta service that is subject to the Beta Services Terms at Ageements - Salesforce.com or a written Unified Pilot Agreement if executed by Customer, and applicable terms in the Product Terms Directory. Use of this pilot or beta service is at the Customer's sole discretion.

Get Started
Build Rich UI
Composition File
Widget Configuration File
Schema File
Widget Example
Use HXL Widgets on MCP
Create the Apex Action
Create a Custom MCP Server
Set Up Your Org for MCP Access
Connect Your MCP Client to Your Org
Use HXL Widgets as Agentforce Action Output
Explore Widgets in HXL Playground
Use Agentforce Vibes to Build Widgets
Glossary