DEV Community

Webby Wisp
Webby Wisp

Posted on

Build Your First MCP Server in 5 Minutes (Without the Boilerplate)

#tutorial #mcp #ai #typescript

MCP (Model Context Protocol) is how AI models like Claude connect to external tools and data. It's the reason Claude can read your files, query your database, or run a shell command — when you tell it to.

Building an MCP server is powerful. Setting one up from scratch is tedious.

Let me show you the fast path.

What Is an MCP Server, Actually?

An MCP server exposes capabilities to an AI client (like Claude Desktop) over a standardized protocol. There are three kinds:

  • Tool servers — give AI the ability to do things (run code, make HTTP requests, write files)
  • Resource servers — give AI access to data (files, databases, config)
  • Prompt servers — give AI structured prompts (reusable templates with parameters)

Most people start with tools. You define a function, give it a name and schema, and the AI can call it.

The Boring Part (That We're Skipping)

If you set this up from scratch, here's what you'd do:

  1. npm init
  2. Install @modelcontextprotocol/sdk and zod
  3. Configure TypeScript with the right module settings
  4. Write the server entry point
  5. Wire up the transport
  6. Define your first tool with proper Zod validation
  7. Handle errors correctly
  8. Write a README

45 minutes later, you have a "Hello World" tool that does nothing useful.

The Fast Path 

npx @webbywisp/create-mcp-server my-server
Enter fullscreen mode Exit fullscreen mode

That's it. Pick a template, answer two questions, and you have a full project.

my-server/
├── src/
│   ├── index.ts           # Fully wired server
│   └── tools/
│       ├── readFile.ts    # Real implementation
│       ├── writeFile.ts
│       ├── httpFetch.ts
│       └── execCommand.ts
├── package.json
├── tsconfig.json
└── README.md              # Includes Claude Desktop config
Enter fullscreen mode Exit fullscreen mode

No placeholder code. Everything actually works.

cd my-server
npm install
npm run build
npm start
Enter fullscreen mode Exit fullscreen mode

You now have a running MCP server. Add it to Claude Desktop config and it's live.

Three Templates

Tool Server (most common)

Ships with 4 working tools:

  • read_file — read any file with encoding + size checks
  • write_file — write files, auto-creates directories
  • http_fetch — full HTTP client
  • exec_command — shell commands with safety limits

Add your own tools by copying the pattern. The scaffolding handles the SDK wire-up; you just write the function.

Resource Server

For exposing data. Ships with file://, db://, and config:// providers. URI-based addressing, proper MIME types, binary support.

Prompt Server

8 developer-focused prompts out of the box: code review, security audit, readme generation, debug helper, and more. Each one is parameterized and immediately useful.

Adding Your First Custom Tool

Here's what a tool looks like in this setup:

// src/tools/myTool.ts
import { z } from "zod";

export const myToolSchema = z.object({
  query: z.string().describe("What to search for"),
  limit: z.number().optional().default(10),
});

export async function myTool(
  args: z.infer<typeof myToolSchema>
): Promise<string> {
  // Your logic here
  const results = await someAPI.search(args.query, args.limit);
  return JSON.stringify(results, null, 2);
}
Enter fullscreen mode Exit fullscreen mode

Register it in index.ts:

server.tool("my_tool", "Search for things", myToolSchema.shape, myTool);
Enter fullscreen mode Exit fullscreen mode

That's it. The SDK handles serialization, error propagation, and protocol compliance.

Connecting to Claude Desktop

The generated README includes the exact config snippet. It looks like this:

{
  "mcpServers": {
    "my-server": {
      "command": "node",
      "args": ["/absolute/path/to/my-server/dist/index.js"]
    }
  }
}
Enter fullscreen mode Exit fullscreen mode

Drop that in ~/Library/Application Support/Claude/claude_desktop_config.json (Mac) and restart Claude Desktop. Your tools appear automatically.

Why Bother With MCP?

Because it makes AI genuinely useful for your specific workflow.

Generic AI is good at generic tasks. An AI with access to your internal APIs, your database schema, your codebase — that's a different tool entirely. MCP is the standard way to wire that up.

Once you've built one MCP server, you'll want to build more. The scaffolding just gets in the way.

The tool: npx @webbywisp/create-mcp-server

If you build something with it, I'd love to know what you make.

Top comments (0)