Introduction: When Simple Chatbots Aren’t Enough

Imagine you’ve built a chatbot using OpenAI’s language model. This chatbot is smart—it can understand questions in English and answer with helpful information. But there’s a catch: the chatbot only knows what was in its training data. It’s like having a super-intelligent librarian who knows every book in the library, but nothing about what’s happening outside right now.

Let’s say you ask it,

“Do I need an umbrella to go to the office today in Pune?”

The chatbot understands you want weather advice, but unless it has live weather data, it can’t help. Training the model to know every update about the world would be impossible—and would make the model huge and slow to update!

This limitation isn’t just with chatbots. Our own brains work the same way. If someone asks, “Do I need an umbrella for Pune today?”—without checking the weather app or stepping outside, it’s just a guess.

So, how do we build chatbots that can help with real-world, everyday questions? We let them use tools—just like we use apps or search engines.

Meet Agentic AI: The Next Step

Now, picture an AI that’s more like an assistant than a parrot. This AI can:

• Understand your question using the language model’s skills.

• Decide which tools (like a weather website, calculator, or map) it should use to fetch the answer.

• Read the results, make sense of them, and reply in natural, friendly language.

This is called an Agent in AI.

Agent = LLM + Tools

• The LLM (Large Language Model) is good at understanding and talking.

• The tools are extra resources—apis, search engines, calculators, anything that fetches fresh data or does tasks.

Real-life analogy:

Think of the agent as a friend who’s great with words (LLM), but also carries a smartphone loaded with useful apps (tools). When you ask her about today’s weather, she checks her weather app before answering.

Why Agents Matter

Agents solve the biggest limitation in LLMs: They connect “knowing how to talk” with “being able to do.” By combining LLMs with tools, your chatbot stops being just a talker and becomes a true doer. It’s like giving your chatbot a Swiss army knife.

---

Let’s Build: Budget Manager Agent (with ReAct)

Suppose the chatbot now acts like a smart financial assistant. You ask:

“Can you increase my groceries budget by 5000?”

A plain chatbot can understand the request but might not know your current budget, nor can it update anything in real life. An agent, however, solves this by thinking step-by-step and using tools—just how people work out their budgets with a calculator or spreadsheet.

Let’s see how such an agent works from scratch, using the ReAct technique.

What is ReAct? The “Think, Act, Observe” Way

ReAct stands for Reasoning + Acting.

Instead of going straight to the final answer, the AI:

• Thinks about the problem, breaking it into simple pieces.

• Acts by using tools like a calculator, database, or search engine.

• Observes the results, learns from new info, and continues until done.

It loops through these gears again and again, just like a person does when managing a budget.

Example of ReAct prompting

ReAct agents execute sequentially:

Think → Act → Observe → Repeat.

Why Use ReAct Agents?

• No guessing! Agents don’t jump to answers—they gather info, do calculations, and double-check using tools.

• Just like humans: Think about how you’d budget for the month. First, you check what you spent, then decide what to add, and maybe use a calculator or app.

• Flexible for all scenarios: From adding to a grocery budget to planning for a holiday or tracking project expenses, agents can loop through steps with any tools you provide

Imagine giving your chatbot access to:

• Spreadsheets or financial APIs

• Calculators for quick math

• Databases for storing and fetching budgets

The ReAct agent calls the tools as needed, then returns easy-to-understand answers in natural language.

---

Coding the Budget Manager Agent:

1. Setting Up: Imports and Initialization

Start by loading important modules and setting up an in-memory store for budgets:

// Import necessary modules and configuration
import "dotenv/config";
import { OpenAI } from "openai";

// This will hold all our budgets (like a little database in memory)
const budgetTable = new Map([["groceries", 10000]]);

// Create a openAI object, you can use gemini key and baseURL
const openai = new OpenAI({
  apiKey: process.env["OPENAI_API_KEY"]
});

2. Budget Tools: Basic Functions

These functions help the agent create, update, fetch, or delete budgets. Each one focuses on a single job to keep things tidy.

// Add a new budget
function createBudget(name, amount) {
  if (budgetTable.has(name)) return "Budget is already created";
  budgetTable.set(name, amount);
  return "Budget added successfully";
}

// Get a budget by name
function getBudget(name) {
  if (!budgetTable.has(name)) return "Budget not found";
  const amount = budgetTable.get(name);
  return { name, amount };
}

// Get all budgets
function getAllBudget() {
  return Object.fromEntries(budgetTable);
}

// Update a named budget
function updateBudget(name, newAmount) {
  if (!budgetTable.has(name)) return "Budget not found";
  budgetTable.set(name, newAmount);
  return "Budget updated successfully";
}

// Delete a budget by name
function deleteBudget(name) {
  if (!budgetTable.has(name)) return "Budget not found";
  budgetTable.delete(name);
  return "Budget deleted successfully";
}

