How to return React Component with function calling

Hi Everyone,

I’m building a custom AI assistant using Assistants APIs. The assistant integrates static data (PDFs) and live data via function calls. I also have a SQL database storing retail product info.

Here’s what I want:
Chat UI Example:
User: What’s the best product for my XYZ condition?
AI: Based on your condition, I recommend:
[React component showing product images and a link to buy]

I’m successfully fetching the correct data from SQL via function calls, but the model outputs text. I need it to generate a React component (stored locally) for displaying the products instead.

Core Idea : Store a UI database of react components, then fetch → fill and show it user in chat based on function calling.

Any tips on how to achieve this? Thanks in advance!

1 Like

Hi,

Welcome. I’m going to be working on something similar. And I’m pretty new to React.

I think fetching React Components from your database adds an unnecessary db call and some extra complication. Since you’re calling from multiple knowledge sources on the fly, you don’t have any way to have pre-populated React Components; so, you’d have to have a Component for every possible situation, or you’d have to have the AI re-write sections of components in transit.

Since your primary bot is already making Function Calls and gathering the correct data, why not just have it make another Function Call to an Agent with Structured Output with the “pre-structured” text.

So, Agent A:

  • Chats
  • Receives the request.
  • Uses whatever your internal API Function Call Logic is for the retrieval,
  • Receives the response,
  • Sends response to Agent B, and simultaneously to the user.

Then Agent B

  • Takes the preprocessed response from Agent A, structures that response according to the React Component template you tell it to respond by.


I also think if you had Agent B respond with a JSON, that could potentially cause a State Change on an already loaded, though empty, and display = none.

I’m interested to learn what works!

Hey Thinktank,

Thanks for the response, I figured a solution, not sure this is the best way but its working consistently for what I want.

I solved it by writing clear instruction set + function description what I want to do i.e
[Assistants Instruction] ..... Note : Use 'retrieve_product_details' function if user ask about any product related information. You need to give a short summary about the product and end the summary with 'Here are more information about the Product ' after which I will return a react UI component.

Then passing some props to fill in correct UI Template, these determination props can be assigned through AI response.

I hope it make sense :slight_smile:

PS : Its weird nobody is talking about this use case. Or maybe i am phrasing it wrong in my search.

1 Like