How to create dynamic frontend

I have created a FastAPI server which has a langgraph agent access to many tools.

I have also created a next.js frontend to interract with the API as a chat application.

The problem I am facing is during tool calls and forking of chats. The graph persists data in postgres using async checkpointer. I then retrieve that data back. When call a tool or when i fork the chat how i store the data in the frontend so that different components are made with different data.

For example:

  1. time travel buttons like <1/2> forward and backward (should be able to go forward and backward and seeing only what is needed)
  2. human in the loop action button

all of the above are very dynamic depending upon what API sends back. how do i do it?

here is how my API data looks like.