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 }) => {
// ...
},
});
Want to Run CoAgents in Production?
We offer tailored solutions for Enterprise customers. We'd be happy to support you with custom use cases, deploying and scaling CoAgents in production.
🪁