MCP Server Starter Template

A starter template for building Model Context Protocol (MCP) servers, designed for UI libraries and component registries.

A comprehensive starter template for buildingModel 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.

Check out thestackzero-labs/mcpwhich uses this template to expose its UI components and blocks to AI models. You can also checkout the UI referenced projectstackzero/ui

Read more about components registries like shadcn/ui hereComponent Registries.

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

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", };

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

Modifysrc/server.tsto customize your server information:

const server = new McpServer({ name: "your-mcp-server-name", version: "1.0.0", });

This opens the MCP Inspector to test your server tools interactively.

The MCP server provides the following tools:

Returns a comprehensive list of all UI components from your registry.

Dynamic tools are created for each category defined incomponentCategories:

- getButtons- Get all button components
- getForms- Get all form components
- etc.

- Component implementation details
- Usage examples
- Installation instructions
- Related components

mcp-starter/ ├── src/ │ ├── server.ts # Main MCP server implementation │ ├── lib/ │ │ ├── config.ts # Configuration settings │ │ └── categories.ts # Component categories │ └── utils/ │ ├── api.ts # API fetching utilities │ ├── formatters.ts # Data formatting helpers │ ├── schemas.ts # Zod validation schemas │ └── index.ts # Utility exports ├── dist/ # Built files ├── package.json └── README.md

- Update schemasinsrc/utils/schemas.ts:

export const CustomComponentSchema = z.object({ name: z.string(), category: z.string(), // Add your fields });

export async function fetchCustomComponents() { // Your implementation }

server.tool("getCustomComponents" /.../);

Simply add new categories tosrc/lib/categories.ts:

export const componentCategories = { // Existing categories... Navigation: ["navbar", "sidebar", "breadcrumbs"], DataDisplay: ["table", "card", "badge"], };

The server will automatically create tools for new categories.

Categories help organize components logically, making it easier for AI assistants to find and suggest relevant components based. Also, some models and IDE have a limit on the number of tools they can handle, so categorizing helps to keep the number of tools manageable.

Your component registry should follow this structure:

{ "registry": [ { "name": "button-primary", "type": "registry:component", "description": "Primary button component" } ] }

Component Details (/r/{component-name}.json)

{ "name": "button-primary", "type": "registry:component", "files": [ { "content": "// Component implementation" } ] }

- Configure in your MCP client (e.g., Claude Desktop):

{ "mcpServers": { "your-mcp-server": { "command": "node", "args": ["/path/to/mcp-starter/dist/server.js"] } } }

You can also publish this template as an NPM package for easy installation in other projects.
- Updatepackage.jsonwith your details
- Build and publish:

SeeCONTRIBUTING.mdfor details on how to contribute to this project.

This project is licensed under the MIT License - see theLICENSEfile for details.

- Built withModel Context Protocol SDK
- Inspired by the need for better AI-component integration
- Thanks to the MCP community for their contributions

Execute any LLM-generated code in the YepCode secure and scalable sandbox environment and create your own MCP tools using JavaScript or Python, with full support for NPM and PyPI packages