Forem: Neeraj Mishra

AI Agents in Action: ServiceNow

Neeraj Mishra — Wed, 13 Aug 2025 12:48:16 +0000

Content: Building an AI Agent in ServiceNow, to automate the process of assigning the Assignment group in an incident ticket.

You can find the full project details with instructions and the code for AI Agents for each step here.

Beep boop!

In the sprawling universe of ServiceNow—AI has entered the chat.
Today, I’m deploying an algorithmic ally designed to hunt for keywords in ticket descriptions and assign assignment groups with robotic precision (sorry, humans—no reading glasses needed).

AI Agents are great when you want to automate series of tasks or an operation to achieve the results much quickly and efficiently, as opposed to doing all that redundant work on your own. So, it is your ally and not your master.

So let's talk about the how.

We will be taking advantage of ServiceNow's AI Agent Studio to create our agent. The agent will look for keywords in the Short description of an incident ticket, to understand what an issue is and then assign an Assignment group based upon closest matches, and it can greatly improve the time it takes to resolve an incident by speeding up the Incident Creation and Classification step in incident management lifecycle.

We have 2 important steps when we create a functional AI Agent, i.e., defining a Use Case and then attaching AI Agents to it by building it.
So, we will just define our plan in the use case, as to how we are planning to use this, our scenario, and it is to find Assignment Group in this case.

Use Case

Once this is done, we will attach the AI Agents that we have created for this task.
I have created 4 of them as you can see below.

AI Agents

Attaching AI Agents to Use Case

So, this is how we build our agent, now it is time to test it (the fun part!).
This is our incident ticket, please note the Short description field, as this is how the AI Agent will decide what Assignment group to choose.

Testing our Use Case powered by AI Agents

Please note here that our Assignment group field is empty, and this should be automatically populated by the agent.

AI Agent doing its magic.

Output generated

Once we say "Yes" to publish the changes, it will assign the chosen assignment group to the incident.

And that is how the AI Agent works in order to perform series of tasks.

You give the AI Agent the data it needs from your ServiceNow instance, and then inform that agent what to do with that data, thus, it is basically a coordination between you and the AI Agent, to fulfill a task by working together on the platform.

Well, that's all folks! This is how the workflow looks like, to make AI Agents in ServiceNow.
Thank you for your time reading this article.

Cutting the Components: React

Neeraj Mishra — Fri, 08 Aug 2025 15:36:40 +0000

Just like Modularity in OOP (Object Oriented Programming) is an important concept used in dividing or decomposing a program into subsets (loosely coupled modules) so as to make it less complex and perhaps reusing the modules whenever they can be used, in this tutorial, we will take an example to convert a fully written Component of React into couple of modules.

The end result will be, both the non-modularized and the modularized code that will work to conclude the same result.

