Salesforce Docs Portal

Use Full UI

This guide shows you how to use the prebuilt UI components to quickly integrate Agentforce chat functionality into your Android app.

AgentforceLauncherContainer

Use the AgentforceLauncherContainer Composable in your screen. It displays a Floating Action Button (FAB) that, when tapped, presents the full chat container.

import androidx.compose.runtime.Composable
import com.salesforce.android.agentforcesdk.ui.AgentforceLauncherContainer
import androidx.lifecycle.viewmodel.compose.viewModel

@Composable
fun MyScreen(viewModel: MyViewModel = viewModel()) {
    // ... Your existing screen content (e.g., inside a Scaffold)

    // Add the Agentforce Launcher
    AgentforceLauncherContainer(client = viewModel.agentforceClient)
}

AgentforceConversationContainer

To display the chat UI, you can use the AgentforceConversationContainer Composable. This Composable provides the complete chat interface that you can integrate into your app.

First, create an AgentforceConversation object:

// Create the conversation object
val conversation = AgentforceConversation(
    configuration = configuration,
    conversationService = agentforceClient.conversationService
)

Then use the AgentforceConversationContainer Composable:

import androidx.compose.runtime.Composable
import com.salesforce.android.agentforcesdkimpl.AgentforceConversation

@Composable
fun MyChatScreen(conversation: AgentforceConversation, agentforceClient: AgentforceClient) {
    agentforceClient.AgentforceConversationContainer(
        conversation = conversation,
        onClose = {
            // Handle chat view close
        }
    )
}

The AgentforceConversationContainer Composable takes the following parameters:

  • conversation: The AgentforceConversation object that you created
  • onClose: A lambda that will be called when the user closes the chat view

Full Activity Example

The following example shows a complete Activity implementation that integrates the Agentforce chat UI:

class MyActivity : ComponentActivity() {

    private var agentforceClient: AgentforceClient? = null
    private var conversation: AgentforceConversation? = null

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        // Initialize the Agentforce client and start a conversation
        initializeAgentforce()

        setContent {
            var showChat by rememberSaveable { mutableStateOf(false) }

            Box(Modifier.fillMaxSize()) {
                // Your app content
                Button(onClick = { showChat = true }) {
                    Text("Open Chat")
                }

                // Show chat overlay
                if (showChat) {
                    conversation?.let { conv ->
                        agentforceClient?.AgentforceConversationContainer(
                            conversation = conv,
                            onClose = { showChat = false }
                        )
                    }
                }
            }
        }
    }

    private fun initializeAgentforce() {
        val authProvider = MyAuthCredentialProvider()

        val configuration = AgentforceConfiguration.builder(
            authCredentialProvider = authProvider
        )
            .setApplication(application)
            .setSalesforceDomain("https://your-instance.salesforce.com")
            .build()

        val mode = AgentforceMode.FullConfig(configuration)

        agentforceClient = AgentforceClient().also {
            it.init(
                authCredentialProvider = authProvider,
                agentforceMode = mode,
                application = application
            )
        }
        conversation = agentforceClient?.startAgentforceConversation()
    }
}

Handle UI Events

To handle UI events, implement the AgentforceUIDelegate interface. This interface provides callbacks for modifying messages before sending, handling sent messages, and managing agent switches.

class YourActivity : AgentforceUIDelegate {
   override suspend fun modifyUtteranceBeforeSending(utterance: AgentforceUtterance): AgentforceUtterance {
      // Modify the utterance if needed
      return utterance
   }

   override fun didSendUtterance(utterance: AgentforceUtterance) {
      // Handle sent utterance
   }

   override fun userDidSwitchAgents(newConversation: AgentforceConversation) {
      // Handle agent switch
   }
}

The AgentforceUIDelegate interface provides the following methods:

  • modifyUtteranceBeforeSending(utterance: AgentforceUtterance): Called before an utterance is sent to the agent. Allows you to modify the utterance before it is sent.
  • didSendUtterance(utterance: AgentforceUtterance): Called after an utterance has been sent to the agent.
  • userDidSwitchAgents(newConversation: AgentforceConversation): Called when the user switches to a different agent.

Next Steps