life4aiur/stencil-library-mcp

Stencil Component Library MCP Server

A Model Context Protocol (MCP) server template that gives Claude AI access to your Stencil component library documentation.

Note: This project started as a fork of SterlingChin's MCP Weather Server, which provided an excellent foundation for building MCP servers. The original weather server implementation has been repurposed to serve Stencil component library documentation.

What is MCP?

Model Context Protocol (MCP) is an open communication framework that allows AI models like Claude to interact with external tools and data sources. This template enables Claude to access your component library documentation and help you build UIs with your components.

Learn more about MCP:

• MCP Official Documentation
• Getting Started with MCP

What This Repository Contains

This repository provides:

1. Complete MCP Component Library Server Template: A fully functional implementation that gives Claude access to your Stencil component documentation
2. Component Documentation Integration: Reads from Stencil's generated JSON docs
3. Configuration Examples: Sample configuration files for connecting to Claude Desktop

Features

The MCP Component Library Server implements 11 powerful tools to help you work with your component library:

Core Tools

• list-components: Get a list of all components in your component library
• get-component-details: Retrieve detailed information about a specific component (props, events, slots)
• generate-component-recipe: Generate usage examples and code snippets based on what you want to build

Discovery Tools

• search-components: Search for components by keyword in their name, description, props, or events
• find-components-with-prop: Find all components that have a specific property (e.g., "disabled", "value")
• find-components-with-event: Find all components that emit a specific event (e.g., "click", "change")

Analysis Tools

• compare-components: Compare two components side-by-side to see their differences
• get-component-dependencies: Show dependencies and dependents for a component
• get-all-props: List all unique property names across the entire component library
• get-all-events: List all unique event names across the entire component library

Documentation Tools

• generate-component-docs-markdown: Export component documentation as formatted markdown

Once connected, Claude can:

• Tell you what components are available in your component library
• Explain how to use specific components
• Show you all the props, events, and slots for any component
• Generate code examples and recipes for common UI patterns
• Help you find the right component for your needs
• Compare similar components to choose the best one
• Understand component relationships and dependencies
• Export documentation in markdown format

Quick Start

Prerequisites

• Node.js 16+ and npm
• Claude Desktop
• A Stencil component library with generated docs.json

Installation

1. Clone or navigate to this repository:

   cd stencil-library-mcp
   

2. Install dependencies:

   npm install
   

3. Build the project:

   npm run build
   

4. Place your Stencil component docs in component-docs/docs.json

Connecting to Claude Desktop

1. Open your Claude Desktop configuration file:

   • Mac: ~/Library/Application Support/Claude/claude_desktop_config.json
   • Windows: %AppData%\Claude\claude_desktop_config.json

2. Add the following configuration (update the path and name to match your component library):

   {
     "mcpServers": {
       "my-component-library": {
         "command": "node",
         "args": ["/absolute/path/to/stencil-library-mcp/build/index.js"]
       }
     }
   }
   

   💡 Tip: The server name (the key under mcpServers) is what Claude Desktop will display when asking to use tools. Choose a name that matches your component library. For example, if your library is called "Acme UI", you could use "acme-ui" as the key.

3. Restart Claude Desktop

4. Look for the hammer icon in Claude Desktop, indicating that MCP tools are available

Testing Your Implementation

Try asking Claude these questions:

Basic Queries:

• "What components does my component library have?"
• "Show me details about [component-name]"
• "Give me a recipe for a login form using my components"
• "How do I use [property] on [component]?"

Discovery Queries:

• "Search for components related to forms"
• "Which components have a 'disabled' property?"
• "What components emit a 'click' event?"

Analysis Queries:

• "Compare [component-1] and [component-2]"
• "What are the dependencies for [component-name]?"
• "Show me all the common properties across the library"
• "What events can components emit?"

Documentation Queries:

• "Generate markdown documentation for [component-name]"

Project Structure

├── src/
│   └── index.ts           # Main server entry point with all tools
├── component-docs/
│   ├── docs.json          # Your Stencil component documentation
│   └── docs.d.ts          # TypeScript definitions
├── build/                 # Compiled JavaScript files
├── package.json
└── tsconfig.json

Updating Component Documentation

When you update your Stencil components:

1. Regenerate your Stencil docs (usually part of your build process)
2. Copy the new docs.json to component-docs/docs.json
3. Rebuild this MCP server: npm run build
4. Restart Claude Desktop

Customizing for Your Design System

To adapt this template for your own design system:

1. Update server name in src/index.ts:

   const server = new McpServer({
     name: "your-design-system-name",
     // ...
   });
   

2. Modify component formatting in formatComponent() to match your needs

3. Enhance code generation in generateExampleUsage() to create better examples

4. Add additional tools for specific design system needs (theme tokens, icons, etc.)

5. Update branding in console messages and documentation

Available Tools

Core Tools

list-components

Lists all available components in your design system with brief descriptions.

Parameters: None

Example: "What components are available in my library?"

get-component-details

Get detailed documentation for a specific component including:

• All properties (with types and defaults)
• Events
• Slots
• Usage documentation

Parameters:

• tag (string): The component tag name (e.g., "my-button")

Example: "Show me details about my-button"

generate-component-recipe

Generate code examples and implementation suggestions based on what you want to build. Claude will analyze your available components and suggest how to combine them.

Parameters:

• description (string): Description of what you want to build

Example: "Give me a recipe for a login form"

Discovery Tools

search-components

Search for components by keyword in their name, description, props, or events.

Parameters:

• query (string): Search query (e.g., "button", "form", "input")

Example: "Search for all input-related components"

find-components-with-prop

Find all components that have a specific property.

Parameters:

• propName (string): Property name to search for (e.g., "disabled", "value")

Example: "Which components have a 'disabled' property?"

find-components-with-event

Find all components that emit a specific event.

Parameters:

• eventName (string): Event name to search for (e.g., "click", "change")

Example: "Which components emit a 'change' event?"

Analysis Tools

compare-components

Compare two components side-by-side to see their differences in props, events, and slots.

Parameters:

• component1 (string): First component tag name
• component2 (string): Second component tag name

Example: "Compare my-button and my-icon-button"

get-component-dependencies

Show dependencies (components this uses) and dependents (components that use this) for a component.

Parameters:

• tag (string): Component tag name

Example: "What are the dependencies for my-card?"

get-all-props

List all unique property names across the entire component library, sorted by usage frequency.

Parameters: None

Example: "What are all the common properties across my components?"

get-all-events

List all unique event names across the entire component library, sorted by usage frequency.

Parameters: None

Example: "What are all the events my components can emit?"

Documentation Tools

generate-component-docs-markdown

Export component documentation as formatted markdown that you can copy to your documentation site.

Parameters:

• tag (string): Component tag name

Example: "Generate markdown docs for my-button"

Troubleshooting

Common Issues

• Claude can't find your server: Verify your configuration path in claude_desktop_config.json and restart Claude Desktop
• "Failed to load component documentation": Ensure component-docs/docs.json exists and is valid JSON
• Server not updating: Rebuild with npm run build and restart Claude Desktop
• Check logs: Look at Claude Desktop logs at:
  • Mac: ~/Library/Logs/Claude/mcp*.log
  • Windows: %AppData%\Claude\logs\mcp*.log

License

MIT

Credits

This project is a fork of SterlingChin's MCP Weather Server. Special thanks to Sterling Chin for creating an excellent MCP server implementation that served as the foundation for this component library documentation server.

Contributing

Feel free to customize this for your own component library needs!

---

Built using the Model Context Protocol