Requirements
1) Basic React and JS/X introductory knowledge.
2) A CodePen account (It's free to create and use).

So let's start working on it!

Below, we have a non-modularized code, its components are not independent and that is our job to make it so.

function VideoGame(props) {
  return (
    <div id="Title">
      <div id="Genre">
        <div id="Price">
          <img
            id="thumbnail"
            src={props.game.thumbnailUrl}
            alt={props.game.thumbnailText}
          />
          <div id="user-rating">{props.game.rating}</div>
        </div>
      </div>
      <div id="user-comments">{props.game.comments}</div>
      <div id="comment-date">{props.game.date}</div>
    </div>
  );
}

Question - Why do we need to modularize?
To make smaller and single-responsibility pieces because they are easier to reuse and debug, and more importantly, a maintainable chunk of code that you won't be overwhelmed by looking at it, in the near future.

Step 1: Quiz Time!
Extract the natural components that you can think of from the above code.
Once done, you can look at the answer below:
• Thumbnail (image)
• Rating
• Comment text
• Comment date
• Container wrapper (Genre/Price)

Step 2: Extract the natural components.

function Thumbnail({ src, alt }) {
  return <img id="thumbnail" src={src} alt={alt} />;
}

function UserRating({ rating }) {
  return <div id="user-rating">{rating}</div>;
}

function UserComments({ children }) {
  return <div id="user-comments">{children}</div>;
}

function CommentDate({ date }) {
  return <div id="comment-date">{date}</div>;
}

So, each of the component above is independently reusable, such is the benefit of a modular design.

Step 3: Glue them components!
As it is always easy and better to build something piece-by-piece.

function HeaderFrame({ children }) {
  // Keeps the existing layout structure (Title > Genre > Price)
  return (
    <div id="Title">
      <div id="Genre">
        <div id="Price">{children}</div>
      </div>
    </div>
  );
}

function VideoGame(props) {
  const { game } = props;

  return (
    <>
      <HeaderFrame>
        <Thumbnail src={game.thumbnailUrl} alt={game.thumbnailText} />
        <UserRating rating={game.rating} />
      </HeaderFrame>

      <UserComments>{game.comments}</UserComments>

      <CommentDate date={game.date} />
    </>
  );
}

Full code
(You can just copy-paste it into the HTML tab of CodePen):

<html>
  <head>
    <meta charset="utf-8" />
    <title>React Before vs After</title>
    <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <style>
      body { font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial; margin: 20px; }
      .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
      .panel { border: 1px solid #ddd; border-radius: 10px; padding: 12px; }
      h3 { margin: 0 0 8px; font-size: 16px; }
      #Title { border: 1px solid #ccc; padding: 8px; border-radius: 8px; }
      #Genre { border: 1px dashed #bbb; padding: 6px; border-radius: 6px; }
      #Price { border: 1px dotted #aaa; padding: 6px; border-radius: 6px; display: flex; gap: 10px; align-items: center; }
      #thumbnail { width: 120px; height: 80px; object-fit: cover; border-radius: 6px; }
      #user-rating { font-weight: 700; }
      #user-comments { margin-top: 8px; white-space: pre-wrap; }
      #comment-date { margin-top: 6px; color: #666; font-size: 0.9em; }
    </style>
  </head>
  <body>
    <div class="grid">
      <div class="panel">
        <h3>Before (Single Component)</h3>
        <div id="root-before"></div>
      </div>
      <div class="panel">
        <h3>After (Modular Components)</h3>
        <div id="root-after"></div>
      </div>
    </div>

    <script type="text/babel">
      const { createRoot } = ReactDOM;

      const game = {
        thumbnailUrl: "https://via.placeholder.com/120x80?text=Game",
        thumbnailText: "Game thumbnail",
        rating: "★★★★☆",
        comments: "Great gameplay and soundtrack.\nWorth a replay!",
        date: "2023-11-05"
      };

      // A) Before modularization
      function VideoGameBefore(props) {
        const { game } = props;
        return (
          <div id="Title">
            <div id="Genre">
              <div id="Price">
                <img id="thumbnail" src={game.thumbnailUrl} alt={game.thumbnailText} />
                <div id="user-rating">{game.rating}</div>
              </div>
            </div>
            <div id="user-comments">{game.comments}</div>
            <div id="comment-date">{game.date}</div>
          </div>
        );
      }

      // B) After modularization
      function Thumbnail({ src, alt }) {
        return <img id="thumbnail" src={src} alt={alt} />;
      }
      function UserRating({ rating }) {
        return <div id="user-rating">{rating}</div>;
      }
      function UserComments({ children }) {
        return <div id="user-comments">{children}</div>;
      }
      function CommentDate({ date }) {
        return <div id="comment-date">{date}</div>;
      }
      function HeaderFrame({ children }) {
        return (
          <div id="Title">
            <div id="Genre">
              <div id="Price">{children}</div>
            </div>
          </div>
        );
      }
      function VideoGameAfter({ game }) {
        return (
          <>
            <HeaderFrame>
              <Thumbnail src={game.thumbnailUrl} alt={game.thumbnailText} />
              <UserRating rating={game.rating} />
            </HeaderFrame>
            <UserComments>{game.comments}</UserComments>
            <CommentDate date={game.date} />
          </>
        );
      }

      createRoot(document.getElementById("root-before")).render(
        <VideoGameBefore game={game} />
      );

      createRoot(document.getElementById("root-after")).render(
        <VideoGameAfter game={game} />
      );
    </script>
  </body>
</html>

Results

Well, that covers it!
I hope you had a good time and thank you reading for the article.
We tried to understand how modularity can help you being more efficient by working iteratively, with feedback as you go!

S e r v i c e N o w: Oversimplification

Neeraj Mishra — Tue, 05 Aug 2025 08:55:19 +0000

Tables Records Fields |

No no, there isn't an embed error in this article, I'm just trying to give an abstract depiction of how I see ServiceNow, fundamentally (and it probably is this way).
Everything is an object, within another object, within another... Well, as long as it needs to be.

We can say that a Table is the biggest object there is, or like a container then we have records within it, which are like sub-containers, and finally, even more containers within those sub-containers.

A very simple analogy, now let's take a look from programming perspective.

Suppose we have a table for video games. Then we have all the video game records, each of which contains various records.

const video_game = {
    id: "some 32-character hex string", // very important identifier
    created: "date/time",
    created_by: "someone",
    // and so on...
    video_game_records : [
       {
            id: "i am unique 32-character hex id for identification",
            name: "Prince of Persia: The Warrior Within",
            released: "2004",
            rating: "M",
            // ...
        },
        {
            id: "i am unique 32-character hex id for identification",
            name: "The Witcher 3: Wild Hunt",
            released: "2015",
            rating: "18+",
            // ...
        },
        // ...
    ]
};

See?
The various key-value pairs within video_game_records and video_game_records sits within video_games.
Nested objects.

And if we try to visualize how this would look in ServiceNow, well, no need to visualize, as here are the visuals:

The key-value pairs (id, name, released, rating) function as Field on a web-page; together, they make up a Record and all of these are stored in a Table.
And, we can have many such tables—for books, movies, toys, electronics—and we have ways to reference them from one table to another.
However, modifying records in another table is protected: you would need additional permissions to do so.

I hope this helps you simplify your understanding.
And what we learn from all this? Well, it is that how something—though it may appear grand in scope—is fundamentally based on these simple concepts.

Node(JS) + QuickChart = Plotting Graphs.

Neeraj Mishra — Mon, 31 Oct 2022 16:40:25 +0000

Hello Pumpkins and Munchkins!

Halloween's today and so my post. Both are totally coincident by accident.

So, this is a beginner level tutorial where we will build something sweet using QuickChart.

This is how the final product will look like:

Let's get started, shall we?!

Note: I am using Hyper terminal for the execution of the commands and I am hoping that you have the latest version of Node.js installed as well as npm.

I think it is a good idea to make this project in steps so I will be doing just that!

Setting up steps.

Choose whatever location you want and create a folder there of your choice. For example: mkdir QChartIO. "QChartIO" is the name I gave, you could give any.
Now we will create some files. You could do it manually or using the console/terminal. In Hyper terminal it looks like this: touch index.html app.js This will create 2 files.
Now we will initialize "npm" and install the packages which are useful for the project we are building. We do that by running the following command on console/terminal. npm init - Now you will have to enter some details about the project you are making, if you don't know what to fill then just press enter. A shortcut to automatically fill in the details: npm init -y.
npm install express --save - Install Express(JS) package (you can omit the "--save" parameter). This is a framework for creating the web application, which is just what we want. If you wanna learn more, here's the link.
npm install body-parser --save - Install bodyParser package. We will use this to get contents from the HTML file in the JavaScript file.
npm install https --save - We will use this to get status codes, for error handling.

Terrific job! You deserve fake Dracula teeth coming this far! Just don't bask in the sun after that.
Now we will work on writing the codes! Program! Whatever you wanna call it.

Open app.js file and include all the packages we installed. Would look like this:

const express = require("express");
const app = express();
const bodyParser = require("body-parser");
const https = require("https");

Set up the body-parser like this:
app.use(bodyParser.urlencoded({extended: true}));
For more information on body-parser, you can check this.

Now open index.html file and write the following code. If you want, you can make your own without looking one below for more challenge and better understanding. Just remember what you need.
A with "post" method, target as "_blank" (opens link in new tab).
3 data input fields, 1 is a dropdown.
Dropdown one contains the chart types which you can find at: , the other 2 are just data and labels, you can put whatever there for testing. Now, that's how I made it:

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>QuickChart.io</title>
  </head>
  <body>
    <form action="/" method="post" target="_blank">
      <h2><label>Input defined values: </label></h2>
      <h4>Type (bar, pie...)</h4>
      <select name="type" id="type_chart">
        <option value="bar">Bar</option>
        <option value="line">Line</option>
        <option value="radar">Radar</option>
        <option value="pie">Pie</option>
        <option value="doughnut">Doughnut</option>
        <option value="polarArea">Polar</option>
        <option value="scatter">Scatter</option>
        <option value="bubble">Bubble</option>
        <option value="radialGauge">Radial Gauge</option>
        <option value="violin">Box and Violin</option>
        <option value="sparkline">Sparklines</option>
        <option value="progressBar">Progress Bar</option>
      </select>
      <h4>Data (to create the chart of)</h4>
      <input id="data_chart" type="text" name="data">
      <h4>Labels (x-axis)</h4>
      <input id="labels_chart" type="text" name="labels">
      <br> <br>
      <button type="submit">Go</button>
      <button type="reset">Reset</button>
    </form>
  </body>
</html>

Now we will send this HTML file as GET request like so:

app.get("/", function(req, res){
    res.sendFile(__dirname + "/index.html");
})

Now we will take the values the user gave from the HTML form to the variables that we will declare in app.js file.

app.post("/", function(req, res){
    var js_type = req.body.type;
    var js_data = req.body.data;
    var js_labels = req.body.labels;
    console.log(js_type);
    console.log(js_data);
    console.log(js_labels);

    const url = "https://quickchart.io/chart?c={type:'" + js_type + "',data:{labels:[" + js_labels + "],datasets:[{label:'Users',data:[" + js_data +"]}]}}"

    https.get(url, function(response){
        console.log(response.statusCode);
    })

    res.redirect(url);
})

With the help of body-parser package, we can make us of this line as you can see in above code: var js_type = req.body.type (type here means the type of chart we want to get made, i.e., Bar, Line, Radar, Pie etc.).
But how we are getting the data from HTML input form to the Javascript file app.js? Look at the HTML code, find "type". Okay okay, I will help you in doing that. It is here:
<select name="type" id="type_chart">
So, with this name="type" field, we are taking this data from this HTML to app.js file using body-parser.
See, in app.js file, we have var js_type = req.body.type, this type thing varies according to the data that we are trying to get from HTML input from user. In short, after the dot in req.body., just put the value that you have given to name="..." field in HTML.

Note: The QuickChart plots chart when we give them the data in the form of URL, so we will just take all the data the user input in the form, and put that in the URL and send that response to QuickChart.

More information can be found here.

The https package is used to receive the statusCode here, so if you get code 200, that means the request is successful and you will get a sweet response back. If it is other than 200-299, oh well, we are in trouble.
Find more information about these codes here.

Alright, the final step is just to redirect the browser to the URL that we just created according to the QuickChart specifications (remember that in HTML file, we put target as "_blank", this will open the URL in new tab).
When we will do that, we will find the response and a beautiful chart rendered in our webpage!

Awesome! Take your treats now: 🍪🍭🍫

What times, to get treats we have to do so much of work. 😐

You can find the full project here.

Was it easy? Or nah?

Let me know what could have made it easier to understand and better to read (except the jokes I made).

I will check it for errors/mistakes as well.

🎃 Happy Halloween! 🎃

GitDesc: Extract ReadMe from GitHub

Neeraj Mishra — Tue, 02 Mar 2021 15:49:57 +0000

Hello there!

Welcome to my first post and my first ever tutorial.

I started learning web development last year, just HTML and CSS. Started learning again last month and I thought I'd learn best by writing about it as I learn and I am fairly new to this.

We will be making a website to extract the description from GitHub repositories, all we need is the link to the repository.

Note: I am using Hyper terminal for the execution of the commands and I am hoping that you have the latest version of Node.js installed as well as npm. You could use any other terminal, or even do things manually if you're such a masochist. XD
Alright now, let's get to work!

Make a directory or folder anywhere you like and name it anything you like. For more user-friendliness I'd be using the name: GitDesc.
To create the folder, use command: mkdir GitDesc
After you have done so, change your current directory to the GitDesc directory by using command: cd GitDesc.
Now it's time to initialize npm and install the required packages for our project. So go to the terminal and run the following commands to initialize and install packages.

npm init
You will be asked some details to fill about the project you
are creating. If you don't want to fill anything, you can just
press enter until it stops asking.
Or there is another shortcut to automatically fill in the
details using command npm init -y.
npm install express --save
This is a framework for creating the web application, which is
just what we want. If you wanna learn more, here's the link: Express.
npm install body-parser --save
We will make a HTML file for the user to put the link of
certain GitHub repository and this link would be transferred
to the server-side JavaScript using this package.
After that, we will make a connection request from that link
to GitHub and the required ReadMe content will be extracted.
npm install cheerio --save
With its help, we will narrow down our required data into
text. This is an API used for Web Scraping and that's what
we are doing here too.
npm install request --save
This is required in order to make HTTP request to the website.

You can omit the use of `--save`

Now we will create two files, HTML file for the user-interface and a JavaScript file which would be responsible for the server-side scripting.
touch command is used to make files and the name we will use are, "index" and "app".
So do the following,
touch index.html
touch app.js
Open the project in code editor. I am using Atom and to open the project in atom via the command-line, we use command: atom . in the working directory. This will open up Atom with the project we are currently working on.
Open app.js file.
First, we will have to import all the packages that we have installed so far.

const cheerio = require('cheerio');
const request = require('request');
const express = require('express');
const bodyParser = require('body-parser');

Create a new app and set-up the body-parser.

const app = express();

app.use(bodyParser.urlencoded({extended: true}));

For more information on body-parser, you can check this

Now as everything has been set-up and initialized, we can finally get down to the meat. But before that, we should think about how the interface is going to be.

1. There will be a simple HTML page with an input box and a submit button.

2. After pressing the button, the results will be displayed in the page.
Now we will send the whole HTML file as the GET request.

app.get("/", function(req, res)
{
  res.sendFile(__dirname + "/index.html");
})

Below we are going to post the information we have received from GitHub to the webpage using POST.

app.post("/", function(req, res)
{
  // This is the URL we have received from the HTML file.
  const url = req.body.githubLink;

  // This is HTTP request to the website.
  // response is received from the website.
  // html contains the website's html.
  request(url, function(error, response, html)
  {
    // This command will load the HTML of the
    // repository and store it in a constant.
    const $ = cheerio.load(html);

    // This is the class under which the GitHub's ReadMe
    // information is put, we are going to extract that
    // information and will store it in a constant.
    const body = $('.markdown-body');
    res.write("<h3>" + "Description" + "</h3>");

    // To extract just the text from the body,
    // we are using body.text().
    res.write("<textArea cols=\"90\" rows = \"30\">" + body.text() + "</textArea>");
    res.send();
  })
})

To start the server, we will do the following:

// You can use any port number you like.
// Most common is 3000.
app.listen(666, function()
{
    console.log("Server started...");
})

Now for the final step, open up index.html and add the following lines within the <body> tag:

<form action="/" method="post">
  <input type="link" name="gitHubLink" placeholder="Enter link here...">
  <button type="submit" name="submit">Submit</button>
</form>

Run the web application we have just made after starting the server by typing node app.js in the terminal.
You'll see a log as, "Server started..." which means, the server is listening at port you have specified and there are no errors.
Open your web browser and type in localhost:666/, don't forget to change the port number with the one you have specified.
Copy the repository link from GitHub, paste it into the input box and Voila! You have made a web app which scrapes information about whatever is written in the ReadMe by the developer.

Forem: Neeraj Mishra

AI Agents in Action: ServiceNow

Beep boop!

So let's talk about the how.

Use Case

AI Agents

Attaching AI Agents to Use Case

Testing our Use Case powered by AI Agents

Output generated

Cutting the Components: React

S e r v i c e N o w: Oversimplification

Node(JS) + QuickChart = Plotting Graphs.

Hello Pumpkins and Munchkins!

Halloween's today and so my post. Both are totally coincident by accident.

So, this is a beginner level tutorial where we will build something sweet using QuickChart.

Note: The QuickChart plots chart when we give them the data in the form of URL, so we will just take all the data the user input in the form, and put that in the URL and send that response to QuickChart.

Awesome! Take your treats now: 🍪🍭🍫

What times, to get treats we have to do so much of work. 😐

Was it easy? Or nah?

Let me know what could have made it easier to understand and better to read (except the jokes I made).

I will check it for errors/mistakes as well.

🎃 Happy Halloween! 🎃

GitDesc: Extract ReadMe from GitHub

Hello there!

Welcome to my first post and my first ever tutorial.

I started learning web development last year, just HTML and CSS. Started learning again last month and I thought I'd learn best by writing about it as I learn and I am fairly new to this.

We will be making a website to extract the description from GitHub repositories, all we need is the link to the repository.

You can omit the use of `--save`

1. There will be a simple HTML page with an input box and a submit button.

2. After pressing the button, the results will be displayed in the page.

The link for the project on GitHub is here.

I really hope it was not very hard to follow.

Suggestions to improve are always welcome :)

Forem: Neeraj Mishra

AI Agents in Action: ServiceNow

Beep boop!

So let's talk about the how.

Use Case

AI Agents

Attaching AI Agents to Use Case

Testing our Use Case powered by AI Agents

Output generated

Cutting the Components: React

S e r v i c e N o w: Oversimplification

Node(JS) + QuickChart = Plotting Graphs.

Hello Pumpkins and Munchkins!

Halloween's today and so my post. Both are totally coincident by accident.

So, this is a beginner level tutorial where we will build something sweet using QuickChart.

Note: The QuickChart plots chart when we give them the data in the form of URL, so we will just take all the data the user input in the form, and put that in the URL and send that response to QuickChart.

Awesome! Take your treats now: 🍪🍭🍫

What times, to get treats we have to do so much of work. 😐

Was it easy? Or nah?

Let me know what could have made it easier to understand and better to read (except the jokes I made).

I will check it for errors/mistakes as well.

🎃 Happy Halloween! 🎃

GitDesc: Extract ReadMe from GitHub

Hello there!

Welcome to my first post and my first ever tutorial.

I started learning web development last year, just HTML and CSS. Started learning again last month and I thought I'd learn best by writing about it as I learn and I am fairly new to this.

We will be making a website to extract the description from GitHub repositories, all we need is the link to the repository.

You can omit the use of --save

1. There will be a simple HTML page with an input box and a submit button.

2. After pressing the button, the results will be displayed in the page.

The link for the project on GitHub is here.

I really hope it was not very hard to follow.

Suggestions to improve are always welcome :)

You can omit the use of `--save`