> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-docs-rn-guide-message-privately.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.
# Getting Started With Jetpack Compose UI Kit
> Step-by-step guide to integrate the CometChat Jetpack Compose UI Kit into your Android app.
| Field | Value |
| -------- | --------------------------------------------------------------------------------------- |
| Package | `com.cometchat:chatuikit-compose-android` |
| UI Layer | Jetpack Compose (Material 3) |
| Init | `CometChatUIKit.init(context, UIKitSettings, callback)` — must resolve before `login()` |
| Login | `CometChatUIKit.login("UID", callback)` — must resolve before rendering components |
| Order | `init()` → `login()` → render. Breaking this order = blank screen |
| Auth Key | Dev/testing only. Use Auth Token in production |
| Calling | Optional. Add `com.cometchat:calls-sdk-android` to enable voice/video |
| Min SDK | Android 9.0 (API 28) |
This guide walks you through integrating the CometChat Jetpack Compose UI Kit into an Android app. All UI components are native Compose composables built with Material 3. By the end you'll have a working chat UI.
***
## Prerequisites
You need three things from the [CometChat Dashboard](https://app.cometchat.com/):
| Credential | Where to find it |
| ---------- | ---------------------------------------------------------- |
| App ID | Dashboard → Your App → Credentials |
| Auth Key | Dashboard → Your App → Credentials |
| Region | Dashboard → Your App → Credentials (e.g. `us`, `eu`, `in`) |
You also need:
* Android Studio (Hedgehog or later recommended)
* An Android emulator or physical device running Android 9.0 (API 28) or higher
* Kotlin configured with Compose compiler plugin
* Gradle plugin 8.0+ with Kotlin DSL
Auth Key is for development only. In production, generate Auth Tokens server-side via the [REST API](https://api-explorer.cometchat.com/) and use `loginWithAuthToken()`. Never ship Auth Keys in client code.
***
## Step 1 — Create an Android Project
1. Open Android Studio and start a new project.
2. Choose Empty Activity (Compose) as the project template.
3. Set minimum API level to 28 or higher.
***
## Step 2 — Install Dependencies
### Add the CometChat Repository
Add the CometChat Maven repository to your `settings.gradle.kts`:
```kotlin settings.gradle.kts lines theme={null}
dependencyResolutionManagement {
repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)
repositories {
google()
mavenCentral()
maven("https://dl.cloudsmith.io/public/cometchat/cometchat/maven/")
}
}
```
### Add Dependencies
Open your app-level `build.gradle.kts` and enable Compose, then add the dependencies:
```kotlin build.gradle.kts lines theme={null}
plugins {
alias(libs.plugins.android.application)
alias(libs.plugins.kotlin.android)
alias(libs.plugins.kotlin.compose)
}
android {
// ...
buildFeatures {
compose = true
}
compileOptions {
sourceCompatibility = JavaVersion.VERSION_11
targetCompatibility = JavaVersion.VERSION_11
}
kotlinOptions {
jvmTarget = "11"
}
}
dependencies {
// CometChat Jetpack Compose UI Kit
implementation("com.cometchat:chatuikit-compose-android:6.0.0")
// (Optional) Voice/video calling
implementation("com.cometchat:calls-sdk-android:5.0.0-beta.2")
}
```
***
## Step 3 — Initialize and Login
Create your `MainActivity.kt` with the CometChat initialization and login flow. Since Compose uses a declarative approach, we track the auth state and render UI conditionally:
```kotlin MainActivity.kt lines theme={null}
import android.os.Bundle
import android.util.Log
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.activity.enableEdgeToEdge
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material3.CircularProgressIndicator
import androidx.compose.material3.Text
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import com.cometchat.chat.core.CometChat
import com.cometchat.chat.exceptions.CometChatException
import com.cometchat.chat.models.User
import com.cometchat.uikit.core.CometChatUIKit
import com.cometchat.uikit.core.UIKitSettings
class MainActivity : ComponentActivity() {
private val TAG = "MainActivity"
private val appID = "APP_ID" // Replace with your App ID
private val region = "REGION" // Replace with your App Region
private val authKey = "AUTH_KEY" // Replace with your Auth Key
private var isReady by mutableStateOf(false)
private var error by mutableStateOf(null)
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
enableEdgeToEdge()
val uiKitSettings = UIKitSettings.UIKitSettingsBuilder()
.setRegion(region)
.setAppId(appID)
.setAuthKey(authKey)
.subscribePresenceForAllUsers()
.build()
CometChatUIKit.init(this, uiKitSettings, object : CometChat.CallbackListener() {
override fun onSuccess(s: String?) {
Log.d(TAG, "Initialization completed successfully")
loginUser()
}
override fun onError(e: CometChatException?) {
error = "Init failed: ${e?.message}"
}
})
setContent {
when {
error != null -> {
Box(Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
Text(error ?: "Unknown error")
}
}
!isReady -> {
Box(Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
CircularProgressIndicator()
}
}
else -> {
ChatApp()
}
}
}
}
private fun loginUser() {
CometChatUIKit.login("cometchat-uid-1", object : CometChat.CallbackListener() {
override fun onSuccess(user: User) {
Log.d(TAG, "Login successful: ${user.uid}")
isReady = true
}
override fun onError(e: CometChatException) {
error = "Login failed: ${e.message}"
}
})
}
}
```
`init()` must resolve before you call `login()`. Calling `login()` before init completes will fail silently.
***
## Step 4 — Choose a Chat Experience
Integrate a conversation view that suits your app's UX. Each option below includes a step-by-step guide.
### Conversation List + Message View
Sequential navigation — conversation list as the entry point, tap a conversation to open a full-screen message view.
Step-by-step guide to build this layout with Jetpack Compose
***
### One-to-One / Group Chat
Single chat window — no sidebar. Loads a specific user or group chat directly. Ideal for support chat, direct messages, or notification-driven flows.
Step-by-step guide to build this layout
***
### Tab-Based Chat
Bottom navigation with tabs for Chats, Calls, Users, and Settings.
Step-by-step guide to build this layout
***
## Next Steps
Browse all available UI Kit components
Customize colors, fonts, and styles
Chat features included out of the box
Common issues and fixes