How to affect changes to frontend from response?

[opaque wedge]

Hi, I'm an amateur, building a small project with NodeJS api (Assistant). Need help with conceptual understanding on how to build for these sort of usecases:

1. To populate UI components in the frontend based on response from API (ie. clickable cards for links or product cards, to be shown under text response) - I tried to have it send structured JSON at the end of response so I can parse it in frontend and show cards, but it's not working.

2. to change certain things in UI (ie. change the background color of the frontend). For usecase 2, I feel I could maybe use function calling, but not sure.

Any resources or direction would be helpful, thanks

[grave prawn]

What framework are you using for your frontend?
But for your questions:

1. Can you show your code for both the fetch request and the endpoint you are fetching?
2. This really depends on the frontend framework. Are you trying to change your frontend background from a backend response, or from user inputs?

[opaque wedge]

I'm using sveltekit with the openai nodejs package - I do the requests on +page.server.ts and handle inputs using form actions.

1. I'm directly using the openai package to fetch - I'm getting a list of ThreadMessage objects with text content in markdown, which I'm rendering using svelte-markdown (is calling the api directly better?)
2. Better with an example: let's say I want to change the background color / font to match the mood of the user - I'm thinking the model could suggest a color/font based on the conversation; I can have a function in my frontend to change the background/font. I was thinking I could use function calling to call a function in the backend, then have it call the function in frontend to change color. But I'm not sure how to scale it or if it's the best way to do it.

In general, just manipulating the website contents itself, using the model based on user inputs is something I'm not able to wrap my head around -