Build a chat UI

browser ──(your session cookie)──▶ your backend ──(project key + X-User-Id)──▶ Agent Platform

import "server-only"
import { AgentPlatformClient } from "@aiceafrica/agent-platform"
import { getCurrentUser } from "@/lib/auth" // yours

export const GRAPH_ID = "agent_platform"

export async function agentForCurrentUser() {
  const user = await getCurrentUser()
  if (!user) return null
  return new AgentPlatformClient({
    baseUrl: process.env.AICE_AGENT_URL!,
    apiKey: process.env.AICE_API_KEY!,
    userId: user.id, // a UUID
  })
}

import { agentForCurrentUser, GRAPH_ID } from "@/lib/agent"

export async function POST(req: Request) {
  const client = await agentForCurrentUser()
  if (!client) return new Response("Unauthorized", { status: 401 })

  const { threadId, message } = (await req.json()) as { threadId?: string; message: string }
  // Create the thread on first send, so opening "New chat" doesn't leave empty threads.
  const id = threadId ?? (await client.threads.create()).thread_id

  const encoder = new TextEncoder()
  const body = new ReadableStream({
    async start(controller) {
      const send = (event: string, data: unknown) =>
        controller.enqueue(encoder.encode(`event: ${event}\ndata: ${JSON.stringify(data)}\n\n`))

      send("thread", { threadId: id })
      try {
        for await (const chunk of client.runs.stream(id, GRAPH_ID, {
          input: { messages: [{ role: "user", content: message }] },
          streamMode: ["messages-tuple"],
          signal: req.signal, // stop the upstream stream if the browser goes away
        })) {
          if (chunk.event !== "messages") continue
          const [m] = chunk.data as [{ id: string; type?: string; content?: unknown }, unknown]
          // Only the assistant's text; tool results arrive as their own messages.
          if (m.type?.startsWith("tool")) continue
          if (typeof m.content === "string" && m.content) {
            send("delta", { id: m.id, text: m.content })
          }
        }
        // The turn finished normally: the one point to ask for a title and follow-ups.
        const post = await client.suggestions.createForThread(id).catch(() => null)
        send("done", post ?? {})
      } catch {
        // A dropped upstream stream doesn't mean the run failed: tell the
        // browser to reload the thread rather than resend.
        send("interrupted", { threadId: id })
      } finally {
        controller.close()
      }
    },
  })

  return new Response(body, {
    headers: {
      "Content-Type": "text/event-stream",
      "Cache-Control": "no-cache, no-transform",
      "X-Accel-Buffering": "no", // keep proxies such as nginx from buffering the stream
    },
  })
}

"use client"
import { useCallback, useRef, useState } from "react"

export type ChatMessage = { id: string; role: "user" | "assistant"; text: string }
export type Suggestion = { title: string; prompt: string }

export function useChat(initialThreadId?: string) {
  const [threadId, setThreadId] = useState(initialThreadId)
  const [messages, setMessages] = useState<ChatMessage[]>([])
  const [suggestions, setSuggestions] = useState<Suggestion[]>([])
  const [status, setStatus] = useState<"idle" | "streaming" | "interrupted">("idle")
  const abort = useRef<AbortController | null>(null)

  const send = useCallback(
    async (text: string) => {
      setSuggestions([])
      setMessages((m) => [...m, { id: crypto.randomUUID(), role: "user", text }])
      setStatus("streaming")
      abort.current = new AbortController()

      const res = await fetch("/api/chat", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ threadId, message: text }),
        signal: abort.current.signal,
      })
      if (!res.ok || !res.body) {
        setStatus("interrupted")
        return
      }

      const reader = res.body.pipeThrough(new TextDecoderStream()).getReader()
      let buffer = ""
      for (;;) {
        const { value, done } = await reader.read()
        if (done) break
        buffer += value
        // Events are separated by a blank line; keep any partial event for the next read.
        const events = buffer.split("\n\n")
        buffer = events.pop() ?? ""
        for (const raw of events) {
          const event = raw.match(/^event: (.*)$/m)?.[1]
          const data = JSON.parse(raw.match(/^data: (.*)$/m)?.[1] ?? "{}")
          if (event === "thread") setThreadId(data.threadId)
          if (event === "delta") appendDelta(data.id, data.text)
          if (event === "done") setSuggestions(data.suggestions ?? [])
          if (event === "interrupted") setStatus("interrupted")
        }
      }
      setStatus((s) => (s === "streaming" ? "idle" : s))
    },
    [threadId],
  )

  // Chunks are deltas: append to the message with this id, never replace it.
  function appendDelta(id: string, text: string) {
    setMessages((m) => {
      const i = m.findIndex((x) => x.id === id)
      if (i === -1) return [...m, { id, role: "assistant", text }]
      const next = [...m]
      next[i] = { ...next[i], text: next[i].text + text }
      return next
    })
  }

  const stop = useCallback(() => abort.current?.abort(), [])

  return { threadId, messages, setMessages, suggestions, status, send, stop }
}

"use server"
import { agentForCurrentUser } from "@/lib/agent"

async function agent() {
  const client = await agentForCurrentUser()
  if (!client) throw new Error("Not signed in")
  return client
}

export async function listThreads(offset = 0) {
  const client = await agent()
  const rows = await client.threads.search({
    limit: 31, // one extra row tells you there's another page
    offset,
    sortBy: "updated_at",
    sortOrder: "desc",
  })
  return {
    threads: rows.slice(0, 30).map((t) => ({
      id: t.thread_id,
      title: (t.metadata?.thread_name as string | undefined) || "New conversation",
    })),
    hasMore: rows.length > 30,
  }
}

export async function loadThread(threadId: string) {
  const client = await agent()
  const state = await client.threads.getState(threadId)
  const messages = (state.values as { messages?: { id: string; type: string; content: unknown }[] }).messages ?? []
  return messages
    .filter((m) => (m.type === "human" || m.type === "ai") && typeof m.content === "string" && m.content)
    .map((m) => ({
      id: m.id,
      role: m.type === "human" ? ("user" as const) : ("assistant" as const),
      text: m.content as string,
    }))
}

export async function renameThread(threadId: string, name: string) {
  const client = await agent()
  // titled_by: "user" stops the next turn overwriting the name.
  await client.threads.update(threadId, { metadata: { thread_name: name, titled_by: "user" } })
}

export async function deleteThread(threadId: string) {
  const client = await agent()
  await client.threads.delete(threadId) // permanent: confirm in the UI first
}

export async function starters() {
  const client = await agent()
  return client.suggestions.starters()
}