Forem: Umar Muktar

Creating AI Agents with Mastra and Typescript

Umar Muktar — Sat, 01 Nov 2025 18:40:21 +0000

AI, AI Agents, Agentic AI... You can't go a day without coming across at least one of these.

What exactly are they???

In today's blog we'll be looking at AI Agents, what they are, what they do and how to create one.

Let's take them one by one.

AI (Artificial intelligence): AI or Artificial intelligence is the ability of of computer systems to perform tasks that normally require human intelligence, such as learning, problem-solving, decision making and recognizing patterns. You can see how that applies when using chatbots and LLMs like ChatGPT and Gemini.
AI Agents: An AI Agent is a program that combines intelligence with the ability to act. It doesn’t just process information, it can take action using connected tools and systems, often without human intervention.
For example, when you ask a regular AI chatbot to grab an article from some blog for you, it won't be able to do that. That's because these type of AI models only use data from their knowledge base to respond, they can't visit websites or fetch data.
That's where AI Agents come into play they combine their intelligence and some "tools" they can use to make even tasks like checking the weather and planning your trip possible.
Agentic AI: This is the framework or the broad concept of building AI Agents.

With that out of the way, let's see how to build our own AI agent.

We will be building a very simple agent with a focus on understanding how these AI Agents work without all the complexity.

Also to make the process easy and follow a structured approach, we will be using Mastra. Mastra as they brand it is "The TypeScript Agent Framework". It does all the work of connecting agents to tools and other agents without a hitch and ensure a clean workflow.

So, we will be build an AI agent that returns the current time.

As simple as that sounds, LLMs can't do that by themselves.

So let's get into it.

First things first,let's set up our environment using mastra CLI.

npm create mastra@latest

Follow the CLI interface to setup a project, one your done you'll have a starter project, then open it in your favorite Code Editor or IDE.

After that, grab your API key for the model you selected in the setup and add it to a .env file.

It'll have this structure

src/mastra/
├── index.ts              # Main Mastra configuration
├── agents/
│   └── weather-agent.ts     # Example weather agent
'── tools/
   └── weather-tool.ts     # Example weather tool

Now let's ignore the example project and build our own.

Create a time-tool.ts file in the tools/ directory and paste/write this.

import { createTool } from "@mastra/core/tools";
import { z } from "zod";

export const timeTool = createTool({
  id: "get-time",
  description: "Get current time for a location",
  inputSchema: z.object({
    timezone: z.string().describe("Timezone"),
  }),
  outputSchema: z.object({
    output: z.string(),
  }),
  // The actual function that gets the time and returns it
  execute: async ({ context }) => {
    const options = { timeZone: context.timezone, hour: "2-digit", minute: "2-digit", second: "2-digit" };

    const time = new Date().toLocaleTimeString("en-GB", options);


    return {
      output: time,
    };
  },
});

So basically, we're expecting the LLM to send us a javascript format timezone, and then we get the time and return it to the model.

Next, we'll create the Agent.
Create a time-agent.ts file in the agents/ directory and paste/type this snippet:

import { Agent } from "@mastra/core/agent";
import { timeTool } from "../tools/time-tool";

export const timeAgent = new Agent({
  name: "Time Agent",
  instructions: `
      You are a helpful time assistant that provides accurate time for a given timezone.

      Your primary function is to help users get the current time  for specific timezones. When responding:
      - Always ask for a timezone if none is provided
      - If provided with a location, infer its timezone
      - If the location name isn't in English, please translate it
      - If giving a timezone with multiple parts (e.g. "New York, NY"), use the most relevant part (e.g. "New York")
      - Keep responses concise but informative
      - Make sure to pass a javascript format timezone (e.g. Africa/Lagos)

      Use the timeTool to fetch current time data.
`,
  // Replace with your model
  model: "google/gemini-2.5-pro",
  tools: { timeTool },
});

Great, you just created your AI Agent and gave it instruction and how to use a "tool".

A tool is basically a function available to an Agent to get extra context/data.

Now let's let Matra know about out Agent by registering it in the index.ts file.

import { Mastra } from "@mastra/core/mastra";
import { timeAgent } from "./agents/time-agent";

export const mastra = new Mastra({
  agents: { timeAgent },
});

That's literally it. Now Mastra knows about our agent and will provide us with a server and a UI to interact with our Agent via a chat interface.

Open your terminal and run

npm run dev

One the server is started visit http://localhost:4111 in your browser.
You'll see your Time Agent, click on to open the chat page.

Here you can prompt it to get a time for a timezone, eg "What's the time in Nigeria?"

And if you've done everything correctly, you should get a response from the Agent with the current time in the timezone you asked for.

Congrats🎉, you just build a working AI Agent to solve the problem of AI not knowing the current time.

I hope you learnt a thing or two. Now that you know how to build AI Agents, the sky is your limit.

