npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2025 – Pkg Stats / Ryan Hefner

@r-mcp/mcp-html-maker

v1.1.4

Published

A MCP (Model Context Protocol) server for generating HTML pages

Readme

MCP Server Boilerplate

A starter template for building MCP (Model Context Protocol) servers. This boilerplate provides a clean foundation for creating your own MCP server that can integrate with Claude Desktop, Cursor, Claude Code, Gemini, and other MCP-compatible AI assistants.

Purpose

This boilerplate helps you quickly start building:

  • Custom tools for AI assistants
  • Resource providers for dynamic content
  • Prompt templates for common operations
  • Integration points for external APIs and services

Features

  • Two example tools: "hello-world" and "get-mcp-docs"
  • TypeScript support with ES2022 target and ES modules
  • Multi-client installation scripts (Claude Desktop, Cursor, Claude Code, Gemini, etc.)
  • Automatic npm publishing workflow
  • Environment variable support via .env.local
  • Clean project structure with Zod validation

How It Works

This MCP server template provides:

  1. A basic server setup using the MCP SDK
  2. Example tool implementation
  3. Build and installation scripts
  4. TypeScript configuration for development

The included example demonstrates how to create a simple tool that takes a name parameter and returns a greeting.

Getting Started

Option 1: Use the Published Package (Recommended)

You can use this MCP server directly without cloning:

# Run the server directly with npx
npx @r-mcp/boilerplate

Option 2: Customize and Develop

# Clone the boilerplate
git clone <your-repo-url>
cd mcp-server-boilerplate

# Install dependencies
pnpm install

# Build the project
pnpm run build

# Start the server
pnpm start

Installation Scripts

This boilerplate includes convenient installation scripts for different MCP clients:

# Install to all MCP clients (Claude Desktop, Cursor, Claude Code, Gemini, MCP)
pnpm run install-server

# Install to specific clients
pnpm run install-desktop       # Claude Desktop
pnpm run install-cursor        # Cursor IDE
pnpm run install-code          # Claude Code CLI
pnpm run install-code-library  # Claude Code Library (~/.claude/mcp-library/)
pnpm run install-mcp           # Local .mcp.json for development

# You can also combine multiple targets:
node scripts/update-config.js cursor code desktop

These scripts will:

  • Build the project automatically (TypeScript compilation + chmod permissions)
  • Configure clients to use npx @r-mcp/<directory-name>@latest (auto-updating)
  • Only the local .mcp.json uses the development version (node dist/index.js)
  • Include environment variables from .env.local if present

Publishing Your Server

To publish your customized MCP server:

# Build, commit, and publish to npm in one command
pnpm run release

This script (scripts/build-and-publish.js) will:

  1. Commit any pending changes first
  2. Update package name to @r-mcp/<directory-name>
  3. Update bin name to match directory
  4. Increment patch version automatically
  5. Build the TypeScript project
  6. Commit version bump to git
  7. Push to remote repository
  8. Publish to npm with public access

Usage with MCP Clients

The installation scripts automatically configure your MCP clients. For reference, here's what gets added:

Production Clients (Claude Desktop, Cursor, Claude Code, Gemini):

{
  "mcpServers": {
    "boilerplate": {
      "command": "npx",
      "args": ["-y", "@r-mcp/boilerplate@latest"],
      "env": {
        // Environment variables from .env.local are included here
      }
    }
  }
}

Local Development (.mcp.json):

{
  "mcpServers": {
    "boilerplate": {
      "command": "node",
      "args": ["/absolute/path/to/dist/index.js"],
      "env": {
        // Environment variables from .env.local are included here
      }
    }
  }
}

After running installation scripts, restart your MCP client to connect to the server.

Customizing Your Server

Adding Tools

Tools are functions that the AI assistant can call. Here's the basic structure:

server.tool(
  "tool-name",
  "Description of what the tool does",
  {
    // Zod schema for parameters
    param1: z.string().describe("Description of parameter"),
    param2: z.number().optional().describe("Optional parameter"),
  },
  async ({ param1, param2 }) => {
    // Your tool logic here
    return {
      content: [
        {
          type: "text",
          text: "Your response",
        },
      ],
    };
  }
);

Adding Resources

Resources provide dynamic content that the AI can access:

server.resource(
  "resource://example/{id}",
  "Description of the resource",
  async (uri) => {
    // Extract parameters from URI
    const id = uri.path.split("/").pop();

    return {
      contents: [
        {
          uri,
          mimeType: "text/plain",
          text: `Content for ${id}`,
        },
      ],
    };
  }
);

Adding Prompts

Prompts are reusable templates:

server.prompt(
  "prompt-name",
  "Description of the prompt",
  {
    // Parameters for the prompt
    topic: z.string().describe("The topic to discuss"),
  },
  async ({ topic }) => {
    return {
      description: `A prompt about ${topic}`,
      messages: [
        {
          role: "user",
          content: {
            type: "text",
            text: `Please help me with ${topic}`,
          },
        },
      ],
    };
  }
);

Project Structure

├── src/
│   └── index.ts              # Main MCP server implementation
├── scripts/
│   ├── update-config.js      # Multi-client configuration installer
│   └── build-and-publish.js  # Automated npm publishing workflow
├── dist/                     # Compiled JavaScript (generated)
├── package.json              # Project configuration
├── tsconfig.json             # TypeScript configuration
├── CLAUDE.md                 # Claude Code instructions
├── .env.local                # Environment variables (optional)
└── README.md                 # This file

Development Workflow

Local Development

  1. Make changes to src/index.ts
  2. Run pnpm run build to compile TypeScript
  3. Test your server with pnpm start
  4. Use pnpm run install-mcp for local testing
  5. Restart your MCP client to load changes

Publishing Updates

  1. Test your changes locally
  2. Run pnpm run release to publish to npm
  3. Clients using npx @r-mcp/<your-package>@latest auto-update
  4. No client reconfiguration needed

Environment Variables

Create a .env.local file for environment-specific configuration:

# .env.local
API_KEY=your-api-key
DATABASE_URL=your-database-url

These variables are automatically included in MCP server configurations during installation.

Next Steps

  1. Fork or clone this boilerplate
  2. Customize the server name and tools in src/index.ts
  3. Add your own tools, resources, and prompts
  4. Configure environment variables in .env.local
  5. Run pnpm run release to publish your server
  6. Install to clients with pnpm run install-server

License

MIT