Booking Agent

We will implement a simple ReAct agent with a chat UI and a Human in The Loop Approval step with both Cascaide and Cascaide Lite to understand the difference.

You can find the github repo here :

Problem Statement: A ReAct agent that searches for hotel bookings, displays it to the user and books a hotel with payment approval.

Prerequisites:

• Set up an application following the quickstart guide.

We assume that you are using NextJS here, but the same principles apply to any stack.

Step 1 : Sketch the Global Graph

We will have a total of 4 nodes

1. Chat UI node: This will be the first node and the entry point. It will always be active. | Client Node
2. Agent Node: The LLM call happens here. | Server Node
3. Tool Node: This will have a web search tool to find bookings | Server Node
4. Approval UI Node: This node will take human approval and call an API to process payment, and will vanish once done. | Client Node

Step 2 : Define the Client Workflow Graph and Configuration

The Client Workflow Graph contains the meta data regarding all nodes in the global graph (we will discuss why meta data of server nodes are also required in more detail in concepts - it has to do with gracefull timeout handling in serverless). ClientWorkflowGraph + UI component registry makes up the Client Configuration.

// src/graphs/clientConfig.ts
 
import Chat from "@/components/cascaide-ui/chat";
import ApprovalUI from "@/components/cascaide-nodes/approval"
import { ClientWorkflowConfig } from "@cascaide-ts/react";
 
 
 
export const WorkflowConfig: ClientWorkflowConfig = {
 
  clientWorkflowGraph: {
    chat: { name: 'chat', isUINode: true },
    approvalUi : { name: approvalUi, isUINode: true }
    agentNode: { name: 'agentNode', isUINode: false, isStreaming: true },
    toolNode: { name: 'toolNode', isUINode: false },
  },
 
  uiComponentRegistry: {
    chat: Chat,
    approvalUi: ApprovalUI
  },
};
 
 

We will define these nodes later.