Vibe Coding is becoming a popular human-computer collaboration mode for programmers. Today's coders are more or less using various AI editors, whether it is Cursor, Windsurf or Trae. If you haven't started downloading these clients, you must have tried Vscode plug-ins such as Github Copilot.

When talking to AI, I found myself frequently switching AI models (like the sudden release of Gemini) and clients (Cursor, Windsurf, and back to Cursor!).

What annoys me most is the loss of context. I have to keep explaining to the AI ​​what it needs to know about my problem and have it do things “according to me”.

But what if these contexts were portable? What if you could ask a question in Claude Desktop, get an answer, and then later call up that conversation while coding in Cursor?

In this article, we will build such a tool in a few simple steps.

Why should you care about MCP?

If you already know MCP well and want to jump right into building it, then skip to the "Quick Start" section. Otherwise, get your stopwatch ready, here's a 3-minute introduction.

1. Why does MCP exist?

If you want autonomous AI agents, you need tools that allow them to perceive and interact with the world around them. Unfortunately, connecting AI assistants directly to tools often results in poor integration; once the AI ​​model or the API on either side of the tool is updated, the code breaks.

So how do we build more powerful, reusable AI capabilities?

One such avenue is through Anthropic’s Model Context Protocol (MCP), a standardized communication layer based on JSON-RPC that enables AI clients (such as Cursor) to discover and use external functionality provided by MCP servers.

These capabilities include accessing persistent data (resources), performing various operations in the external world (tools), and receiving specific instructions on how to use these resources and tools (hints).

2. Why use MCP server?

Clients like Cursor and Windsurf already have excellent AI agents even without MCP. So why do we need more tools?

Simply put, client developers can't build all the features. They don't want to spend all their development time tweaking web search for every new model, and they certainly don't want to build their own Jira integration.

MCP enables service providers like GitHub and Notion to maintain their own AI integrations, which means higher-quality interactions and less duplication of work.

So, when you choose to use an MCP server, the main benefits you gain are future-proofing and portability. You will have a large ecosystem of plug-and-play tools that can be used in any chat window that supports the standard.

3. Why should you build your own MCP server?

Even if you are not the kind of developer who needs to connect your service API to MCP, there are many benefits to mastering the relevant knowledge.

For me, I find that the more time I spend setting up servers, the less it feels like my job is just copying and pasting long blocks of text between input boxes. I’m implementing contextual automation, which makes the AI ​​model more useful to me personally.

Additionally, this feels like a way to stay grounded in the ever-changing AI landscape. Even as new models, clients, and services emerge in the future, the tools I build now should continue to work.

Enough of the small talk, it's time to get started. Below we will use the css mcp server as an example:

Quick Start: Make the code move?

We prepare the codebase in three steps. Don't worry about API keys or client setup for now.

1. 1.  Clone the code repository : Download the sample code ( https://github.com/3mdistal/css-mcp-server ) to your local computer.
2. 2.  Install dependencies : We need the MCP Software Development Kit (SDK) and some other libraries.
3. 3.  Build code : compile TypeScript source code into runnable JavaScript code. Now, the compiled code is in the build/directory.
   

Running your first Mcp Server

Core execution logic (src/index.ts)

Open the main server file src/index.ts and you will see the following key sections:

1. 1.  Import core dependencies  : Import McpServer (core server class) and StdioServerTransport (for communication) from @modelcontextprotocol/sdk.

import  {  McpServer  }  from "@modelcontextprotocol/sdk/server/mcp.js" ; 
import  {  StdioServerTransport  }  from "@modelcontextprotocol/sdk/server/stdio.js" ; 

1. 2.  Import registration dependencies : Import registerPrompts, registerResources, and registerTools from other files in the src/ directory. We will explore these functions in depth later, and they are responsible for telling the server what specific functions we want to give it.

import  { registerPrompts }  from "./prompts/index.js" ; 
import  { registerResources }  from "./resources/index.js" ; 
import  { registerTools }  from "./tools/index.js" ; 

1. 3.  Server instantiation : Create a server instance, set the server's name and version, and initialize empty placeholders for its functions.

export const  server =  new McpServer ({  
    name :  "css-tutor" ,  // Unique name for this server
    version :  "0.0.1" ,  // Server version
    // Declare the types of capabilities the server will offer
    capabilities : {
        prompts : {},   // Will be populated by registerPrompts
        resources : {}, // Will be populated by registerResources
        tools : {},     // Will be populated by registerTools
    }
});

1. 4.  Call registration functions : Call the imported register* functions, which populate the server instance with the actual tools, resources and prompts defined elsewhere.

registerPrompts ();
registerResources ();
registerTools ();

1. 5.  main function : This asynchronous function sets up the communication transport and connects to the server.

async function main (  ):  Promise < void > {
    // Use StdioServerTransport to communicate over standard input/output
    // This is common for MCP servers launched as child processes by clients.
    const  transport =  new StdioServerTransport (); 
    // Connect the server logic to the transport layer
    await  server. connect (transport);
}

1. 6.  Execution : Finally, main() is called and basic error handling is performed.

main () .catch ( ( error :  Error ) =>  {
    console . error ( "Server startup failed:" , error);  // Log errors to stderr
    process. exit ( 1 );
});

This structure is the core of the server, which completes initialization, registration functions, and establishes communication connections.

Create a minimal server, temporarily modify the version (for testing)

To ensure that this core loop works properly without any external API or complex logic, we temporarily modify src/index.ts:

1. 1. Comment out the function registration call.
2. 2. Add a simple “hello” function before the main function definition.
3. 3. Rebuild the code.

After making these changes to src/index.ts, we now have a working MCP server that provides just a basic tool. This tool doesn't do much at the moment, but it proves that the core structure and communication setup works.

Debugging with MCP Inspector

Now we have a minimal and working server, how do we check whether it follows the MCP protocol correctly? We use Anthropic's MCP Inspector.

This command line tool acts like a basic MCP client. It starts your server process, connects to the server via stdio (just like Claude Desktop or Cursor), and displays the JSON-RPC messages being exchanged.

Run the Inspector

npx @modelcontextprotocol/inspector node ./build/index.js

Once the inspector is started and connected to your server, you can interact with it if you visit the URL on localhost:

1. 1.  Connect : You will see the initialize message confirming that the connection was successful.
2. 2.  List the tools : Use the inspector interface to ask the server what tools it provides, you should only see our hello_world tool.
3. 3.  List Resources/Tips : If you try to access the Resources or Tips tabs, they should be unclickable because we commented out their registration.
4. 4.  Invoke the tool : Invoke the hello_world tool using the inspector and you should see the server respond with our custom message.

The MCP Inspector is a great helper during your development process. After you add or modify any functionality (tools, resources, or prompts), use it to verify that the server correctly registered the functionality and the response is as expected. Using the inspector, you can test server functionality without the need for a full AI client.

Remember to use the MCP Inspector no matter which step you take.