Agent State
Render the state of your agent with custom UI components.
What is this?
AWS Strands agents maintain state as they process tasks. CopilotKit allows you to render this state in your application with custom UI components, which we call Agentic Generative UI.
When should I use this?
Rendering the state of your agent in the UI is useful when you want to provide the user with feedback about the overall state of a session. A great example of this is a situation where a user and an agent are working together to solve a problem. The agent can store a draft in its state which is then rendered in the UI.
Implementation
Run and connect your agent
You'll need to run your agent and connect it to CopilotKit before proceeding.
If you don't already have CopilotKit and your agent connected, choose one of the following options:
Setup your AWS Strands agent with state
Configure your Strands agent to maintain state. Here's an example that tracks searches:
from strands import Agent, Tool
from typing import TypedDict, List
# Define the agent state schema
class SearchItem(TypedDict):
query: str
done: bool
class AgentState(TypedDict):
searches: List[SearchItem]
# Create tool that updates state
@Tool
def add_search(query: str) -> dict:
"""
Add a search to the agent's list of searches.
Args:
query: The search query to add
Returns:
Success status and query
"""
# Tool implementation - state is automatically updated
return {"success": True, "query": query}
# Create agent with state management
agent = Agent(
name="searchAgent",
description="A helpful assistant for storing searches",
tools=[add_search],
state_schema=AgentState,
initial_state={"searches": []},
instructions="""
You are a helpful assistant for storing searches.
IMPORTANT:
- Use the add_search tool to add a search to the agent's state
- ONLY USE THE add_search TOOL ONCE FOR A GIVEN QUERY
"""
)Render state of the agent in the chat
Now we can utilize useCoAgentStateRender to render the state of our agent in the chat.
// ...
import { useCoAgentStateRender } from "@copilotkit/react-core";
// ...
// Define the state of the agent, should match the state schema of your Strands Agent.
type AgentState = {
searches: {
query: string;
done: boolean;
}[];
};
function YourMainContent() {
// ...
// styles omitted for brevity
useCoAgentStateRender<AgentState>({
name: "searchAgent", // MUST match the agent name in your Strands configuration
render: ({ state }) => (
<div>
{state.searches?.map((search, index) => (
<div key={index}>
{search.done ? "✅" : "❌"} {search.query}{search.done ? "" : "..."}
</div>
))}
</div>
),
});
// ...
return <div>...</div>;
}Important
The name parameter must exactly match the agent name you defined in your Strands configuration (e.g., searchAgent from above).
Render state outside of the chat
You can also render the state of your agent outside of the chat. This is useful when you want to render the state of your agent anywhere other than the chat.
import { useCoAgent } from "@copilotkit/react-core";
// ...
// Define the state of the agent, should match the state schema of your Strands Agent.
type AgentState = {
searches: {
query: string;
done: boolean;
}[];
};
function YourMainContent() {
// ...
const { state } = useCoAgent<AgentState>({
name: "searchAgent", // MUST match the agent name in your Strands configuration
})
// ...
return (
<div>
{/* ... */}
<div className="flex flex-col gap-2 mt-4">
{state.searches?.map((search, index) => (
<div key={index} className="flex flex-row">
{search.done ? "✅" : "❌"} {search.query}
</div>
))}
</div>
</div>
)
}Important
The name parameter must exactly match the agent name you defined in your Strands configuration (e.g., searchAgent from above).
Give it a try!
You've now created a component that will render the agent's state in the chat.
