How can I send custom data like systemMessage with useChat

[erkutgokergil]

I found a solution as below, if you have a better suggestion you can share it.

 const systemPrompt = systemMessage && {
    role: 'system',
    content: systemMessage
  };
  const { messages, append, reload, stop, isLoading, input, setInput } =
    useChat({
      initialMessages,
      id,
      body: {
        id,
        systemPrompt //  I manage this place in the route file
      },
      onResponse(response) {
        if (response.status === 401) {
          toast.error(response.statusText);
        }
      }
    });

// route.ts

const chatMessage = systemPrompt ? [...messages, systemPrompt] : [...messages];
const res = await openai.createChatCompletion({
    model: 'gpt-3.5-turbo',
    messages: chatMessage,
    temperature: 0.7,
    stream: true
});

[cahaseler]

Why not just check if messages.length == 0 and add it to initialmessages if it is?

[erkutgokergil]

if I add systemPrompt as initialMessages it will show up on the chat screen, so I don't want that.

I use initialMessages more for chat history

[cahaseler]

Fair enough - I'm already checking role for each render there so I can put on a different picture so I'm just not displaying role==system.

This does get to the more fundamental question of what the library thinks you should be doing in all the non-trivial cases where message to display !== messages to send to the AI. As soon as you start injecting data with functions or summarizing history the two datasets become different.

I suppose for function content you could just filter it out client side like I did with system message, but there might be security implications there - maybe I don't want my client to see raw data or system messages (though if that's the case I'm trusting the LLM too much). I guess the whole idea of client-safe vs server-safe also needs to be reconsidered when you have a potentially leaky LLM at the boundary anyway.