Go build something awesome.

If you enjoyed the blog, drop a follow and check me out on Youtube.

Thanks for reading.

Creating a simple Web Server with Node and ExpressJS

Umar Muktar — Fri, 17 Oct 2025 08:41:37 +0000

Web server, we've all heard of them, but how do they work and how do we create one?

That's the question we're going to answer today.

A Web Server is a piece of software that listens to web requests sent from a client: A browser, script or mobile app. It recieves the request, extract required data, perform some operations and return a response.

That's all web server is, so lets create one.

Our server will be a really simple one with a single endpoint to get our information, a random cat fact and the current timestamp.

Let's get our hand dirty and write some code.\n\nFirst things first, we need to install some stuff to setup our environmen.

After installing these, open up your terminal or command prompt\n\nThe commands i'll be using are linux commands, so please look up their equivalent in you OS

In the terminal create a folder and enter

mkdir server
cd server/

And open it in vscode with

code .

then open the terminal with Ctl + j and run

npm init
touch index.js

Now we have a package.json file and an index.js file,
Install dependencies with

npm i express
npm i --save-dev nodemon

open the package.json file and paste this

{
  "name": "server",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "node index.js",
    "dev": "nodemon index.js"
  },
  "keywords": [],
  "author": "Your name",
  "type": "module",
  "license": "ISC",
  "dependencies": {
    "express": "^5.1.0"
  },
  "devDependencies": {
    "nodemon": "^3.1.10"
  }
}

Great, now we have our scripts in place

create a file for fetching cat data with

touch cats.js

open it and paste

const API_URL = "https://catfact.ninja/fact";

export const getCatFact = async () => {
  try {
    const res = await fetch(API_URL, {
      headers: {
        "Content-Type": "application/json",
      },
    });
    const data = await res.json();

    return { status: "success", data: data.fact };
  } catch (e) {
    return { status: "error", data: "Failed to fetch cat fact" };
  }
};

getCatFact();

This code will handle fetching a random cat fact and handle errors if any

now in our index.js, paste this

import express from "express";
import cors from "cors";
import { getCatFact } from "./cats.js";

const PORT = 3000;

const app = express();

app.use(
  cors({
    origin: ["http://localhost:3000"],
  })
);

app.use("/me", async (req, res) => {
  const currentTimestamp = new Date();

  const catFact = await getCatFact();

  res.status(catFact.status === "success" ? 200 : 500).json({
    status: catFact.status,
    user: {
      email: "ummuktar917@gmail.com",
      name: "Umar Muhammad Muktar",
      stack: "Node/Express",
    },
    timestamp: currentTimestamp,
    fact: catFact.data,
  });
});

app.listen(PORT, () => {
  console.log(`Server running on  http://localhost:${PORT}`);
});

Save all files and in your terminal run

npm run dev

this will run our server on http://localhost:3000

open http://localhost:3000/me in your browser to see the response.

Now let's explain whats going on

the cats.js file sends a request to Catfact to get a random cat fact and return an object with the data and other meta data

the index.js file the imports that function

create the server, and create a route handler at "/me", any requests to /me goes here.
we then create a timestamp with new Date()

grab a random cat fact using our function

then build a response object with our info and status based on the cat fetch status.

And there we have it, we learn how to create a server with nodejs and express, consume external API and build dynamic response objects.

I hope we know all know what a web server is and how to build a simple one.

Follow for more

My Web Development Journey

Umar Muktar — Thu, 12 Jun 2025 21:20:28 +0000

It all started in August 2023, on a fateful day while scrolling through YouTube. I saw a video by Web Dev Simplified titled "Learn React in 40 Minutes."

I had more than 40 minutes of free time, so I clicked on it. That one video changed my life.

NOTE: I ALREADY KNEW HTML, CSS, JAVASCRIPT, AND PYTHON.

I did the usual tutorial follow-along stuff — watched the video, copied him step by step — and by the end of the video, I had a carbon copy of his todo app.

I learnt a lot from that single video — from Virtual DOM to Components to States to Props and so much more.

From past experiences learning other languages and tools, I knew that one project wasn’t enough. So, I deleted everything and started from scratch.

I created my own custom UI using HTML and CSS. Then, using what I learnt from the video, I built all the components from the ground up with no functionality or interactivity.

Next, I used my knowledge of JavaScript plus my newfound understanding of State and Props to add CRUD functionalities to the app.

Just like that, I recreated the entire app myself from scratch using React — the same day I learnt it.

I felt on top of the world. I was so happy that I even created a Git repo and uploaded my codebase to GitHub (something I never did voluntarily).

After that project, I found a repo called 30 Days of React on GitHub and followed along for the next few days. I didn’t have much internet access because of my location at that time, so luckily, I never fell into tutorial hell.

