useCoAgentStateRender
The useCoAgentStateRender hook allows you to render the state of the agent in the chat.
The useCoAgentStateRender hook allows you to render UI or text based components on a Agentic Copilot's state in the chat. This is particularly useful for showing intermediate state or progress during Agentic Copilot operations.
Usage
Simple Usage
import { useCoAgentStateRender } from "@copilotkit/react-core";
type YourAgentState = {
agent_state_property: string;
}
useCoAgentStateRender<YourAgentState>({
name: "basic_agent",
nodeName: "optionally_specify_a_specific_node",
render: ({ status, state, nodeName }) => {
return (
<YourComponent
agentStateProperty={state.agent_state_property}
status={status}
nodeName={nodeName}
/>
);
},
});This allows for you to render UI components or text based on what is happening within the agent.
Example
A great example of this is in our Perplexity Clone where we render the progress of an agent's internet search as it is happening. You can play around with it below or learn how to build it with its demo.
This example is hosted on Vercel and may take a few seconds to load.
Parameters
The name of the coagent.
The node name of the coagent.
The handler function to handle the state of the agent.
The render function to handle the state of the agent.
