Custom Lightning Types on Mobile with the Agentforce Mobile SDK

Use Custom Lightning Types (CLTs) to control how structured agent action data appears in Agentforce on mobile. In apps that integrate the Agentforce Mobile SDK, you can route CLT output and input through native UI (SwiftUI or Jetpack Compose) by implementing a view provider and using the AFMobileCustom/ prefix in your CLT metadata.

For LWC-based CLT overrides in the Salesforce mobile app, see Custom Lightning Types in the Salesforce Mobile App in Salesforce Help.

Agentforce CLT UI configuration is organized by channel, similar to desktop. For Agentforce on mobile, add a lightningMobileGenAi folder next to your existing channel folders (for example lightningDesktopGenAi). You can configure desktop and mobile independently.

Output (renderer) — example layout for a type named flightResponse:

Input (editor) — example layout for a type named flightFilter:

In lightningMobileGenAi/renderer.json, use the top-level $ override and set definition to an AFMobileCustom/… identifier that your app handles.

If your native view expects different property names than the schema, use attributes (same idea as desktop channel overrides):

In lightningMobileGenAi/editor.json:

The editor is shown when the type is used as input in the mobile conversation; implementation uses the same view provider pattern as renderers.

  1. Conform to AgentforceViewProviding.
  2. Return true from canHandle(type:) for each AFMobileCustom/… definition you support.
  3. Return the appropriate SwiftUI view from view(for:data:).

Register the provider when you create AgentforceClient. Pass viewProvider along with credentialProvider, mode, and other required parameters for your agent type (employee, service, or full configuration), as described in Integrate Agentforce SDK.

For more on client setup, see iOS configuration in the Agentforce Mobile SDK reference (including AgentforceClient and AgentforceConfiguration).

  1. Implement AgentforceViewProvider.
  2. Return true from canHandle(definition:) for each AFMobileCustom/… definition.
  3. In GetView, read payload data (for example from AgentforceComponent / view.properties) and compose your UI.

Register the provider on AgentforceConfiguration:

See Integrate Agentforce SDK and Android configuration in the Agentforce Mobile SDK reference for setViewProvider and related builder options.

You can implement canHandle / GetView (or view(for:data:) on iOS) for several AFMobileCustom/… strings in a single class.

iOS (SwiftUI)

Android (Jetpack Compose)

Custom Lightning Types are supported in apps that use the Agentforce React Native SDK when you render them with native-style overrides: CLT metadata that uses the AFMobileCustom/… prefix, implemented through the native iOS and Android SDKs behind the bridge.

  1. Enable enableCustomViewProvider in feature flags.
  2. Register a View Provider delegate and map each AFMobileCustom/… definition string to a React Native component (registered with AppRegistry), the same way you map other SDK component definitions. See Delegates.

Tip: Before mapping a definition in your componentMap, log the actual definition prop that the native SDK sends to the rendered component. The native canHandle() lookup is an exact string match — any mismatch (casing, extra whitespace, typo) silently renders nothing.

Not supported in React Native today — using Lightning web components (LWC) as the CLT renderer or editor inside the bridge, and using React web components inside CLT. Those UI paths are separate from the native-override flow above. For details and caveats, see React Native SDK Limitations.