A week later, it was time to build a new project to further enhance my knowledge. I’m an anime/movie lover, so I thought, why not build a movie/anime discovery app?

That led to my next project: Movie Sure.

I built the UI in HTML and CSS, then built the components in React. I already knew how to use APIs in Python, so it wasn’t that hard to implement. Even though the code was messy, it still worked.

Everything was going smoothly until I had to synchronize the search component (which was in the header) with the movie cards (which were in the main components).

As a beginner, I knew nothing about state managers or the Context API, so I did the most beginner thing to do — prop drilling.

I drilled props everywhere I needed data and everything got messy. But at long last, the app was completed — and it works. It still works today… I think.

I was the proudest man on earth. I felt like I could build anything. I was so happy and proud of my newfound skill.

I kept building projects and eventually… I made my first money from programming.

More on that in the next episode — this is getting a bit too long.

Follow me to get notified when the next episode drops.

A huge shoutout to my brother Abubakar Muhammad Muktar for encouraging me and always supporting me. No matter how bad my app looked, he always complimented it and pointed out issues in a calm way.

I love you, bro.

I’ll be making a video version and doing a code review on all the projects on my YouTube channel: https://youtube.com/@ucodes880

Subscribe to get notified when it drops.

Links to my projects and GitHub:

Portfolio: https://ucodes.vercel.app

GitHub: https://github.com/python-fuse/

YouTube: https://www.youtube.com/@ucodes880

Project 1: https://github.com/python-fuse/react_todo_app

Project 2: https://movie-sure.vercel.app

React vs. Next.js: A Detailed Comparison

Umar Muktar — Mon, 01 Jul 2024 08:43:48 +0000

Introduction

In the world of frontend development, React and Next.js are two powerful tools that have gained significant traction. React, a JavaScript library for building user interfaces, has been a go-to choice for developers due to its component-based architecture and flexibility. Next.js, on the other hand, is a React framework that offers additional features for server-side rendering and static site generation. In this article, we'll dive deep into the differences between React and Next.js, exploring their features, use cases, and what makes each of them shine.

React: The Library for Building User Interfaces

Overview:
React is a JavaScript library developed by Facebook, designed for building dynamic user interfaces. Its component-based architecture allows developers to build reusable UI components, making code easier to manage and scale.

Key Features:

Component-Based Architecture: React's components are self-contained, reusable pieces of UI that can be composed to build complex applications.
Virtual DOM: React uses a virtual DOM to efficiently update and render only the components that change, improving performance.
Unidirectional Data Flow: React's data flow is one-way, making it easier to understand and debug applications.
Hooks: React Hooks allow developers to use state and other React features without writing classes, making functional components more powerful.

Why Choose React:

Flexibility: React can be used to build both simple and complex applications. Its flexibility allows developers to integrate with other libraries and frameworks.
Community and Ecosystem: React has a large and active community, with a rich ecosystem of libraries, tools, and resources.
Performance: The virtual DOM and efficient re-rendering contribute to React's performance, making it suitable for high-performance applications.

Next.js: The React Framework for Production

Overview:
Next.js is a React framework developed by Vercel that provides additional features for building production-ready applications. It offers server-side rendering (SSR), static site generation (SSG), Incremental Static Regeneration(ISR) and other optimizations out of the box.

Key Features:

Server-Side Rendering (SSR): Next.js can pre-render pages on the server, improving SEO and initial load times.
Static Site Generation (SSG): Next.js can generate static HTML pages at build time, which can be served quickly and efficiently.
Incremental Static Regeneration(ISR): Next.Js allows you to create or update static pages after you’ve built your site. Incremental Static Regeneration (ISR) enables you to use static-generation on a per-page basis, without needing to rebuild the entire site. With ISR, you can retain the benefits of static while scaling to millions of pages.
API Routes: Next.js allows developers to create API endpoints directly within the application, simplifying backend integration.
Automatic Code Splitting: Next.js automatically splits code to ensure faster page loads and better performance.
File-Based Routing: Next.js uses a file-based routing system, making it easy to create routes by simply adding files to the pages directory.

Why Choose Next.js:

Performance and SEO: SSR and SSG improve performance and SEO, making Next.js ideal for web applications that require fast load times and search engine visibility.
Developer Experience: Next.js offers a great developer experience with built-in features like API routes, automatic code splitting, and file-based routing.
Scalability: Next.js is designed to scale with your application, providing features that help manage growing projects.

React vs. Next.js: A Side-by-Side Comparison

Feature	React	Next.js
Architecture	Library	Framework
Rendering	Client-Side Rendering (CSR)	Server-Side Rendering (SSR), Static Site Generation (SSG)
Routing	Custom (using React Router or similar)	File-Based Routing
SEO	Requires additional configuration	Built-in support with SSR and SSG
Performance	Efficient with virtual DOM	Enhanced with SSR, SSG, and automatic code splitting
Deployment	Custom setup	Simplified with Vercel, easy deployment options

