Threads
Learn how to maintain persistent conversations across sessions with CrewAI Flows.
Understanding Thread Persistence
CrewAI Flows supports threads, a way to group messages together and maintain a continuous chat history across sessions. CopilotKit provides mechanisms to ensure conversation state is properly persisted between the frontend and backend.
This guide assumes you have already gone through the quickstart guide.
Note: While the frontend uses threadId to manage conversation sessions,
true persistence across sessions requires backend setup. The backend agent
needs to implement a persistence mechanism (like the one shown in
Message Persistence)
to save and load the state associated with each threadId.
See the sample agent implementation for a concrete example.
Frontend: Setting the ThreadId
Loading an Existing Thread
To load an existing thread in CopilotKit, set the threadId property on <CopilotKit>:
import { CopilotKit } from "@copilotkit/react-core";
<CopilotKit threadId="37aa68d0-d15b-45ae-afc1-0ba6c3e11353">
<YourApp />
</CopilotKit>;Dynamically Switching Threads
You can make the threadId dynamic. Once set, CopilotKit will load previous messages for that thread.
import { useState } from "react";
import { CopilotKit } from "@copilotkit/react-core";
const Page = () => {
const [threadId, setThreadId] = useState(
"af2fa5a4-36bd-4e02-9b55-2580ab584f89"
);
return (
<CopilotKit threadId={threadId}>
<YourApp setThreadId={setThreadId} />
</CopilotKit>
);
};
const YourApp = ({ setThreadId }) => {
return (
<Button onClick={() => setThreadId("679e8da5-ee9b-41b1-941b-80e0cc73a008")}>
Change Thread
</Button>
);
};Using setThreadId
CopilotKit provides the current threadId and a setThreadId function from the useCopilotContext hook:
import { useCopilotContext } from "@copilotkit/react-core";
const ChangeThreadButton = () => {
const { threadId, setThreadId } = useCopilotContext();
return (
<Button onClick={() => setThreadId("d73c22f3-1f8e-4a93-99db-5c986068d64f")}>
Change Thread
</Button>
);
};
