Feature: Shared State

CopilotKit makes it very easy to access the agent state in the frontend. You can use the useCoAgent hook to access the state of the agent from anywhere in your application. CopilotKit will manage the state for you, and will make sure to update the state so that you can always render the latest state in your UI, even while the state is streaming into your app.

const { state: carRentalState, setState: setCarRentalState } = useCoAgent({
  name: "car_rental_agent",
  // optionally provide an initial state
  initialState: {...}
});

You can also manage your own state by passing it into useCoAgent , along with a function to update the state:

useCoAgent({
  name: "car_rental_agent",
 
  // provide your own state management
  state: carRentalState,
  setState: setCarRentalState,
});

That’s all you need for streaming state updates!

Rendering intermediate state in the chat window

CopilotKit maintains a history of state changes so we can display them to the user in the chat window. This way, the user can see how their feedback affected the agent and scroll back to previous iterations of the state.

To render state in the chat window, use the useCoAgentAction hook:

useCoAgentAction({
  name: "car_rental_agent",
 
  // this is optional - can also have an action by agent
  nodeName: "confirm_node",
 
  // render can be a function or a string, just like useCopilotAction
  render: "Confirming rental...",
 
  // this is called when the node completes
  handler: ({ state, nodeName }) => {
    // ...
  },
});