feat(agno): add Human-in-the-Loop demo pages

apps/dojo/src/agents.ts

@@ -377,6 +377,11 @@ export const agentsIntegrations = {
         predictive_state_updates: "predictive_state_updates",
         shared_state: "shared_state",
         tool_based_generative_ui: "tool_based_generative_ui",
+        tool_confirmation: "tool_confirmation",
+        user_input: "user_input",
+        backend_feedback: "backend_feedback",
+        team_human_in_the_loop: "team_human_in_the_loop",
+        nested_team_chat: "nested_team_chat",
       },
     ),
 

apps/dojo/src/app/[integrationId]/feature/(v2)/backend_feedback/README.mdx

@@ -0,0 +1,25 @@
+# Multiple Choice Feedback
+
+## What This Demo Shows
+
+This demo showcases the **multiple choice feedback** HITL pattern:
+
+1. **Option Selection**: Agent presents choices for user to select from
+2. **Radio Buttons**: User picks one option from a list
+3. **Frontend-Defined Tools**: Tools are registered via `useHumanInTheLoop` hook
+
+## How to Interact
+
+1. Ask your Copilot for a recommendation:
+   - "Help me pick a cuisine for dinner"
+   - "Help me plan my weekend activities"
+
+2. A card with multiple options will appear
+
+3. Select an option and click **Confirm Selection**
+
+## Technical Details
+
+- Backend: Minimal agent with no tools (tools come from frontend)
+- Frontend: Uses `useHumanInTheLoop` hook with `MultipleChoiceCard`
+- The agent receives the selected choice and responds accordingly

apps/dojo/src/app/[integrationId]/feature/(v2)/backend_feedback/page.tsx

@@ -0,0 +1,68 @@
+"use client";
+import React from "react";
+import "@copilotkit/react-core/v2/styles.css";
+import {
+  useHumanInTheLoop,
+  useConfigureSuggestions,
+  CopilotChat,
+  CopilotChatConfigurationProvider,
+} from "@copilotkit/react-core/v2";
+import { CopilotKit } from "@copilotkit/react-core";
+import { z } from "zod";
+import { MultipleChoiceCard } from "../hitl-components";
+
+interface BackendFeedbackProps {
+  params: Promise<{ integrationId: string }>;
+}
+
+const BackendFeedback: React.FC<BackendFeedbackProps> = ({ params }) => {
+  const { integrationId } = React.use(params);
+
+  return (
+    <CopilotKit
+      runtimeUrl={`/api/copilotkit/${integrationId}`}
+      showDevConsole={false}
+      agent="backend_feedback"
+    >
+      <CopilotChatConfigurationProvider agentId="backend_feedback">
+        <ChatContent />
+      </CopilotChatConfigurationProvider>
+    </CopilotKit>
+  );
+};
+
+const ChatContent = () => {
+  useConfigureSuggestions({
+    suggestions: [
+      { title: "Restaurant", message: "Help me pick a cuisine for dinner" },
+      { title: "Weekend", message: "Help me plan my weekend activities" },
+    ],
+    available: "always",
+  });
+
+  useHumanInTheLoop({
+    agentId: "backend_feedback",
+    name: "get_user_choice",
+    description: "Present options to the user and get their selection",
+    parameters: z.object({
+      question: z.string().describe("The question to ask the user"),
+      options: z.array(z.string()).describe("Array of options for the user to choose from"),
+    }),
+    render: ({ args, respond, status }: any) => (
+      <MultipleChoiceCard args={args} respond={respond} status={status} />
+    ),
+  });
+
+  return (
+    <div className="flex justify-center items-center h-full w-full">
+      <div className="h-full w-full md:w-8/10 md:h-8/10 rounded-lg">
+        <CopilotChat
+          agentId="backend_feedback"
+          className="h-full rounded-2xl max-w-6xl mx-auto"
+        />
+      </div>
+    </div>
+  );
+};
+
+export default BackendFeedback;