Custom Lightning Types in the Salesforce Mobile App

Show rich, interactive UI in Agentforce conversations on the Salesforce mobile app by using custom Lightning types (CLTs) with Lightning web component (LWC) overrides.

When users interact with Agentforce in the Salesforce mobile app, agent responses are typically plain text. Custom Lightning types upgrade those responses by rendering structured, interactive widgets directly in the chat conversation. Instead of reading text descriptions, users can view styled data cards, tap buttons, pick dates, or interact with custom UI components.

How Custom Lightning Types Work on Mobile

In the Salesforce mobile app, CLTs render LWC components inside a WebView. You build your custom editor or renderer component as a standard LWC, then configure the lightningMobileGenAi channel in your LightningTypeBundle metadata so the mobile app knows which component to show.

This approach enables you to reuse existing desktop LWC components on mobile. If you configure both the lightningDesktopGenAi and lightningMobileGenAi channels, the same component can serve both desktop and mobile . You can also configure them independently to provide channel-specific experiences.

LWC Form Factor Requirement

LWC components used as CLT overrides on mobile must include the Small form factor in the component's js-meta.xml file. Without this declaration, the component doesn't render on mobile. Include both Small and Large to support desktop and mobile with the same component.

<supportedFormFactors>
    <supportedFormFactor type="Small"/>
    <supportedFormFactor type="Large"/>
</supportedFormFactors>

Configure Custom Lightning Types for Mobile

You can configure CLTs for the Salesforce mobile app through Setup or through metadata deployment. In Setup, open your custom Lightning type, select the UI Configuration tab, and select Agentforce (Mobile) from the Channel dropdown. From there, configure your editor or renderer override with a custom LWC component.

Alternatively, add a lightningMobileGenAi folder to your LightningTypeBundle and include an editor.json or renderer.json file.

+--lightningTypes
    +--myType
        +--schema.json
        +--lightningDesktopGenAi
            +--renderer.json
        +--lightningMobileGenAi
            +--renderer.json

Deploy the bundle by using Salesforce CLI or Metadata API. For detailed steps on creating and configuring custom Lightning types through Setup and metadata, see Lightning Types and Lightning Types Developer Guide.

Limitations

Only top-level component overrides are supported on mobile. Property-level overrides of LWC components aren't supported for renderer or editor.
Collection renderer overrides aren't supported on mobile.
Native component overrides (AFMobileCustom/) are available only in third-party apps that use the Agentforce Mobile SDK. They aren't supported in the Salesforce mobile app. See Agentforce Mobile SDK Developer Guide.