DEV Community

Cover image for Building an MCP Server in Javascript
Anand Sukumaran
Anand Sukumaran

Posted on

Building an MCP Server in Javascript

#mcp #modelcontextprotocol #javascript #llm

What is MCP?

Model Context Protocol (MCP) is the hottest topic in AI world right now! Because it solves a major limitation of the LLMs. LLMs has limited knowledge based on the data on which it was training. It doesn't have any idea about the changes happened in the world after it's training cut-off.

To solve this problem, we need external tools to give additional information to LLMs. And depending on the judgement of the LLM, it should be able to call these tools whenever required, and the tool will pass the information back to LLM (by calling an external API or so).

And you can consider MCP as the standardised way to build these external tools. The simplest analogy is if your laptop is an LLM, then USB connector the MCP and the different USB drivers you plugin through this connector are the tools (that provides additional information to your laptop)

Building an MCP Server in Javascript

In this article, we will use the @modelcontextprotocol/sdk npm package to build a simple MCP server. This MCP server will have the ability to fetch the latest documentations for any given npm package, so the LLM clients using this MCP server don't have to rely on its outdated information about npm packages.

For example, if you're using Cursor and vibe coding a JS project and you're importing lot of npm packages in your project. But Cursor have no idea how to implement the npm package as per it's latest doc. So it might hallucinate and cause errors, or do some outdated implementation.

But with our MCP server, it can query and get the official README.md file of the npm package from it's official github repository!

Components in our MCP Server

In the MCP server that we're going to build here, we'll have only one tool:

  • get_docs_for_npm_package and the input parameter is packageName.

This tool will fetch the README.md file from it's github repository and return the raw contents of that file!

That's it! A simple, yet useful MCP server!

Let's start building

Install the dependencies

npm i @modelcontextprotocol/sdk zod
Enter fullscreen mode Exit fullscreen mode

Let's create the MCP server object

const server = new McpServer({
    name: "npm-package-docs-mcp",
    version: "1.0.0"
})
Enter fullscreen mode Exit fullscreen mode

Register the tool

We'll register the tool, describe it, specifcy the input schema and also write the callback function.

For describing and validating the input parameter, we should use the zod library.

server.registerTool("get_docs_for_npm_package", {
    title: "Get Docs for NPM Package",
    description: "Get the docs for a npm package",

    inputSchema:{
        packageName: z.string().describe("Name of the npm package")
    }
},
async ({packageName}) => {

    // We should use the official npmjs registry api to get the package details
    const registryResponse = await fetch(`https://registry.npmjs.org/${packageName}/latest`).then(res => res.json() as unknown as {repository: {url: string}});

    // Fetch the repository URL from the response
    const repositoryUrl = registryResponse.repository.url;

    //Format the URL and extract the Github repo URL and the repository path
    const githubUrl = new URL(repositoryUrl.replace("git+", ""));
    const repositoryPath = githubUrl.pathname.substring(1).replace(".git", "");

    //Now, lets get the README.md file content using raw.githubusercontent URL. Here we assume the branch is main
    const readmeUrl = `https://raw.githubusercontent.com/${repositoryPath}/refs/heads/main/README.md`;

    const readmeResponse = await fetch(readmeUrl);
    const readmeContent = await readmeResponse.text();

    //Just return the content of the README.md file as text response. That's it!
    return {
        content: [{ type: "text", text: readmeContent }]
    }

}
)
Enter fullscreen mode Exit fullscreen mode

Done! Our MCP server is ready!

Testing the MCP Server

To test this MCP server, we can either use the @modelcontextprotocol/inspector tool by running

@modelcontextprotocol/inspector npx ts-node src/index.ts
Enter fullscreen mode Exit fullscreen mode

Make sure you've ts-node dependency added to your project and the correct server file path in the argument.

With this inspector tool, you can view the tools in your MCP Server and even test them by providing the input values!

Adding this MCP Server to your Cursor IDE

You can simply add this MCP server to your Cursor IDE (or any MCP Client), with this configuration

{
  "mcpServers": {
    "npm-package-docs-mcp": {
      "command": "npx ts-node /full-path-to-your-mcp-server/src/index.ts",
      "env": {},
      "args": []
    }
  }
}
Enter fullscreen mode Exit fullscreen mode

Video Tutorial

You can watch the video tutorial on creating an MCP server in Javascript here - https://www.youtube.com/watch?v=H4Odxtncxrk

Source code

The source code for the fully functional MCP server that fetches npm package docs is available here - https://github.com/meanands/npm-package-docs-mcp

Top comments (0)