Human-in-the-Loop
Learn how to implement Human-in-the-Loop (HITL) using Mastra Agents.
What is this?
CopilotKit lets you to add custom UI to take user input and then pass it back to the agent upon completion.
Calling suspend() or resume() inside of a workflow is not currently supported in this integration.
Why should I use this?
Human-in-the-loop is a powerful way to implement complex workflows that are production ready. By having a human in the loop, you can ensure that the agent is always making the right decisions and ultimately is being steered in the right direction.
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:
Add a human-in-the-loop tool to your Frontend
First, we'll create a component that offers the user options and waits for their selection.
import { useHumanInTheLoop } from "@copilotkit/react-core"
function YourMainContent() {
// ...
useHumanInTheLoop({
name: "offerOptions",
description: "Give the user a choice between two options and have them select one.",
parameters: [
{
name: "option_1",
type: "string",
description: "The first option",
required: true,
},
{
name: "option_2",
type: "string",
description: "The second option",
required: true,
},
],
render: ({ args, respond }) => {
if (!respond) return <></>;
return (
<div>
<button onClick={() => respond(`${args.option_1} was selected`)}>{args.option_1}</button>
<button onClick={() => respond(`${args.option_2} was selected`)}>{args.option_2}</button>
</div>
);
},
});
// ...
}Setup the Mastra Agent
On the agent side, we are already done! Mastra natively supports the AG-UI protocol and will automatically
pass control back to the frontend when the offerOptions tool is called by the agent.
Give it a try!
Try asking your agent something that requires a choice.
Can you show me two good options for a restaurant name?"You'll see that the agent will present two options and wait for you to select one before continuing.
