New to Claude Skills? Learn how to install them →

shubhamsaboo on GitHub

MCP Server Builder

Free

Build production-ready MCP servers with ease.

Get this skill

Free · Opens the source repo

What MCP Server Builder does

MCP Server Builder is designed for developers working with the Model Context Protocol (MCP) framework. It provides a structured approach to create production-ready MCP servers using the mcp-use library. By leveraging this skill, developers can efficiently define tools, resources, and prompts while also incorporating interactive widgets into their applications. The skill emphasizes a modular design, allowing for easy decomposition of user requests into appropriate components, whether they require UI elements or text-based responses.

Before diving into coding, users are encouraged to consult the provided design and architecture documentation to inform their decisions on what to build. This preparatory step is crucial for ensuring that the resulting MCP server meets user needs effectively. The skill includes various references that guide users through the implementation of server-side code, the creation of visual widgets, and the formatting of response values, ensuring a comprehensive approach to MCP development.

The quick reference section provides essential code snippets that demonstrate how to define tools, resources, and prompts within an MCP server. This practical guidance is invaluable for developers looking to streamline their workflow and adhere to best practices in MCP server development. Additionally, the skill facilitates the use of response helpers to format outputs in various formats, enhancing the versatility of the server's responses.

Overall, MCP Server Builder is a vital tool for developers engaged in MCP projects, offering a robust framework for building and managing MCP servers with a focus on usability and efficiency.

When to use it

Use this skill when you are creating MCP servers and need to define tools, resources, or prompts efficiently.

When not to use it

This skill is deprecated and should not be used; instead, refer to `mcp-app-builder` for current functionality.

What you can build with it

Creating a New MCP Server

When starting a new project, developers can use the MCP Server Builder to define their server structure and components.

Defining Tools and Resources

This skill helps in structuring tools and resources required for the MCP server, ensuring a clean implementation.

Implementing Interactive Widgets

Developers can create interactive UI widgets as part of their MCP server, enhancing user experience.

How to install MCP Server Builder

View source

1. Install with the skills CLI

npx skills add shubhamsaboo/awesome-llm-apps/mcp-builder --agent claude-code

2. Or install it manually

Download the skill folder and drop it into ~/.claude/skills/ for all projects, or .claude/skills/ to scope it to one repo. Restart Claude Code so it picks up the new skill.

Anthropic's agentic coding CLI, and the reference implementation of Agent Skills. Drop a skill folder into ~/.claude/skills and Claude Code loads it automatically whenever a task matches the skill's description. Claude Code docs

Inside SKILL.md

Written by shubhamsaboo

MCP Server Builder

Build production-ready MCP servers with tools, resources, prompts, and interactive widgets using mcp-use.

Before You Code

Decompose user requests into tools, widgets, and resources. Decide what needs UI vs text.

Read design-and-architecture.md: when planning what to build, deciding tool vs widget, or designing UX flows.

Implementation

  • Tools, resources, promptstools-and-resources.md: when writing server-side server.tool(), server.resource(), server.prompt() code
  • Visual widgets (React TSX)widgets.md: when creating interactive UI widgets in resources/ folder
  • Response helper APIresponse-helpers.md: when choosing how to format tool/resource return values
  • URI template patternsresource-templates.md: when defining parameterized resources

Quick Reference

import {
  MCPServer,
  text,
  object,
  markdown,
  html,
  image,
  widget,
  error,
} from "mcp-use/server";
import { z } from "zod";

const server = new MCPServer({ name: "my-server", version: "1.0.0" });

// Tool
server.tool(
  {
    name: "my-tool",
    description: "...",
    schema: z.object({ param: z.string().describe("...") }),
  },
  async ({ param }) => text("result"),
);

// Resource
server.resource(
  { uri: "config://settings", name: "Settings", mimeType: "application/json" },
  async () => object({ key: "value" }),
);

// Prompt
server.prompt(
  {
    name: "my-prompt",
    description: "...",
    schema: z.object({ topic: z.string() }),
  },
  async ({ topic }) => text(`Write about ${topic}`),
);

server.listen();

Response helpers: text(), object(), markdown(), html(), image(), audio(), binary(), error(), mix(), widget()

Server methods: server.tool(), server.resource(), server.resourceTemplate(), server.prompt(), server.listen()

Frequently asked questions about MCP Server Builder

Similar skills