Fully Headless UI - Copilotkit

import HeadlessUI from "@/snippets/shared/guides/custom-look-and-feel/headless-ui.mdx";

Human-in-the-Loop with Headless UI

For human-in-the-loop interactions with custom UI, use useHumanInTheLoop to create approval workflows:

tsx

import { useHumanInTheLoop, useCopilotChatHeadless_c } from "@copilotkit/react-core/v2";

export const Chat = () => {
  const { messages, sendMessage } = useCopilotChatHeadless_c();

  useHumanInTheLoop({
    name: "approvalRequired",
    description: "Request user approval for an operation",
    parameters: [
      { name: "operation", type: "string", description: "The operation to approve", required: true }
    ],
    render: ({ args, respond }) => {
      if (!respond) return null;
      
      return (
        <div>
          <p>Approval Required</p>
          <p>Operation: {args.operation}</p>
          <button onClick={() => respond("APPROVED")}>Approve</button>
          <button onClick={() => respond("REJECTED")}>Reject</button>
        </div>
      );
    },
  });

  return (
    <div>
    </div>
  )
};

See Human-in-the-Loop for more details on approval workflows.