Tutorial: llmChat Compose

Cover Page

The front-end work is mostly in writing two new network functions, llmChat() and llmPrep(). We will build on the code base from the first tutorial, llmPrompt.

Expected behavior

Carrying a “conversation” with an LLM:

Preparing your GitHub repo

In the following, replace /YOUR:TUTORIALS/ with the name of your tutorials folder.

• On your laptop, navigate to /YOUR:TUTORIALS/
• Unzip your llmprompt.zip file. Double check that you still have a copy of the zipped file for future reference!
• Rename your newly unzipped llmprompt folder llmchat
• Remove your llmchat’s .gradle directory by running in a shell window:

  laptop$ cd /YOUR:TUTORIALS/llmchat/composeChatter
  laptop$ rm -rf .gradle
  

• Push your local /YOUR:TUTORIALS/ repo to GitHub and make sure there’re no git issues:
  git push

  • Open GitHub Desktop and click on Current Repository on the top left of the interface
  • Click on your assignment GitHub repo
  • Add Summary to your changes and click Commit to main
  • If you have pushed other changes to your Git repo, click Pull Origin to synch up the clone on your laptop
  • Finally click on Push Origin to push changes to GitHub

Go to the GitHub website to confirm that your folders follow this structure outline:

  reactive
    |-- chatterd
    |-- chatterd.crt
    |-- llmchat
        |-- composeChatter
            |-- app
            |-- gradle  
    # and other files or folders

/YOUR:TUTORIALS/ folder on your laptop should contain the llmprompt.zip and chatter.zip files in addition.

appID

Since you will be sharing PostgreSQL database storage with the rest of the class, we need to identify your entries so that we forward only your entries to Ollama during your “conversation.” In your MainActivity.kt file, add this appID property to your ChattViewModel:

    val appID = app.applicationContext.packageName
    

llmChat()

In ChattStore.kt, first add the following types outside your ChattStore class:

enum class SseEventType { Error, Message }

@Serializable
data class OllamaMessage(val role: String, val content: String?)

@Serializable
data class OllamaRequest(
    val appID: String?,
    val model: String?,
    val messages: List<OllamaMessage>,
    val stream: Boolean
)

@Serializable
@JsonIgnoreUnknownKeys
data class OllamaResponse(
    val model: String,
    val message: OllamaMessage,
)

