DEV Community

Webby Wisp
Webby Wisp

Posted on

Build an MCP Server in 10 Minutes (No Boilerplate)

#typescript #ai #programming #webdev

MCP (Model Context Protocol) servers are having a moment. Every major AI tool is adding support. And building one is surprisingly fast.

Here's how to go from zero to a working MCP server in under 10 minutes.

What You're Building

An MCP server is a lightweight service that exposes tools, resources, or prompts to AI models. Instead of the AI guessing how to do something, you give it explicit, typed interfaces.

Example: instead of an AI trying to figure out how to read files, you give it a read_file tool with a defined schema. Reliable, auditable, composable.

The Fast Path 

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

Interactive wizard. Asks you three questions. Generates a complete TypeScript MCP server.

Three templates to choose from:

tool-server — exposes callable functions:

server.tool("read_file", { path: z.string() }, async ({ path }) => {
  const content = await fs.readFile(path, "utf-8");
  return { content: [{ type: "text", text: content }] };
});
Enter fullscreen mode Exit fullscreen mode

resource-server — exposes addressable data:

server.resource("config://app", "Application config", async (uri) => {
  return { contents: [{ uri: uri.href, text: JSON.stringify(config) }] };
});
Enter fullscreen mode Exit fullscreen mode

prompt-server — structured prompt templates:

server.prompt("code-review", { code: z.string() }, ({ code }) => ({
  messages: [{ role: "user", content: { type: "text", text: `Review this code:
${code}` } }]
}));
Enter fullscreen mode Exit fullscreen mode

What Gets Generated 

my-server/
├── src/
│   └── index.ts      # Your server (edit this)
├── package.json
├── tsconfig.json
└── README.md
Enter fullscreen mode Exit fullscreen mode

Run it:

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

That's it. Working MCP server.

Adding More Tools

v0.2.0 added an add subcommand:

# Add a tool to an existing server
npx @webbywisp/create-mcp-server add tool --name fetch_url --server ./my-server

# Add a resource
npx @webbywisp/create-mcp-server add resource --name app_config --server ./my-server
Enter fullscreen mode Exit fullscreen mode

No manual boilerplate. Just run the command and fill in the logic.

When to Use Each Template

tool-server — when the AI needs to do something: execute code, call APIs, write files, send messages.

resource-server — when the AI needs to read something: config files, database queries, API responses as data.

prompt-server — when you want to standardize how the AI approaches a task: code review, debugging, documentation generation.

Most real servers end up mixing all three.

The Bigger Picture

MCP servers are how you give AI agents reliable, typed access to your systems. Instead of hoping the AI can figure out your API from documentation, you give it a proper interface.

The pattern: build small, focused servers. One server per domain (files, HTTP, database, messaging). Compose them in your agent config.

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

Free, open source, TypeScript. Get the scaffold in seconds, spend your time on the logic that matters.

Top comments (0)