Forem: Jyoti Prakash Pradhan

SSH MCP NPM

Jyoti Prakash Pradhan — Sat, 20 Sep 2025 09:07:40 +0000

Alolite SSH MCP Server

A Model Context Protocol (MCP) server that enables SSH remote command execution on remote machines with persistent connections. This server provides a secure way to connect to remote servers, execute commands, and retrieve output through the MCP protocol while maintaining long-lived SSH sessions for improved performance.

https://www.npmjs.com/package/@alolite/ssh-mcp

VSCode MCP.json settings

{
  "servers": {
    "alolite-ssh-mcp": {
      "command": "npx",
      "args": ["-y", "alolite-ssh-mcp", "@alolite/ssh-mcp"]
    }
  }
}

Simple MCP tool using NodeJS

Jyoti Prakash Pradhan — Tue, 16 Sep 2025 16:57:06 +0000

Creating an MCP server using Node.js is straightforward. You can integrate various third-party tools—such as JIRA, build tools (TeamCity, Jenkins), and many others—using the code provided below. If you prefer not to rely on external MCP servers, you can follow these steps to create and run your own local MCP server, which can then be used with any AI client.

Folder structure

mcp-server
  - .vscode
    - mcp.json
  - src
    - lib
      - tools.ts
    - index.ts
  - .env
  - .npmrc
  - package.json
  - tsconfig.json

File contents

package.json
Contains script for build, dev and other dependancies information

{
  "name": "groww-mcp-server",
  "version": "1.0.0",
  "description": "",
  "main": "src/index.ts",
  "type": "module",
  "bin": {
    "groww_mcp_server": "./build/index.js"
  },
  "scripts": {
    "build": "tsc && chmod 755 build/index.js",
    "build:watch": "tsc --watch",
    "dev": "tsc --watch",
    "start": "node ./build/index.js",
    "clean": "rm -rf build"
  },
  "files": [
    "build"
  ],
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@modelcontextprotocol/sdk": "^1.17.4",
    "@types/node-fetch": "^2.6.13",
    "dotenv": "^17.2.1",
    "node-fetch": "^3.3.2",
    "totp-generator": "^1.0.0",
    "zod": "^3.25.76"
  },
  "devDependencies": {
    "@types/node": "^24.3.0",
    "typescript": "^5.9.2"
  }
}

tsconfig.json
Typescript compiler options

{
  "compilerOptions": {
    "target": "ES2022",
    "module": "nodenext",
    "moduleResolution": "nodenext",
    "outDir": "./build",
    "rootDir": "./src",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "sourceMap": true,
    "declaration": false,
    "incremental": true,
    "tsBuildInfoFile": "./build/.tsbuildinfo"
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "build"],
  "watchOptions": {
    "watchFile": "useFsEvents",
    "watchDirectory": "useFsEvents",
    "fallbackPolling": "dynamicPriority",
    "synchronousWatchDirectory": true,
    "excludeDirectories": ["**/node_modules", "_tmp"]
  }
}

.npmrc

registry=https://registry.npmjs.com/
... other project related node settings like freezing node version

.env

# MCP Server configuration
MCP_HOST=127.0.0.1
MCP_PORT=8000
MCP_DEBUG=true

# Docker configuration
DOCKER_PORT=8000
DOCKER_ENV=production

API_KEY=xxxxxx
...other ENV settings...

src/index.ts
This defines all the tools that a MCP server contains. You can add as many tools you can till you are tired.

import { McpServer } from '@modelcontextprotocol/sdk/server/mcp.js';
import { StdioServerTransport } from '@modelcontextprotocol/sdk/server/stdio.js';
import { z } from 'zod';
import dotenv from 'dotenv';
import { Tools, ToolResponse } from './lib/tools.js';

dotenv.config();

// Create server instance
const server = new McpServer({
  name: 'weather',
  version: '1.0.0',
  capabilities: {
    resources: {},
    tools: {},
  },
});

const tools = new Tools();

server.tool(
  'get-user-margin',
  "get available margin for a user",
  {},
  async () => {
    const response: ToolResponse = await Tools.getAvailableMargin();

    return response;
  }
)

server.tool(
  'get-historical-data',
  "get historical data for stocks",
  {
    exchange: z.string(),
    segment: z.string(),
    trading_symbol: z.string(),
    start_time: z.string(),
    end_time: z.string(),
    interval_in_minutes: z.number().min(1).optional()
  },
  async ({ exchange, segment, trading_symbol, start_time, end_time, interval_in_minutes }) => {
    const response: ToolResponse = await Tools.getHistoricalStockData({
      exchange,
      segment,
      trading_symbol,
      start_time,
      end_time,
      interval_in_minutes
    });

    return response;
  }
)


