CopilotKit

HITL Overview

Allow your agent and users to collaborate on complex tasks.


"""LangGraph agent backing the In-Chat HITL (useHumanInTheLoop) demo.The `book_call` tool is defined on the frontend via `useHumanInTheLoop`,so there is no backend tool here. CopilotKitMiddleware is attached so thefrontend suggestions and the time-picker render hook are picked up."""from langchain.agents import create_agentfrom langchain_openai import ChatOpenAIfrom copilotkit import CopilotKitMiddlewaregraph = create_agent(    model=ChatOpenAI(model="gpt-4o-mini"),    tools=[],    middleware=[CopilotKitMiddleware()],    system_prompt=(        "You help users book an onboarding call with the sales team. "        "When they ask to book a call, call the frontend-provided "        "`book_call` tool with a short topic and the user's name. "        "Keep any chat reply to one short sentence."    ),)

What is this?#

Human-in-the-loop (HITL) lets an agent pause mid-run to collect input, confirmation, or a choice from the user, then resume with that answer folded back into its reasoning. It's what turns an autonomous workflow into a collaborative one: the agent keeps its context, the user keeps the steering wheel.

When should I use this?#

Use HITL when you need:

  • Quality control — a human gate at high-stakes decision points
  • Edge cases — graceful fallbacks when the agent's confidence is low
  • Expert input — lean on the user for domain knowledge the model lacks
  • Reliability — a more robust loop for real-world, production traffic

Two patterns for HITL in CopilotKit#

CopilotKit ships two complementary ways to pause an agent turn and ask the human something. They look similar from the outside (the chat pauses, a custom component appears, the user answers, the run resumes) but they're wired differently on the backend, and each has its own niche.

PatternWho decides to pause?Backend surface
useHumanInTheLoopThe LLM, by calling a registered client-side toolA frontend-only tool description (Zod schema + render)
useInterruptThe graph, by calling interrupt(...) during a nodeA server-side interrupt() call in your LangGraph agent

Pick useHumanInTheLoop when the pause is an agent-initiated decision — the model chose to ask the user — and you want the picker UI inlined into the normal tool-call flow.

Pick useInterrupt when the pause is a graph-enforced checkpoint — the code path deterministically requires a human answer — and you want langgraph.interrupt() as the server-side contract.

Pattern 1 — useHumanInTheLoop (tool-based)#

The agent registers a HITL tool on the client with useHumanInTheLoop. When the LLM calls that tool, CopilotKit routes the call through your render function, which shows a custom component and calls respond with the user's answer. The agent sees the answer as the tool result and continues from there.

page.tsx
import React from "react";import {  CopilotKit,  CopilotChat,  useHumanInTheLoop,  useConfigureSuggestions,} from "@copilotkit/react-core/v2";import { z } from "zod";import { TimePickerCard, TimeSlot } from "./time-picker-card";const DEFAULT_SLOTS: TimeSlot[] = [  { label: "Tomorrow 10:00 AM", iso: "2026-04-30T10:00:00-07:00" },  { label: "Tomorrow 2:00 PM", iso: "2026-04-30T14:00:00-07:00" },  { label: "Monday 9:00 AM", iso: "2026-05-04T09:00:00-07:00" },  { label: "Monday 3:30 PM", iso: "2026-05-04T15:30:00-07:00" },];export default function HitlInChatDemo() {  return (    <CopilotKit runtimeUrl="/api/copilotkit" agent="hitl-in-chat">      <div className="flex justify-center items-center h-screen w-full">        <div className="h-full w-full max-w-4xl">          <Chat />        </div>      </div>    </CopilotKit>  );}function Chat() {  useConfigureSuggestions({    suggestions: [      {        title: "Book a call with sales",        message:          "Please book an intro call with the sales team to discuss pricing.",      },      {        title: "Schedule a 1:1 with Alice",        message: "Schedule a 1:1 with Alice next week to review Q2 goals.",      },    ],    available: "always",  });  useHumanInTheLoop({    agentId: "hitl-in-chat",    name: "book_call",    description:      "Ask the user to pick a time slot for a call. The picker UI presents fixed candidate slots; the user's choice is returned to the agent.",    parameters: z.object({      topic: z        .string()        .describe("What the call is about (e.g. 'Intro with sales')"),      attendee: z        .string()        .describe("Who the call is with (e.g. 'Alice from Sales')"),    }),    render: ({ args, status, respond }: any) => (      <TimePickerCard        topic={args?.topic ?? "a call"}        attendee={args?.attendee}        slots={DEFAULT_SLOTS}        status={status}        onSubmit={(result) => respond?.(result)}      />    ),  });

The picker UI is fed a static list of candidate slots — this is just data the demo page owns, so you can swap in real availability, a calendar API, or anything else:

page.tsx
import React from "react";import {  CopilotKit,  CopilotChat,  useHumanInTheLoop,  useConfigureSuggestions,} from "@copilotkit/react-core/v2";import { z } from "zod";import { TimePickerCard, TimeSlot } from "./time-picker-card";const DEFAULT_SLOTS: TimeSlot[] = [  { label: "Tomorrow 10:00 AM", iso: "2026-04-30T10:00:00-07:00" },  { label: "Tomorrow 2:00 PM", iso: "2026-04-30T14:00:00-07:00" },  { label: "Monday 9:00 AM", iso: "2026-05-04T09:00:00-07:00" },  { label: "Monday 3:30 PM", iso: "2026-05-04T15:30:00-07:00" },];

Pattern 2 — useInterrupt (graph-paused)#

With LangGraph's interrupt() the pause is enforced by the graph itself: a node calls interrupt({...}), the run suspends, the client receives the payload, renders a UI, and resumes the run with the user's answer. CopilotKit's useInterrupt hook is the render contract.

See the useInterrupt deep dive for the full walkthrough, including the backend tool and render-prop wiring.

"""LangGraph agent for the Interrupt-based Generative UI demo.Defines a backend tool `schedule_meeting(topic, attendee)` that useslanggraph's `interrupt()` primitive to pause the run and surface themeeting context to the frontend. The frontend `useInterrupt` renderershows a time picker and resolves with `{chosen_time, chosen_label}` or`{cancelled: true}`, which this tool turns into a human-readable result."""from __future__ import annotationsfrom typing import Any, Optionalfrom langchain.agents import create_agentfrom langchain_core.tools import toolfrom langchain_openai import ChatOpenAIfrom langgraph.types import interruptfrom copilotkit import CopilotKitMiddlewareSYSTEM_PROMPT = (    "You are a scheduling assistant. Whenever the user asks you to book a "    "call / schedule a meeting, you MUST call the `schedule_meeting` tool. "    "Pass a short `topic` describing the purpose and `attendee` describing "    "who the meeting is with. After the tool returns, confirm briefly "    "whether the meeting was scheduled and at what time, or that the user "    "cancelled.")@tooldef schedule_meeting(topic: str, attendee: Optional[str] = None) -> str:    """Ask the user to pick a time slot for a call, via an in-chat picker.    Args:        topic: Short human-readable description of the call's purpose.        attendee: Who the call is with (optional).    Returns:        Human-readable result string describing the chosen slot or        indicating the user cancelled.    """    # langgraph's `interrupt()` pauses execution and forwards the payload to    # the client. The frontend v2 `useInterrupt` hook renders the picker and    # calls `resolve(...)` with the user's selection, which comes back here.    response: Any = interrupt({"topic": topic, "attendee": attendee})    if isinstance(response, dict):        if response.get("cancelled"):            return f"User cancelled. Meeting NOT scheduled: {topic}"        chosen_label = response.get("chosen_label") or response.get("chosen_time")        if chosen_label:            return f"Meeting scheduled for {chosen_label}: {topic}"    return f"User did not pick a time. Meeting NOT scheduled: {topic}"model = ChatOpenAI(model="gpt-4o-mini")graph = create_agent(    model=model,    tools=[schedule_meeting],    middleware=[CopilotKitMiddleware()],    system_prompt=SYSTEM_PROMPT,)

Going headless#

Both patterns above ship with a render prop — CopilotKit handles the "when to show the picker" logic for you. If you want to drive interrupt resolution from a custom UI that lives anywhere in the tree (not necessarily inside a chat), see the headless interrupts guide — it shows how to compose useAgent, agent.subscribe, and copilotkit.runAgent to build your own useInterrupt equivalent.