DEV Community

Cover image for 🧠 The Hidden Power of AI Agents in Web Apps: Build a Truly Smart App in Less than 100 Lines of Code
Yevhen Kozachenko 🇺🇦
Yevhen Kozachenko 🇺🇦

Posted on • Originally published at ekwoster.dev

🧠 The Hidden Power of AI Agents in Web Apps: Build a Truly Smart App in Less than 100 Lines of Code

#aiagentsdevelopment #webapps #node #chatbotsdevelopment

🧠 The Hidden Power of AI Agents in Web Apps: Build a Truly Smart App in Less than 100 Lines of Code

Imagine your web app actually thinks. Not just a chatbot. Not just GPT copy-paste. A decision-making, task-managing, user-adapting digital assistant. Welcome to the world of AI agents inside web apps — and yes, we’re doing it in under 100 lines of code.

🤯 Wait... What’s an AI Agent?

Unlike a simple chatbot or LLM wrapper (like GPT in a textarea), an AI Agent has:

  • Goals – It wants something.
  • Memory – It remembers what it did or said.
  • Tool use – It can use APIs and resources.
  • Decision-making – It can plan and change direction.

Think of ChatGPT on steroids — mixed with Jarvis from Iron Man.

✨ Why Should You Care?

If your app depends on communicating with users, managing tasks, or transforming data — you can basically automate it with an agent. Customer onboarding, knowledge base assistants, form automation, internal dashboards, project organizers... all can have autonomous intelligence now.

🛠️ Technologies Used

We'll build a simple AI Agent in a web app with:

  • 🧠 LangChainJS – A library for agent creation and orchestration
  • 🤖 OpenAI API (GPT-4) – Our LLM brain
  • 🌐 Express (Node.js) – Backend to run the agent
  • 💻 Vanilla HTML – Frontend UI

No doomscrolling required. ↓ Let's go.

✅ What We'll Build: “Task Buddy”

A micro-agent that:

  1. Takes a user goal in natural language
  2. Plans which tools it needs (like calling a /weather or /note API)
  3. Returns a result

Here’s what it might do:

"Remind me to drink water every 3 hours, and give me today’s weather in Berlin."

🧱 Setup (Don’t Worry, It’s Light) 

npm init -y
npm install express langchain openai dotenv
Enter fullscreen mode Exit fullscreen mode

Create a .env file:

OPENAI_API_KEY=your-super-secret-api-key
Enter fullscreen mode Exit fullscreen mode

📁 File: agent.js

This is our AI brain in about 40 lines.

const { initializeAgentExecutorWithOptions } = require("langchain/agents");
const { OpenAI } = require("langchain/llms/openai");
const { SerpAPI, Calculator } = require("langchain/tools");
require('dotenv').config();

const tools = [
  new Calculator(),
  new SerpAPI(), // You can mock this with custom APIs too
];

const model = new OpenAI({ temperature: 0, openAIApiKey: process.env.OPENAI_API_KEY });

async function runAgent(userInput) {
  const executor = await initializeAgentExecutorWithOptions(tools, model, {
    agentType: 'zero-shot-react-description',
  });

  console.log("🤖 Agent initialized. Ask: ", userInput);

  const result = await executor.call({ input: userInput });
  return result.output;
}

module.exports = runAgent;
Enter fullscreen mode Exit fullscreen mode

📁 File: server.js

Minimal Express backend:

const express = require('express');
const runAgent = require('./agent');
const cors = require('cors');

const app = express();
app.use(cors());
app.use(express.json());

app.post('/agent', async (req, res) => {
  const userInput = req.body.input;
  const output = await runAgent(userInput);
  res.json({ output });
});

app.listen(3001, () => console.log('🧠 Agent server on http://localhost:3001'));
Enter fullscreen mode Exit fullscreen mode

📁 File: index.html

Simple frontend:

<!DOCTYPE html>
<html>
<head>
  <title>Task Buddy</title>
</head>
<body>
  <h1>🧠 Task Buddy</h1>
  <textarea id="input" placeholder="Tell me what to do..." rows="4" cols="50"></textarea><br>
  <button onclick="runAgent()">Run Agent</button>
  <pre id="output"></pre>

  <script>
    async function runAgent() {
      const input = document.getElementById('input').value;
      const res = await fetch('http://localhost:3001/agent', {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({ input })
      });
      const data = await res.json();
      document.getElementById('output').textContent = data.output;
    }
  </script>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

💡 Example Outputs

Ask:

"Summarize the news about AI stocks and calculate if I invested $500 in Nvidia last week at $X per share."

🔥 It fetches news, calculates stock performance and replies with recommendations. In 1 go.

🧠 What's Happening Under the Hood?

  • LangChain provides a decision engine.
  • The agent looks at your input and decides which tools (API, functions) are needed.
  • GPT acts as the planner and executor, like a mini-CEO.

🧩 Going Further

  • Wrap tool usage around your app’s APIs (calendar, todo, finance)
  • Add memory so your agent remembers user sessions
  • Deploy with serverless + frontend (e.g. on Vercel)

🔒 Bonus Tip: Guardrails FTW

Always validate inputs/outputs, especially if your agents get access to real data. Use schema validators like Zod.

🧠 Conclusion

You don't have to imagine the future — it's already here. AI Agents make any website think for itself. You can build powerful, autonomous micro-apps that solve user problems without manual logic trees.

The fact that this works in under 100 lines blows our minds. And it’s only getting better.

So, ask yourself 🔥

If your app had a mind of its own, what would it do?

Then build it 🧠💥

📚 Resources

Happy agent-building, future-coder 🧠⚙️

⚡️ If you need help building AI-powered agents or smart assistants in your web app — we offer such services!

Top comments (0)