Advanced Agentic Loops and Human-in-the-Loop Implementation

Overview of Agentic Loops and Tool Integration

  • The agentic loop structure involves sending a user's message along with a collection of tool schemas that the AI agent can choose to utilize.
  • There are two primary outcomes from an agent response:     - Convergence: If the agent responds with only a message, the loop ends. The message is appended to the screen, as there are no further actions or lookups required.     - Tool Execution: If the agent decides to execute a tool, it returns a list of tool calls. Each tool call includes a name, arguments, and a call ID.
  • To execute these tools, the system must:     - Look up the tool in a predefined list of objects (each containing a handler and a schema).     - Compare the name provided by the AI with the schema name.     - Call the associated handler function using the arguments provided by the AI.     - Append the function call and the result to the message log as an audit log for the agent to process in the next iteration.

Practical Tool Handling and Parameter Management

  • In the provided example using the Badger Chat mini UI, four tools are defined: get comments, log in, log out, and create comments.
  • Handling Arguments: In the get comments tool, the agent may pass an argument n representing the number of comments requested (e.g., n = 2).     - Even if the code currently fetches all comments (e.g., the last 10) by ignoring args.n, the AI agent can still filter the results for the user because it ingests the entire context.     - Best Practice: Use the provided arguments (e.g., args.n) to limit the data retrieved. This saves context space, reduces token usage, and prevents confusing the model with extraneous information.
  • Tool Schemas: Successful implementation in Homework 11 requires defining appropriate schemas, descriptions, properties, and parameters within a tools.js file.

Strategic Redirection for Authentication Tools

  • Certain functional tools like log in and log out serve as redirects rather than functional back-end calls within the chat interface.
  • Security Rationale: Users should not type credentials (username and password) directly into the chat interface as it may expose passwords in plain text and is a poor user experience.
  • Implementation: The tool handlers for log in and log out should return a message instructing the user to use existing UI controls.     - Example prompt for log in: "The user should not pass their credentials here. You cannot log in the user. They must use the button at the top of the screen. Do not retry."     - Example prompt for log out: "The user can not log out through chat. You may not log the user out, do not retry."

Risks of Autonomous Actions and Human-in-the-Loop

  • Giving an LLM the power to post content (e.g., create comments) without oversight is risky.
  • Risks:     - The agent might hallucinate a comment.     - It might post something inappropriate or a joke on the user's behalf without explicit consent.     - It might "deface" a website or profile if given full control.
  • Solution: A "Human-in-the-Loop" system is required. This involves a modal (a pop-up dialog) that forces the user to confirm the action before the tool execution is finalized.

Producing and Consuming Promises in JavaScript

  • To pause execution and wait for user interaction (like a modal click), developers must produce their own Promise objects.
  • Consumers vs. Producers:     - Consumers use .then() or await on a promise they were given.     - Producers create a new Promise and decide when to resolve or reject it.
  • Promise Syntax:     - A Promise takes a callback function with two parameters: resolve and reject.     - resolve(data)\text{resolve(data)} is called when the operation is successful. The data is passed to the original caller.     - reject(error)\text{reject(error)} is called when an error occurs, which can be handled by a .catch() block or a try-catch statement.
  • Mathematical Example of Promise Production:

DoMath(x,y)={reject("Error: Divide by Zero")amp;if y=0 resolve(x/y)amp;otherwise\text{DoMath}(x, y) = \begin{cases} \text{reject}(\text{"Error: Divide by Zero"}) & \text{if } y = 0 \ \text{resolve}(x/y) & \text{otherwise} \end{cases}

  • This structure allows the computer to handle lengthy or asynchronous computations without blocking the main thread.

Implementing the Confirmation Modal with Promises

  • To synchronize the React UI with the agentic loop, a reference (e.g., confirmResolverRef) is used to store the resolve function of a promise.
  • The Confirmation Process:     1. The tool create comments is triggered.     2. A function (e.g., confirmComments) is called, which displays the confirmation modal and creates a new promise.     3. The resolve function of that promise is stored in confirmResolverRef.     4. The system awaits that promise, effectively blocking the agent loop's execution.     5. When the user interacts with the modal, handleConfirmClose is triggered.     6. handleConfirmClose calls the stored resolve function, passing a Boolean (true for confirm, false for cancel).     7. The loop resumes based on the returned Boolean.

Logic Flow for Risky Tool Handling

  • When the tool name (tc.name) is create comments:     - Step 1: Await confirmComments(tc.arguments.comment).     - Step 2: If the user confirms/approves:         - Call the actual tool handler (the fetch POST request).         - Set the output to a success message (e.g., "Comment was confirmed and posted").     - Step 3: If the user cancels/disapproves:         - Skip the tool handler.         - Set the output to a failure message (e.g., "Comment was not confirmed by the user, do not retry").
  • This ensures that the AI agent receives the correct status regarding whether the action was actually carried out or dismissed by the human user.

Homework 11 Submission and Conclusion

  • Homework 11 Tasks:     - Create a tools.js file with appropriate schemas.     - Define tool handlers including risky actions and UI redirections.     - Implement the agentic loop and the confirmation logic in the TextApp.jsx file.
  • Submission Details:     - There is no Gradescope portal for Homework 11.     - Students must submit a demo video to Canvas showing all requested functionalities.     - A human will review the video for grading.
  • This concludes the final homework of the semester.