async function main() {
  const transport = new StdioServerTransport();
  await server.connect(transport);
  console.error("Calculator MCP Server running on stdio");
}

main().catch((error) => {
  console.error("Fatal error in main():", error);
  process.exit(1);
});

src/lib/tools.ts

export interface ToolResponse {
  content: {
    type: string;
    text: string;
  }[];
}

export class Tools {
  private api: Api;

  constructor() {
    const Config = {
      apiKey: process.env.API_KEY,
      apiSecret: process.env.API_SECRET,
    };

    this.api = new Api(Config);

    this.api.authenticate();
  }

  async getAvailableMargin(): Promise<ToolResponse> {
    const margin = await this.api.getAvailableMargin();
    return {
      content: [
        {
          type: 'text',
          text: `Your available margin is ₹${margin}`,
        },
      ],
    };
  }

  async getHistoricalStockData(params: HistoricalDataParams): Promise<ToolResponse> {
    const historicalData = await this.api.getHistoricalStockData(params);
    return {
      content: [
        {
          type: 'text',
          text: `Your historical stock data is: ${JSON.stringify(historicalData)}`,
        },
      ],
    };
  }
}

mcp.json
This is how you can use it in VSCode. Settings for other AI tools are different depending on the tools.

{
  "servers": {
    "mcp-server": {
      "command": "node",
      "args": ["./server/build/index.js"],
      "envFile": "${workspaceFolder}/server/.env"
    }
  }
}

When not to use Effect ?

Jyoti Prakash Pradhan — Tue, 14 Feb 2023 03:45:55 +0000

Updating state based on props or state

When something can be calculated from the existing props or state, don’t put it in state. Instead, calculate it during rendering

function Form() {
  const [firstName, setFirstName] = useState('Taylor');
  const [lastName, setLastName] = useState('Swift');

  // 🔴 Avoid: redundant state and unnecessary Effect
  const [fullName, setFullName] = useState('');
  useEffect(() => {
    setFullName(firstName + ' ' + lastName);
  }, [firstName, lastName]);
  // ...
}

Recommended

function Form() {
  const [firstName, setFirstName] = useState('Taylor');
  const [lastName, setLastName] = useState('Swift');
  // ✅ Good: calculated during rendering
  const fullName = firstName + ' ' + lastName;
  // ...
}

Caching expensive calculations

function TodoList({ todos, filter }) {
  const [newTodo, setNewTodo] = useState('');

  // 🔴 Avoid: redundant state and unnecessary Effect
  const [visibleTodos, setVisibleTodos] = useState([]);
  useEffect(() => {
    setVisibleTodos(getFilteredTodos(todos, filter));
  }, [todos, filter]);

  // ...
}

Recommended

function TodoList({ todos, filter }) {
  const [newTodo, setNewTodo] = useState('');
  // ✅ This is fine if getFilteredTodos() is not slow.
  const visibleTodos = getFilteredTodos(todos, filter);
  // ...
}

Also Recommended

In many cases, the above code is fine! But maybe getFilteredTodos() is slow or you have a lot of todos. In that case you don’t want to recalculate getFilteredTodos() if some unrelated state variable like newTodo has changed.

You can cache (or “memoize”) an expensive calculation by wrapping it in a useMemo Hook:

import { useMemo, useState } from 'react';

function TodoList({ todos, filter }) {
  const [newTodo, setNewTodo] = useState('');
  // ✅ Does not re-run getFilteredTodos() unless todos or filter change
  const visibleTodos = useMemo(() => getFilteredTodos(todos, filter), [todos, filter]);
  // ...
}

Resetting all state when a prop changes

export default function ProfilePage({ userId }) {
  const [comment, setComment] = useState('');

  // 🔴 Avoid: Resetting state on prop change in an Effect
  useEffect(() => {
    setComment('');
  }, [userId]);
  // ...
}

This is inefficient because ProfilePage and its children will first render with the stale value, and then render again. It is also complicated because you’d need to do this in every component that has some state inside ProfilePage. For example, if the comment UI is nested, you’d want to clear out nested comment state too.

Instead, you can tell React that each user’s profile is conceptually a different profile by giving it an explicit key. Split your component in two and pass a key attribute from the outer component to the inner one:

Recommended

export default function ProfilePage({ userId }) {
  return (
    <Profile
      userId={userId}
      key={userId}
    />
  );
}

function Profile({ userId }) {
  // ✅ This and any other state below will reset on key change automatically
  const [comment, setComment] = useState('');
  // ...
}

Sharing logic between event handlers

