This repo implements an agent, modeled after a customer support rep, with two sets of tools:
- Readonly tools that can be called freely
- A more sensitive
refund
tool that requires authorization
If you ask conversational questions like "How are you today?"
the agent will answer without calling other tools.
If you ask the agent technical questions or billing questions, it will attempt to gather
enough information to call an appropriate tool (mocked out in src/lib/tools.ts
).
And finally, if you query the agent with a refund related question, it will generate a four digit test code, then text it to a phone number using Twilio. The agent will then pause execution, and will only resume after you send the code back. If you enter the wrong code, it will generate a new code and resend it, but if you generate the correct one, it will treat you as authorized and invoke the refund tool!
- Twilio for sending SMS messages
- Anthropic for the chat model
- LangGraph.js to implement and orchestrate the agent
- Cloudflare D1 for checkpointing and state
- Cloudflare Workers for development and hosting
- LangSmith for tracing and development (optional)
After cloning this repo, you will need to set up Cloudflare's Wrangler CLI. You will also need to create a D1 instance and add it to the wrangler.toml
file:
[[d1_databases]]
binding = "DB" # i.e. available in your Worker on env.DB
database_name = "<YOUR DATABASE NAME>"
database_id = "<YOUR DATABASE ID>"
Sign up for Twilio and claim a phone number. You'll then need to set the following secrets in .dev.vars
:
TWILIO_ACCOUNT_SID="<YOUR SID>"
TWILIO_AUTH_TOKEN="<YOUR AUTH TOKEN>"
TWILIO_PHONE_NUMBER="<YOUR CLAIMED PHONE NUMBER>"
TWILIO_DESTINATION_PHONE_NUMBER="<YOUR PERSONAL PHONE NUMBER>"
Don't forget to add a +
character in front of the phone numbers.
Sign up for an Anthropic account and set your API key as a secret in .dev.vars
:
ANTHROPIC_API_KEY="<YOUR API KEY>"
If you would like to use LangSmith for tracing as you continue to test and extend this app, you'll need to set the following secrets in .dev.vars
:
LANGCHAIN_TRACING_V2="true"
LANGCHAIN_API_KEY="<YOUR API KEY>"
Install dependencies with npm install
, then run npm run dev
to spin up a local instance.
There is currently no frontend, but you can ping the endpoint directly with a GET
request with query parameters:
http://localhost:8787/?thread_id=<SOME THREAD ID>&question=I%20want%20a%20refund!
You would then see a run like this asking for more information, since the refund tool requires a name and an order number:
You can continue the conversation by passing the same thread id with a new question.
http://localhost:8787/?thread_id=<SOME THREAD ID>&question=my%20name%20is%20jacob%20and%20my%20order%20id%20is%2099999
If you followed up with the requested information, you would see a run like this where the model requires authorization before calling the refund tool:
For the confirmation step, you'll need to add an additional query param:
http://localhost:8787/?thread_id=<SOME THREAD ID>&two_factor_code=<TEXTED CODE>
And if the code is correct, the agent will successfully authorize and call the refund tool, resulting in a run like this:
If you enter the wrong code, you'll be texted again.
If you pass question
and two_factor_code
at the same time, the question will be ignored.
This repo is meant as a starting point and a showcase of what is possible with LangGraph's human-in-the-loop features. You could extend it with other tools, models, or flows.
For more, follow me on X @Hacubu!