3. Tool Selector

A simple object lets the agent call the right function for each action the LLM asks for.

const TOOLS = {
  createBudget,
  getBudget,
  getAllBudget,
  updateBudget,
  deleteBudget,
};

// Helper to run the requested action
function handleActionCalling(action, name, amount) {
  const actionCallback = TOOLS[action];
  if (!actionCallback) return "No such action available";
  return actionCallback(name, amount);
}

4. System Message for the Agent

Here, describe how the ReAct process works. This prompt guides the AI step-by-step.

const SystemPrompt = `
You are an AI Assistant that run in loop of THINK, ACTION, and OBSERVATION state.
At the end of the loop you OUTPUT an answer.
Use Action to run one of the actions available to you - then wait till observation.
Observation will be the result of the running those actions.
Perform the task step by step, One step at a time
Output will be in form of json

Your available actions are:
- createBudget:
  This action will create new budget if not exist. You will need to provide name: budget name, amount: budget amount

- getBudget
  This action will return budget amount if exist. You will need to provide budget name

- getAllBudget
  This action will return all the budget user has created.

- updateBudget
  This action will update the existing budget amount. You will need to provide budget name

- deleteBudget
  This action will delete the existing budget, You will need to provide budget name

Example session
{ "state": "input",  "input":  "Create a new dining out budget of ₹5000. Give me the sum of the groceries and dining budgets."}
{ "state": "thought", "thought": "I will need to first create new budget of 5000 for dining" }
{ "state": "action", "action": "createBudget", "name": "dining", "amount": 5000 }
{ "state": "observation", "observation": "Budget added successfully" }
{ "state": "thought", "thought": "I will need to get budget amount for groceries" }
{ "state": "action", "action": "getBudget", "name": "groceries" }
{ "state": "observation", "observation": "{'name': 'groceries', 'amount': 10000 }" }
{ "state": "thought", "thought": "As I have budget of both groceries and dining, so now I can answer the user input" }
{ "state": "output" , "output": "The total budget of groceries and dining is 15000rs "}
`;

5. Tracking the Conversation

Keep all messages and events (both user and model responses) in a history array: Help the mode to memory the history conversation.

const chatHistory = [
  { role: "system", content: SystemPrompt }
];

6. The Main Agent Loop

This function runs the agent. It lets the LLM think, decide on actions, see what happens, and repeat until it’s ready with a final answer.

async function agentAI(userMessage) {
  // Step one: add the user's question
  chatHistory.push({
    role: "user",
    content: JSON.stringify({ step: "input", input: userMessage }),
  });

  // The main loop: Think → Act → Observe → Repeat
  while (true) {
    const response = await openai.chat.completions.create({
      model: "gpt-4o-mini", // Choose your GPT model here
      messages: chatHistory,
      response_format: { type: "json_object" },
    });

    // Save what the model said next
    const botMessage = response.choices[0].message.content;
    chatHistory.push({ role: "assistant", content: botMessage });

    // Figure out what step we’re on
    const step = JSON.parse(botMessage);

    if (step.state === "output") {
      // Task is done!
      console.log("FINAL OUTPUT: ", step);
      break;
    } else if (step.state === "action") {
      // Time to use a tool (like updating or looking up a budget)
      console.log("STEP: ", step);
      const observation = handleActionCalling(
        step.action,
        step.name,
        step.amount
      );
      // Report what happened back to the agent
      const observationStep = JSON.stringify({
        step: "observation",
        observation,
      });
      chatHistory.push({
        role: "developer",
        content: observationStep,
      });
    } else {
      // Any other info (thoughts)
      console.log("STEP: ", step);
    }
  }
}

7. Running the Agent

Give it a try by asking to increase the groceries budget:

await agentAI("Can you increase my groceries budget by 5000?");

Code Output

STEP: { state: 'thought', thought: 'I need to first check the current amount of the groceries budget before adding 5000rs.' }
STEP: { state: 'action', action: 'getBudget', name: 'groceries' }
STEP: {"step":"observation","observation":{"name":"groceries","amount":10000}}
STEP: { state: 'thought', thought: 'The current groceries budget is 10000rs. I will now update it to add 5000rs more.' }
STEP: { state: 'action', action: 'updateBudget', name: 'groceries', amount: 15000 }
STEP: {"step":"observation","observation":"Budget updated successfully"}
FINAL OUTPUT: { state: 'output', output: 'The groceries budget has been successfully updated to 15000rs.' }

Conclusion

Using the ReAct technique to build an agentic AI, like our budget manager, shows how AI can think, act, and learn step-by-step. This makes the AI much more flexible and practical, able to use tools to get up-to-date data and solve real problems.

By combining language understanding with tool usage, developers can create smarter assistants for many tasks, from managing finances to customer support. Keep exploring these ideas to build powerful AI agents that truly help users in everyday life.