When you’re not sure whether some code should be in an Effect or in an event handler, ask yourself why this code needs to run. Use Effects only for code that should run because the component was displayed to the user

function ProductPage({ product, addToCart }) {
  // 🔴 Avoid: Event-specific logic inside an Effect
  useEffect(() => {
    if (product.isInCart) {
      showNotification(`Added ${product.name} to the shopping cart!`);
    }
  }, [product]);

  function handleBuyClick() {
    addToCart(product);
  }

  function handleCheckoutClick() {
    addToCart(product);
    navigateTo('/checkout');
  }
  // ...
}

Recommended

function ProductPage({ product, addToCart }) {
  // ✅ Good: Event-specific logic is called from event handlers
  function buyProduct() {
    addToCart(product);
    showNotification(`Added ${product.name} to the shopping cart!`);
  }

  function handleBuyClick() {
    buyProduct();
  }

  function handleCheckoutClick() {
    buyProduct();
    navigateTo('/checkout');
  }
  // ...
}

Sending a POST request

function Form() {
  const [firstName, setFirstName] = useState('');
  const [lastName, setLastName] = useState('');

  // ✅ Good: This logic should run because the component was displayed
  useEffect(() => {
    post('/analytics/event', { eventName: 'visit_form' });
  }, []);

  // 🔴 Avoid: Event-specific logic inside an Effect
  const [jsonToSubmit, setJsonToSubmit] = useState(null);
  useEffect(() => {
    if (jsonToSubmit !== null) {
      post('/api/register', jsonToSubmit);
    }
  }, [jsonToSubmit]);

  function handleSubmit(e) {
    e.preventDefault();
    setJsonToSubmit({ firstName, lastName });
  }
  // ...
}

Recommended

function Form() {
  const [firstName, setFirstName] = useState('');
  const [lastName, setLastName] = useState('');

  // ✅ Good: This logic runs because the component was displayed
  useEffect(() => {
    post('/analytics/event', { eventName: 'visit_form' });
  }, []);

  function handleSubmit(e) {
    e.preventDefault();
    // ✅ Good: Event-specific logic is in the event handler
    post('/api/register', { firstName, lastName });
  }
  // ...
}

Chains of computations

