MCP Server Starter Template

A comprehensive starter template for building Model Context Protocol (MCP) servers, specifically designed for UI libraries and component registries. This template provides a robust foundation for creating MCP servers that can fetch, categorize, and provide component information to AI assistants like Claude.

🌎 Real world example?

Check out the stackzero-labs/mcp which uses this template to expose its UI components and blocks to AI models. You can also checkout the UI referenced project stackzero/ui

🚀 Features

• Ready-to-use MCP server with TypeScript support
• Component registry integration for UI libraries
• Categorized component organization with flexible category system
• Zod schema validation for type safety
• Development tools including hot reload and inspector
• Example implementation using a real project URL for demonstration
• Extensible architecture for custom component types and categories

📋 Prerequisites

• Node.js 18 or higher
• pnpm (recommended) or npm
• Basic understanding of TypeScript and MCP

🤝 Intended Use Cases

This template is specifically designed for libraries following the registry format (like shadcn/ui), making it ideal for:

• UI component libraries
• Design systems
• Component registries that need to be accessible via AI assistants
• Tools, utilities, and frameworks that require a structured way to expose UI components to AI models

Read more about components registries like shadcn/ui here Component Registries.

With some customizations however, it can be adapted for other types of MCP servers as well.

🛠️ Installation

1. Clone or download this template:

git clone https://github.com/mnove/mcp-starter.git
cd mcp-starter

2. Install dependencies:

pnpm install

3. Build the project:

pnpm run build

⚙️ Configuration

1. Update Project Configuration

Edit src/lib/config.ts to point to your own component registry:

export const mcpConfig = {
  projectName: "your-project-name",
  // Replace with your actual project URL
  baseUrl: "https://your-ui-library.com",
  registryUrl: "https://your-ui-library.com/r",
  registryFileUrl: "https://your-ui-library.com/registry.json",
};

Note: This template currently uses https://ui.stackzero.co as a demonstration URL. You must replace this with your actual project URL for production use.

2. Define Component Categories

Customize src/lib/categories.ts to match your component structure:

export const componentCategories = {
  Buttons: ["button-primary", "button-secondary", "button-ghost"],
  Forms: ["input-text", "input-email", "textarea"],
  // Add your categories here
};

3. Update Server Metadata

Modify src/server.ts to customize your server information: