From Clicks to Calls: Translating React Page Interactions into AI Agent Tool Invocations

Hello, I’m Lan Jian. Yesterday we covered what LangChain.js is and got the first ChatModel call running. Today we tackle a more fundamental question: what is the difference between page interaction and Agent interaction? Understanding this reveals why front‑end developers have a natural advantage in building AI Agents.

Page Interaction vs Agent Interaction

Traditional page interaction follows a simple "user clicks, we call something, we show the result" pattern, and every step is hard‑coded by the developer.

// Traditional page interaction: user clicks, we call something
function handleSearchClick() {
  fetch('/api/search?q=' + inputValue)
    .then(res => res.json())
    .then(data => setResults(data));
}

In contrast, Agent interaction lets the user state a requirement in natural language; the Agent decides which tools to invoke and in what order, then returns the result.

// Agent interaction: user says a need, Agent decides which tools to call
const agent = createReactAgent({
  llm: model,
  tools: [searchTool, weatherTool, calcTool],
});
// User says: "Help me check Beijing weather, and if it rains, search nearby cinemas"
const result = await agent.invoke({
  messages: [new HumanMessage(userInput)],
});

The core distinction is that traditional interaction is "developer‑planned path" while Agent interaction is "Agent‑planned path".

From React Event Handling to Agent Tool Calls

Front‑end developers already know the concept of "tool calls" through React event handlers; the only change is who triggers the call.

React event handling:

<button onClick={handleSearch}>Search</button>
function handleSearch() {
  // This is the "tool"
  searchAPI(inputValue).then(setResults);
}

Agent tool call:

const searchTool = tool(
  async ({ query }) => {
    // This is the same "tool" as handleSearch
    return await searchAPI(query);
  },
  {
    name: "search",
    description: "Search related information",
    schema: z.object({ query: z.string() }),
  }
);

Thus, an Agent’s Tool is essentially a React event handler, but the caller switches from a user click to the ChatModel’s decision.

Putting Tools Together: Chain vs Agent

With tools defined, the next question is how to orchestrate them.

Chain: Simple linear flow (like a React component tree)

import { ChatPromptTemplate } from "@langchain/core/prompts";
import { ChatOpenAI } from "@langchain/openai";
import { StringOutputParser } from "@langchain/core/output_parsers";

const prompt = ChatPromptTemplate.fromMessages([
  ["system", "You are a friendly AI assistant."],
  ["human", "{input}"],
]);

const model = new ChatOpenAI({
  model: "gpt-4o-mini",
  openAIApiKey: process.env.OPENAI_API_KEY,
});

const outputParser = new StringOutputParser();

// Like building a React component tree: Prompt → Model → OutputParser
const chain = prompt.pipe(model).pipe(outputParser);

const result = await chain.invoke({ input: "Explain async/await" });
console.log(result);

Chain automatically handles the linear sequence: prompt.format() → model.invoke() → outputParser.parse().

Agent: Branching and looping (like a React state machine)

import { createReactAgent } from "@langchain/langgraph/prebuilt";
import { ChatOpenAI } from "@langchain/openai";

const model = new ChatOpenAI({
  model: "gpt-4o-mini",
  openAIApiKey: process.env.OPENAI_API_KEY,
});

// Agent automatically plans the order of tool calls
const agent = createReactAgent({
  llm: model,
  tools: [weatherTool, searchTool, calcTool],
});

const result = await agent.invoke({
  messages: [new HumanMessage("Beijing weather today? If it rains, search nearby cinemas")],
});

Real agents are not straight lines; they call a tool, receive the result, analyze it, and possibly call another tool—forming a loop.

Selection conclusion: For AI Agents you almost always need an Agent because tool calls naturally require looping. Chains are suitable for simple, straight‑through scenarios that do not require conditional branching.

Day‑2 Summary

Today we covered four points:

First : The essential difference between page interaction (developer‑planned) and Agent interaction (Agent‑planned).

Second : Front‑end developers already know "tool calls"—React event handlers are equivalent to LangChain tools.

Third : Defining a Tool only requires three steps: write the execution function, provide a description, and define the parameter schema.

Fourth : Chains fit linear flows; Agents fit complex scenarios with branches and loops.

Tomorrow’s focus will be a complete TypeScript project where an Agent can query a knowledge base and invoke tools, with code that can be run directly.