How to trigger a useAssistant() call form a button instead of the value of the input field?

[VenessaKarlsson24]

I'm trying to build a ai assistant using the experimental useAssistant hook but i can't figure out how to trigger a call to the assistant from a button in the ui instead of something the user writes in the input field?

I'm trying to create buttons like the ones in the chatgpt ui.

[MaxLeiter]

You can call submitMessage from useAssistant: https://sdk.vercel.ai/docs/api-reference/use-assistant#UseAssistantHelpers

[VenessaKarlsson24]

Thanks, but how can I connect the submitMessage function to a button, and how do I pass a message as an argument to the submitMessage function call? I am quite new to this area.

[shuaizhang1999]

Not sure whether or not you need it anymore, but now they have an append function from the response of useAssistant. So here is how you implement it:

const { append } = useAssistant({
    api: "/api/assistant",
  });
  
<button
    key={index}
    onClick={() =>
      append({
        role: "user",
        content: yourPromptContentHere,
      })
    }
>
{prompt}
</button>;

[jeremyphilemon]

@shuaizhang1999 Thanks for the answer!

Apologies for not documenting append, I've added it to the docs here.

[ozanyusufoglu]

const { append } = useAssistant({
api: "/api/assistant",
});

<button
key={index}
onClick={() =>
append({
role: "user",
content: yourPromptContentHere,
})
}

{prompt}
;

One caveat though, if you don't have an existing thread to append to you will get an error.