How do I use my own API and chat functionality with the Chat Component?

[ckaragitz]

• Goal: I'm trying to use my own Chat API behind a proxy to interact with Google's Gemini API hosted in Vertex (GCP). I'd like to render the user's message and the AI assistant's response in the provided Retool Chat Component. I'm able to get a response back from my API by wiring up the Chat Component to use a custom query to my API (leveraging the messageHistory variable). The user's message renders in the UI but I can't figure out how to map the response from my API back to the assistant's lastResponse variable so that it shows up in the Chat UI.

• Steps: I've tried to set the value of the lastResponse field on the Chat Component on a successful query, but the variable won't update. I've even attempted to use a custom script, but still no luck.

• Details: I just need to know how to use the response from my API to update the AI assistant's message to the user in the Chat Component. It never renders - always appears blank.

• Screenshots:
  

  

[ckaragitz]

I figured it out. You need to only return a text string from the API. So I had to do a data transformation on the response like this: return data.content

[jg80]

So you saved your API setup as a shared query, use that as the resource in the chat query, included messageHistory in the body of the request, and have the return data.content in the "Transform results" block, correct?

[ckaragitz]

Correct! Here's the JSON body that my proxy API is expecting:

{
    "candidate_count": 1,
    "temperature": 0.2,
    "max_output_tokens": 500,
    "top_p": 0.8,
    "top_k": 40,
    "messages": [
        {
            "role": "user",
            "content": "What is your name?"
        },
        {
            "role": "assistant",
            "content": "BotBuddy!"
        },
        {
            "role": "user",
            "content": "What is the meaning of life?"
        }
    ]
}

Hence why the messageHistory variable works perfectly.

[jg80]

Right on. Thinking about options to do RAG outside of the Retool Vectors (which are great, by the way, but sometimes one wants a little extra control on how the process runs), so seeing how you wired up the chat to the API is very useful.

Thanks for sharing!