Rename your llmPrompt() function and give it the following signature:

    suspend fun llmChat(appID: String?, chatt: Chatt, errMsg: MutableState<String>) {

Replace llmprompt in apiUrl to llmchat.

Previously we constructed ollamaRequest Kotlin map and serialize it “manually” into a request body. In this tutorial, we’re going to rely on Kotlin serialization to do the serialization for us. Replace this block of code:

        val ollamaRequest = mapOf(
            "model" to chatt.name,
            "prompt" to chatt.message?.value,
            "stream" to true,
        )
        val requestBody = JSONObject(ollamaRequest).toString()
            .toRequestBody("application/json; charset=utf-8".toMediaType())

with:

        val ollamaRequest = OllamaRequest(
            appID = appID,
            model = chatt.name,
            messages = listOf(OllamaMessage("user", chatt.message?.value)),
            stream = true
        )
        val requestBody = Json.encodeToString(ollamaRequest)
            .toRequestBody("application/json; charset=utf-8".toMediaType())

To allow your app to accept SSE stream, replace the following line in the request builder:

            .addHeader("Accept", "application/*")

with:

            .addHeader("Accept", "text/event-stream")

Parsing SSE stream

We now parse the incoming SSE stream. Continuing in llmChat(), scroll all the way down to the // streaming NDJSON comment and replace it with the following two lines:

            // streaming SSE
            var sseEvent = SseEventType.Message
            

Subsequently, inside the while (!stream.exhausted()) code block, replace the whole try-catch block with:

                if (line.isEmpty()) {
                    // new SSE event, default to Message
                    // SSE events are delimited by "\n\n"
                    if (sseEvent == SseEventType.Error) {
                        sseEvent = SseEventType.Message
                        resChatt.message?.value += "\n\n**llmChat Error**: ${errMsg.value}\n\n"
                    }
                    continue
                }
              
                // parse SSE line
            

An empty line (caused by two consecutive newlines "\n\n") indicates the end of an event block. When an empty line is detected, if we are in an Error event block, as set in the next block of code, we report the error on the front end’s timeline (we will also pop up an alert dialog box with the erorr message later). Then we reset the event to the default Message event.

If the next line starts with the text event, we’re starting a new event block, otherwise, it’s a data line and we handle (save) it depending on the event it’s associated with. Recall that left unspecified, Message is the default event. Replace the comment, // parse SSE line with the following:

                val parts = line.split(":", limit = 2)
                if (parts[0].startsWith("event")) {
                    val event = parts[1].trim()
                    if (event == "error") {
                        sseEvent = SseEventType.Error
                    } else if (!event.isEmpty() && event != "message") {
                        // we only support "error" event,
                        Log.d("LLMCHAT", "Unknown event: '${parts[1]}'")
                    }
                } else if (parts[0].startsWith("data")) {
                    // not an event line, must be data line;
                    // multiple data lines can belong to the same event
                    try {
                        val ollamaResponse = Json.decodeFromString<OllamaResponse>(parts[1])
                        if (sseEvent == SseEventType.Error) {
                            errMsg.value += ollamaResponse.message.content
                        } else {
                            resChatt.message?.value += ollamaResponse.message.content
                        }
                    } catch (e: IllegalArgumentException) {
                        errMsg.value += "${e.localizedMessage}\n$apiUrl\n${parts[1]}"
                    }
                }
                

Be sure to retain the enclosing catch clause below the while loop.

SubmitButton

Finally, replace your call to llmPrompt() in SubmitButton() in the file MainView.kt with:

                llmChat(vm.appID, Chatt(name = vm.onTrailingEnd,
                    message = mutableStateOf(vm.message.text.toString()),
                    timestamp = Instant.now().toString()
                ), vm.errMsg)
                

and remove the llmPrompt() import from the top of the file.

    suspend fun llmPrep(appID: String, chatt: Chatt, errMsg: MutableState<String>) { }

    var appLaunch = true
    val sysmsg = app.getString(R.string.sysmsg)

    <string name="sysmsg">Start every assistant reply with GO BLUE!!!</string>

  val viewModel by viewModels<ChattViewModel>()

    if (viewModel.appLaunch) {
        // set up system prompt only once, not on orientation change                  
        viewModel.appLaunch = false
        
        viewModel.appID?.let { appID ->
            if (!viewModel.sysmsg.isEmpty()) {
                // disable interaction until llmPrep is done
                lifecycleScope.launch(Dispatchers.Main.immediate) {
                    llmPrep(appID, Chatt(
                        name = viewModel.onTrailingEnd,
                        message = mutableStateOf(viewModel.sysmsg),
                        ), viewModel.errMsg
                    )
                }
            }
        }
    }

Run and test to verify and debug

You should now be able to run your front end against the provided back end on mada.eecs.umich.edu, by changing the serverUrl property in your ChattStore to mada.eecs.umich.edu. Once you have your back end setup, change serverUrl back to YOUR_SERVER_IP. You will not get full credit if your front end is not set up to work with your back end!

To test your llmPrep() method against mada.eecs.umich.edu, you can use gemma3 model. To test it against your own back end running on a *-micro instance, use qwen3:0.6b model. Assuming the system prompt is, “Start every assistant reply with GO BLUE!!!”, you should see “GO BLUE!!!” prepended to all responses from the LLM.

The back-end spec provides instructions on testing llmChat’s API and SSE error handling.

Congratulations! You’re done with the front end! (Don’t forget to work on the back end!)

Front-end submission guidelines

We will only grade files committed to the main branch. If you’ve created multiple branches, please merge them all to the main branch for submission.

Push your front-end code to the same GitHub repo you’ve submitted your back-end code:

• Open GitHub Desktop and click on Current Repository on the top left of the interface
• Click on the GitHub repo you created at the start of this tutorial
• Add Summary to your changes and click Commit to main at the bottom of the left pane
• Since you have pushed your back end code, you’ll have to click Pull Origin to synch up the repo on your laptop
• Finally click Push Origin to push all changes to GitHub

Go to the GitHub website to confirm that your front-end files have been uploaded to your GitHub repo under the folder llmchat. Confirm that your repo has a folder structure outline similar to the following. If your folder structure is not as outlined, our script will not pick up your submission and, further, you may have problems getting started on latter tutorials. There could be other files or folders in your local folder not listed below, don’t delete them. As long as you have installed the course .gitignore as per the instructions in Preparing GitHub for Reactive, only files needed for grading will be pushed to GitHub.

  reactive
    |-- chatterd
    |-- chatterd.crt
    |-- llmchat
        |-- composeChatter
            |-- app
            |-- gradle  
    # and other files or folders

References

SSE

• RespondBody
• Okio
  • Recipes
• Understand Kotlin Flow Coroutines by Implementing Server Side Sent (SSE)‘use’ k

Appendix: imports