Example: Mapping a Hotel Card Widget for MCP

This example shows how output from a custom MCP server tool flows through two object-based custom Lightning types to the hotelCard widget in ChatGPT, Claude, or Slackbot.

This example uses three schema files that serve different purposes:

  • The hotelInfoResult MCP result wrapper custom Lightning type schema describes the complete result returned by the MCP server tool, including actionName, isSuccess, and outputValues.
  • The hotelInfoOutputValues MCP payload custom Lightning type schema describes the action-specific hotel data referenced by outputValues.
  • The widget schema describes the UI shape, which is the attribute contract that defines the hotel information the card needs to render.

You map the nested data shape to the UI shape by using the hotelInfoResult custom Lightning type’s renderer.json file.

Download these sample data files.

This layout shows where the custom UiWidgetBundle and related LightningTypeBundle component files belong in your Salesforce DX project.

In this directory structure, renderer.json sits directly parallel to schema.json. For widget references, create this file at the root level without using channel-specific subfolders. See Connect Your Widget to a Custom Lightning Type.

See Also

The widget schema file (uiWidgets/hotelCard/schema.json) defines the attributes that your widget accepts. These attributes become available as {!$attrs.attributeName} bindings in your widget’s composition file and as mapping targets in the Lightning type’s renderer.json file.

See Also

The composition file (uiWidgets/hotelCard/hotelCard.json) defines the widget’s visual structure and binds widget’s schema attributes to UI components by using {!$attrs.attributeName} expressions.

See Also

The configuration file (uiWidgets/hotelCard/hotelCard.uiwidget-meta.xml) declares the widget bundle type required for deployment.

See Also

Define two object-based custom Lightning type schemas for the MCP server tool output. The MCP result wrapper schema represents the complete tool result, and its outputValues property references the MCP payload schema that defines the action-specific output.

The custom Lightning type schema file (lightningTypes/hotelInfoOutputValues/schema.json) defines the hotel-information payload referenced by the result wrapper’s outputValues property. Its hotelInfo property references the HotelSearchResult.Hotel Apex class.

The custom Lightning type schema file (lightningTypes/hotelInfoResult/schema.json) represents the complete MCP server tool result. Its outputValues property references the hotelInfoOutputValues MCP payload custom Lightning type.

See Also

The renderer.json file (lightningTypes/hotelInfoResult/renderer.json) maps nested hotel properties under outputValues to attributes defined in the hotelCard widget’s schema.json file.

For detailed information about widget references and attribute mapping, see Connect Your Widget to a Custom Lightning Type.

See Also

To deploy the widget and both custom Lightning types together, include them in a single package.xml manifest.

This manifest includes the hotelCard widget, the hotelInfoOutputValues MCP payload custom Lightning type, and the hotelInfoResult MCP result wrapper custom Lightning type.

When you deploy a Lightning type that references a widget, deploy the widget first or include it in the same package. Metadata API resolves deployment ordering automatically within a single package.

If you deploy the components independently across separate deployments, maintain this sequential order:

  1. Deploy the UiWidgetBundle package to your target org first.
  2. Deploy the LightningTypeBundle package to your target org second.

After you deploy the widget and both custom Lightning types, the widget is ready to render MCP server tool output in ChatGPT, Claude, or Slackbot.

See Also