---
schema_version: "1"
id: 5e48d95d7e4de384424f518630ef99b4b8a2038526432f44ca38dc2500a103d9
title: Use Full UI
collection: developer
version: current
locale: en-us
portal_url: https://docs.salesforce.com/developer/current/en-us/genai/agentforce-mobile-sdk/guides/android/agentforce-mobile-sdk-android-prebuilt-ui.md
canonical_url: https://developer.salesforce.com/docs/ai/agentforce-mobile-sdk/guide/agentforce-mobile-sdk-android-prebuilt-ui.html
source_site: developer.salesforce.com
content_type: documentation
content_hash: a2a50201284613f7eacf8a8b108b0703632a4b080e513c346fe4b71a58626ce5
products:
  - Agentforce Mobile SDK
  - Agentforce and Einstein Generative AI
---
# 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.

```kotlin
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:

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

Then use the `AgentforceConversationContainer` Composable:

```kotlin
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:

```kotlin
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.

```kotlin
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

- **Headless**: See [Build a Headless Experience](https://developer.salesforce.com/docs/ai/agentforce-mobile-sdk/guide/agentforce-mobile-sdk-android-headless.md) for custom UI
- **Customization**: See [Branding and Theming](https://developer.salesforce.com/docs/ai/agentforce-mobile-sdk/guide/agentforce-mobile-sdk-android-branding-theming.md) for visual customization