how to make useChat only sends the latest message with each request?

[a4amado]

how to make useChat only sends the latest message with each request?

[patelvivekdev]

You can use experimental_prepareRequestBody in useChat hook.

https://ai-sdk.dev/docs/reference/ai-sdk-ui/use-chat#experimental_prepare-request-body

// chat.tsx

const {
  messages,
  setMessages,
  handleSubmit,
  input,
  setInput,
  append,
  status,
  stop,
} = useChat({
  id,
  initialMessages,
  sendExtraMessageFields: true,
  experimental_prepareRequestBody: (body) => ({
    id,
    message: body.messages.at(-1),
  }),
})

In the backend, get the latest message and append it to the messages fetched from the database.

//route.ts

import {
  appendClientMessage,
  streamText,
} from 'ai';
import { google } from '@ai-sdk/google';
import { getMessagesByChatId } from '@/lib/db';

export async function POST(request: Request) {
  const {
    message,
    id,
  }: {
    message: UIMessage
    id: string
  } = await request.json()

  const previousMessages = await getMessagesByChatId({ id });

  const messages = appendClientMessage({
    messages: previousMessages as UIMessage[],
    message,
  });

  const result = await streamText({
    model: google("gemini-2.0-flash-001"),
    messages: messages,
  })

  return result.toDataStreamResponse({ sendUsage: false });
}