DEV Community

Cover image for 🧠🥷How to make MCP (Cline and Cursor)
Web Developer Hyper
Web Developer Hyper

Posted on

2

🧠🥷How to make MCP (Cline and Cursor)

#ai #vscode #chatgpt #webdev

Intro

Hello! I'm a Ninja Web Developer. Hi-Yah!🥷
Recently, I have been enjoying MCP.
🧠🥷How to use MCP in Cline and Cursor
🧠🥷How to use MCP in Cline and Cursor 2 (use under Proxy)
🧠🤖AI coding agent 1 (Cline + Cursor)
This time, I will focus on how to make our own MCP server from scratch.
I hope this post will help you, since I wasted much time struggling how to make my own MCP.🤮
Let's start.🚀

How to make MCP (Step by step)

I will explain how to make an Excel MCP server using Typescript for example.
I made it by Cline, and checked it works both in Cline and Cursor.
1️⃣ Make a folder for MCP and open it from your editor.
2️⃣ Ask AI to make Excel MCP server from scratch using @modelcontextprotocol/sdk.
For example,

Make a Excel MCP server from scratch using @modelcontextprotocol/sdk. The parameter of it are file_path, sheet, cell, value.
Enter fullscreen mode Exit fullscreen mode

If you don't ask AI to make it from scratch, AI might try to install a MCP server, because there are already Excel MCP that others made.
3️⃣ In my case, AI did the things as follows.
1 Made necessary code and json ↓
index.ts, package.json and tsconfig.json
2 Install the files ↓

npm install
Enter fullscreen mode Exit fullscreen mode

3 Compile index.ts to index.js ↓

npm run build
Enter fullscreen mode Exit fullscreen mode

There might be some bugs when making, but you can ask the AI to debug and proceed.
4️⃣ I was using windows, so rewrote cline_mcp_settings.json for Cline and mcp.json for Cursor.
Rewrite from node to cmd /c node.

{
  "mcpServers": {
    "excel": {
      "command": "cmd",
      "args": ["/c", "node", "path to index.js"]
    }
  }
}
Enter fullscreen mode Exit fullscreen mode

5️⃣ Horray! Now ready for your own MCP.🎉
6️⃣ I will follow up, if I learned more about MCP.

More about how to make MCP

You can learn the outline of MCP SDK from GitHub repository.↓
https://github.com/modelcontextprotocol/typescript-sdk
You can learn all the detail of MCP from the official document.↓
https://modelcontextprotocol.io/introduction

Outro

If you learn how to make your own MCP from scratch, it will surely expand your use range of MCP.
I am looking forward to further progress of MCP in the future.
Thank you for reading.
Happy AI coding!🤖 Hi-Yah!🥷

Top comments (0)