Agentic Generative UI
Render the state of your agent with custom UI components.
This video demonstrates the implementation section applied to our coagents starter project.
What is this?
All CrewAI Crew agents support inputs to the crew and outputs, i.e. the overall result generated by the crew. The state of the outputs is available to your React frontend by using the useCoAgent hook, which allows you to easily render the state of your agent in your application. We call this feature Agentic Generative UI.
When should I use this?
Rendering the outputs of your crew in the UI is essential to provide the user with the end result of a crew run. The agent can provide the result to the user which is then rendered in the UI.
Implementation
Run and Connect your CrewAI Crew to CopilotKit
First, you'll need to make sure you have a running CrewAI Crew. If you haven't already done this, you can follow the getting started guide
This guide uses the CoAgents starter repo as its starting point.
Render state of the agent in the chat
Now we can utilize useCoAgentStateRender to render the state of our agent in the chat.
// ...
import { useCoAgent } from "@copilotkit/react-core";
// ...
// Define the state of the agent, should match the state of the agent.
type AgentState = {
inputs: {
topic: string,
current_year: string,
},
outputs: string,
};
function YourMainContent() {
// ...
// styles omitted for brevity
const { state } = useCoAgent<AgentState>({
name: "research_crew",
initialState: {
outputs: "Report will appear here",
},
});
return (
<div id="result">
<MarkdownRenderer content={state.outputs} />
</div>
)
}Give it a try!
You've now created a component that will render the agent's state in the chat.