function Game() {
  const [card, setCard] = useState(null);
  const [goldCardCount, setGoldCardCount] = useState(0);
  const [round, setRound] = useState(1);
  const [isGameOver, setIsGameOver] = useState(false);

  // 🔴 Avoid: Chains of Effects that adjust the state solely to trigger each other
  useEffect(() => {
    if (card !== null && card.gold) {
      setGoldCardCount(c => c + 1);
    }
  }, [card]);

  useEffect(() => {
    if (goldCardCount > 3) {
      setRound(r => r + 1)
      setGoldCardCount(0);
    }
  }, [goldCardCount]);

  useEffect(() => {
    if (round > 5) {
      setIsGameOver(true);
    }
  }, [round]);

  useEffect(() => {
    alert('Good game!');
  }, [isGameOver]);

  function handlePlaceCard(nextCard) {
    if (isGameOver) {
      throw Error('Game already ended.');
    } else {
      setCard(nextCard);
    }
  }

  // ...

Recommended

function Game() {
  const [card, setCard] = useState(null);
  const [goldCardCount, setGoldCardCount] = useState(0);
  const [round, setRound] = useState(1);

  // ✅ Calculate what you can during rendering
  const isGameOver = round > 5;

  function handlePlaceCard(nextCard) {
    if (isGameOver) {
      throw Error('Game already ended.');
    }

    // ✅ Calculate all the next state in the event handler
    setCard(nextCard);
    if (nextCard.gold) {
      if (goldCardCount <= 3) {
        setGoldCardCount(goldCardCount + 1);
      } else {
        setGoldCardCount(0);
        setRound(round + 1);
        if (round === 5) {
          alert('Good game!');
        }
      }
    }
  }

  // ...

Initializing the application

function App() {
  // 🔴 Avoid: Effects with logic that should only ever run once
  useEffect(() => {
    loadDataFromLocalStorage();
    checkAuthToken();
  }, []);
  // ...
}

Recommended

let didInit = false;

function App() {
  useEffect(() => {
    if (!didInit) {
      didInit = true;
      // ✅ Only runs once per app load
      loadDataFromLocalStorage();
      checkAuthToken();
    }
  }, []);
  // ...
}

Passing data to the parent

function Parent() {
  const [data, setData] = useState(null);
  // ...
  return <Child onFetched={setData} />;
}

function Child({ onFetched }) {
  const data = useSomeAPI();
  // 🔴 Avoid: Passing data to the parent in an Effect
  useEffect(() => {
    if (data) {
      onFetched(data);
    }
  }, [onFetched, data]);
  // ...
}

Recommended

function Parent() {
  const data = useSomeAPI();
  // ...
  // ✅ Good: Passing data down to the child
  return <Child data={data} />;
}

function Child({ data }) {
  // ...
}

Subscribing to an external store

function useOnlineStatus() {
  // Not ideal: Manual store subscription in an Effect
  const [isOnline, setIsOnline] = useState(true);
  useEffect(() => {
    function updateState() {
      setIsOnline(navigator.onLine);
    }

    updateState();

    window.addEventListener('online', updateState);
    window.addEventListener('offline', updateState);
    return () => {
      window.removeEventListener('online', updateState);
      window.removeEventListener('offline', updateState);
    };
  }, []);
  return isOnline;
}

function ChatIndicator() {
  const isOnline = useOnlineStatus();
  // ...
}

Recommended

Although it’s common to use Effects for this, React has a purpose-built Hook for subscribing to an external store that is preferred instead. Delete the Effect and replace it with a call to useSyncExternalStore:

function subscribe(callback) {
  window.addEventListener('online', callback);
  window.addEventListener('offline', callback);
  return () => {
    window.removeEventListener('online', callback);
    window.removeEventListener('offline', callback);
  };
}

function useOnlineStatus() {
  // ✅ Good: Subscribing to an external store with a built-in Hook
  return useSyncExternalStore(
    subscribe, // React won't resubscribe for as long as you pass the same function
    () => navigator.onLine, // How to get the value on the client
    () => true // How to get the value on the server
  );
}

function ChatIndicator() {
  const isOnline = useOnlineStatus();
  // ...
}

Fetching data

function SearchResults({ query }) {
  const [results, setResults] = useState([]);
  const [page, setPage] = useState(1);

  useEffect(() => {
    // 🔴 Avoid: Fetching without cleanup logic
    fetchResults(query, page).then(json => {
      setResults(json);
    });
  }, [query, page]);

  function handleNextPageClick() {
    setPage(page + 1);
  }
  // ...
}

Recommended

function SearchResults({ query }) {
  const [results, setResults] = useState([]);
  const [page, setPage] = useState(1);
  useEffect(() => {
    let ignore = false;
    fetchResults(query, page).then(json => {
      if (!ignore) {
        setResults(json);
      }
    });
    return () => {
      ignore = true;
    };
  }, [query, page]);

  function handleNextPageClick() {
    setPage(page + 1);
  }
  // ...
}

**Note: Examples are referred from https://beta.reactjs.org/learn/you-might-not-need-an-effect

Script tag integrity attribute

Jyoti Prakash Pradhan — Sat, 25 Jun 2022 12:55:36 +0000

We know that when a website is opened it loads the javascript file in the browser. Most of them are served from CDN servers.

Issue

Suppose one of the CDN server for that website is hacked and the hacker has added some malicious code in one of the JS file, then the client will be at risk of exposing sensitive information to the hacker.

So how to prevent this from happening ?
How browser will know that this JS file is a malicious or tampered one ?

Solution

To address this problem, most of the browsers have started supporting a new attribute in script tag called integrity attribute.

Example:

<script src="main.js" type="text/javascript" integrity="sha265-XU3HpWw3sNnYKqNWosvZyNN7HMyCOJGOrf1t5CLuuBc=" ></>

There are two parts to the integrity attribute, first part is the algorithm (sha256 or sha384 etc.) and second part is the hash generated by the algorithm

integrity="{algorithm}-{hash}"

How to generate this hash ?

Basically this hash is not any random string, it is generated against the JS file. This hash is different for different JS files. The hash for the JS file can be generated by using the command below.

Command:
shasum -b -a 265 main.js | awk '{ print $1 }' | xxd -r -p | base64

The output of this command is appended to the integrity attribute in the script tag. It will generate a new hash every time the JS file is updated.

In real time development we do not have to generate the hash manually. Most of the modern bundlers like webpack or rollup, now a days are supporting generation of hash for JS files and append it to the related script tag.

How does the browser validate ?

When browser is done with downloading the JS file, it uses the same algorithm (sha256 or sha384) to generate the hash for the same file.
Now browser will compare between the hash generated by it and the hash present in the integrity attribute.
If the comparison fails, then browser will not allow that JS file to execute.

This concept can be applied to any rest api, when we want to keep the integrity of the data between server and client.

Upgrade react-script 3.x.x to 4.x.x

Jyoti Prakash Pradhan — Sat, 28 Aug 2021 15:35:14 +0000

Fix to `unexpected token issue`

Issue log

src/components/CommonStyles.tsx
  Line 4:41:  Parsing error: Unexpected token, expected ","

  2 | import { SunsetOrange, rem, xsmall } from 'styled/config';
  3 |
> 4 | export const Error = styled.p<{ noMargin?: boolean }>`
    |                                         ^
  5 |   color: ${SunsetOrange};
  6 |   font-size: ${rem(12)};
  7 |   line-height: 1;

src/components/Graphs/DataTable.tsx
  Line 28:37:  Parsing error: Unexpected token, expected ","

  26 | `;
  27 |
> 28 | const TableCell = styled.th<{ sticky?: boolean }>`
     |                                     ^
  29 |   background: ${White};
  30 |   border-bottom: 1px solid ${Plaster};
  31 |   font-size: 13px;

src/components/Icon/Icon.tsx
  Line 5:25:  Parsing error: Unexpected token, expected ","

  3 |
  4 | const Icon = styled.div<{
> 5 |   width: number | string;
    |                         ^
  6 |   height: number | string;
  7 |   color?: string;
  8 | }>`

Fix

Add this below code to your package.json after upgrading react-script from 3 to 4

"eslintConfig": {
   "extends": [
     "react-app",
     "react-app/jest"
   ]
 },

Javascript inheritance

Jyoti Prakash Pradhan — Sat, 28 Aug 2021 15:33:35 +0000

function Person(name, email, mobile) {
  this.name = name;
  this.email = email;
  this.mobile = mobile;
}

Person.prototype.getFirstName = function () {
  return this.name.split(' ')[0];
}

Person.prototype.getLastName = function () {
  var nameArr = this.name.split(' ');
  return nameArr[nameArr.length - 1];
}


function Student(name, email, mobile, age) {
  /**
   * This inherits all methods and properties from Person 
   * class and assign to this, similar to super in es6
  */ 
  Person.call(this, name, email, mobile);
  this.age = age;
}

We have achieved inheritance, now Student instance will have access to the Persons method. But there is one problem here.
Student will not have access to the prototype methods.

To do that we have to add the following lines of code.

/**
* Assign `Student` prototype with `Person` prototype
* Now `Student` has `Person` class proto methods
*/
Student.prototype = Object.create(Person.prototype);

/**
* Here setting proper constructor name for Student class
*/
Object.defineProperty(Student.prototype, 'constructor',
 {
    value: Student,
    enumerable: false,
    writable: true,
 });

Student.prototype.getAge = function() {
  return this.age;
}

var student = new Student('Jyoti Prakash', 'myemail@example.com', '89xxxxxxxx', '25');

Event Delegation in JS

Jyoti Prakash Pradhan — Tue, 22 Jun 2021 12:52:14 +0000

Event delegation is a concept to handle events in JS in more performant way. It uses the concept of event bubbling to achieve the same. Event capturing concept can also be used but event bubbling is the preferred approach.

Suppose there is list of items, i.e. lis inside an uland clicking on each li some action is expected to occur. So the common approach is to add event listener to each li in the list.

HTML

<ul id='list'>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  ...
</ul>

Without event delegation

const items = document.querySelectorAll('#list li');
const handleClick = () => {
  // do something here ...
};

// listener added to each li
items.forEach(item => {
  item.addEventListener('click', handleClick)
});

In this approach the number of event handlers attached are same as the number of lis present in the list, which will consume more JS memory.
So to solve this issue we can use the Event delegation approach here.

With event delegation

const list = document.querySelector('#list');

const handleClick = (event) => {
  if (event.target.tagName === 'LI') {
    // do something here
  }
};

// listener added to ul
list.addEventListener('click', handleClick);

In the above sample code, only one event handler is being added to the parent ul#list. Now in the handler if the target.tagName is a LI then the required task is performed. Thus the number of handlers are reduced to one, which consumes less JS memory.

For more info about event bubbling

Forem: Jyoti Prakash Pradhan

SSH MCP NPM

Alolite SSH MCP Server

Simple MCP tool using NodeJS

Folder structure

File contents

When not to use Effect ?

Updating state based on props or state

Caching expensive calculations

Resetting all state when a prop changes

Sharing logic between event handlers

Sending a POST request

Chains of computations

Initializing the application

Passing data to the parent

Subscribing to an external store

Fetching data

Script tag integrity attribute

Issue

Solution

How to generate this hash ?

How does the browser validate ?

Upgrade react-script 3.x.x to 4.x.x

Fix to unexpected token issue

Issue log

Fix

Javascript inheritance

Event Delegation in JS

HTML

Without event delegation

With event delegation

Fix to `unexpected token issue`