Use Cases and When to Choose Each

When to Choose React:

Building highly interactive user interfaces.
Developing applications where client-side rendering is sufficient.
Needing maximum flexibility in choosing libraries and tools.

When to Choose Next.js:

Building SEO-friendly websites with fast load times.
Needing server-side rendering or static site generation out of the box.
Simplifying deployment and scaling with built-in features and optimizations.

Conclusion

Both React and Next.js are powerful tools for building modern web applications. React offers unparalleled flexibility and a strong community, making it a great choice for a wide range of projects. Next.js, as a framework built on top of React, adds valuable features for server-side rendering, static site generation, and more, making it ideal for production-ready applications with a focus on performance and SEO.

Choosing between React and Next.js ultimately depends on your project requirements and goals. If you need a flexible, customizable solution, React is a solid choice. If you're looking for out-of-the-box optimizations and features that simplify development and deployment, Next.js is the way to go.

For more insights and resources, check out my previous articles and stay tuned for more in-depth comparisons and tutorials!

Umar Muktar.

Exploring Frontend Technologies: Svelte vs. SolidJS

Umar Muktar — Fri, 28 Jun 2024 23:56:52 +0000

As a web developer, you're likely familiar with the popular frontend frameworks and libraries like React, Angular, and Vue. However, today I want to introduce you to two lesser-known but equally exciting technologies: Svelte and SolidJS. Both are modern frontend tools that offer unique approaches to building user interfaces, and each has its own strengths and weaknesses. In this article, we'll dive into what makes Svelte and SolidJS stand out and why you might consider using them in your next project.

Svelte: The Compiler Framework

Overview:
Svelte is a relatively new frontend framework that takes a different approach compared to traditional frameworks. Instead of doing most of the work in the browser, Svelte shifts that work to compile time. This means that your Svelte components are converted into highly efficient imperative code that updates the DOM when the state of your app changes.

Key Features:

No Virtual DOM: Svelte does away with the virtual DOM, which reduces the overhead associated with diffing and patching. This can result in better performance.
Reactivity: Svelte's reactivity model is simple and intuitive. It uses assignments to trigger updates, which can make your code easier to understand and maintain.
Ease of Use: Svelte offers a more straightforward syntax that can be more approachable for beginners and can reduce the amount of boilerplate code.

Why Choose Svelte:

Performance: Because it compiles your code to highly efficient JavaScript, Svelte apps can be incredibly fast.
Simplicity: The reactivity model and lack of a virtual DOM make Svelte code cleaner and easier to follow.
Small Bundle Sizes: Svelte's compilation step can result in smaller bundle sizes, which is great for performance.

SolidJS: The Reactive Framework

Overview:
SolidJS is another innovative frontend library that emphasizes fine-grained reactivity and high performance. Like Svelte, SolidJS does not use a virtual DOM, but it achieves reactivity in a different way.

Key Features:

Fine-Grained Reactivity: SolidJS tracks dependencies at a very granular level, which allows it to update the DOM with minimal re-renders.
JSX Support: SolidJS uses JSX for its templating, making it familiar to developers who have worked with React.
Small and Fast: SolidJS is designed to be lightweight and fast, often resulting in smaller bundle sizes and quicker performance than many other frameworks.

Why Choose SolidJS:

Performance: The fine-grained reactivity model can lead to highly optimized updates and efficient performance.
React Compatibility: If you're coming from a React background, the JSX syntax will feel familiar, making the transition easier.
Flexibility: SolidJS offers a flexible approach to building components, allowing developers to write highly optimized and readable code.

ReactJS in HNG: My Journey

As part of the HNG Internship program, I'm diving deep into ReactJS, a library that's already a staple in the frontend development world. React's component-based architecture and extensive ecosystem make it a powerful tool for building complex, interactive web applications. At HNG, I'm excited to leverage React to create scalable and maintainable applications while learning best practices from industry experts.

My journey with HNG has been quite eventful. During my first attempt, my PC broke down, which unfortunately led to my disqualification. It was a challenging time, but I didn't give up. Now, I'm back, more determined than ever to complete the program and excel in React development. You can check out one of my projects from that time at movie-sure.vercel.app.

What makes React special in my journey is its versatility and the strong community support. Whether it's state management with hooks or performance optimizations, React offers solutions that are both elegant and efficient. Through HNG, I aim to master these aspects and contribute to innovative projects.

If you're interested in learning more about the HNG Internship program, check out their internship page and the hire page.

I hope you find this comparison of Svelte and SolidJS interesting and informative. Each of these technologies has its own unique strengths, and depending on your project requirements, one might be a better fit than the other. As for me, I'm thrilled to be honing my React skills at HNG and can't wait to see where this journey takes me!