CrewAI Crews
Learn how to implement Human-in-the-Loop (HITL) using CrewAI Crews.
Pictured above is the coagent starter with the implementation below applied!
What is this?
Crew-based agents are stateful agents that support interruption and resumption, enabling user input mid-execution.
CopilotKit provides custom UI hooks to capture that input and feed it back into the agent—making it easy to implement Human-in-the-Loop (HITL) workflows.
Important To implement HITL with CrewAI, you'll need:
- CrewAI for managing and orchestrating the agents
- Copilot Cloud to handle UI workflows and communication
Why should I use this?
Human-in-the-loop ensures your agent stays on track by letting users approve or modify actions during execution. This is especially useful for production-grade workflows that need more control, auditing, or fine-tuning.
Crew-based agents are ideal for HITL because they preserve execution state and context, even when paused for human input.
Implementation
Run and connect your agent
Make sure your agent is running and connected to CopilotKit. If you haven’t set this up, start with the Getting Started guide.
Add a useCopilotAction to your frontend
Create a component that displays the crew’s output and asks the user for approval before proceeding.
import { useCopilotAction } from "@copilotkit/react-core";
import { Markdown } from "@copilotkit/react-ui";
function YourMainContent() {
useCopilotAction({
name: "crew_requesting_feedback",
description: "Request feedback from the user on the crew's output",
renderAndWaitForResponse: ({ args, respond, status }) => (
<div>
<pre>{args}</pre>
<div className={`flex gap-4 pt-4 ${status !== "executing" ? "hidden" : ""}`}>
<button
onClick={() => respond?.("Reject")}
disabled={status !== "executing"}
className="border p-2 rounded-xl w-full"
>
Cancel
</button>
<button
onClick={() => respond?.("Approve")}
disabled={status !== "executing"}
className="bg-blue-500 text-white p-2 rounded-xl w-full"
>
Approve Kickoff
</button>
</div>
</div>
),
});
}Set up HITL on your Crew
You’ll need to configure your CrewAI Crew to pause and wait for human input before continuing.
- Follow this CrewAI guide: Human Input on Execution
- Reference this working example: restaurant-finder-crew with HITL
Reminder: To make this work end-to-end, you must run your crew on CrewAI and connect it to Copilot Cloud. These hosted solutions take care of message passing, HITL state syncing, and UI orchestration.
Try it out!
Run a test prompt like: "Research the state of AI in 2025."
You’ll see your custom UI appear, giving you the chance to approve or cancel the crew’s execution before it continues.
