my-compoent

This MCP server provides a structured set of tools and workflow capabilities to help you work with your internal component library, enabling quick component selection, implementation guidance, and migration support within an isolated environment.

How to use

You will interact with this MCP server through a client that requests tools and workflows. Use the component_list, component_search, and component_details tools to discover components, evaluate substitutes, and inspect APIs. Leverage component_examples and theme_tokens to generate concrete pages that conform to your design standard and token system. Use changelog_query to stay informed about breaking changes and migration hints. The Skills layer will combine these tools into executable workflows such as selecting a component, implementing it, aligning with the design规范, and guiding migrations or troubleshooting.

How to install

Prerequisites: ensure you have Node.js installed on your system. A compatible Node.js version is recommended (for example, Node.js 14+). You should also have Git available to clone the repository.

git clone https://github.com/davont/my-compoent-mcp.git
cd my-compoent-mcp
npm install
npm run start

Notes and practical guidance

This server focuses on providing callable tools and workflow logic to help you transform user requirements into concrete pages and migration plans. It emphasizes adherence to your xxx design规范 and token system, and it surfaces potential issues with concrete recommendations for fixes.

Tools and capabilities

The server provides a set of core MCP tools you can call to obtain structured data about your components, tokens, and migration information.

- component_list: List components by category, status, and platform.
- component_search: Search components by requirements and provide substitutes with applicability guidance.
- component_details: API details including props, slots, events, variants, defaults, constraints, and accessibility notes.
- component_examples: Minimal and common usage examples.
- theme_tokens: Token definitions, CSS variable mappings, and theme usage guidelines.
- changelog_query: Retrieve changelog, breaking changes, and migration hints.

Migration and best practices

When migrating or handling complex scenarios, use the changelog_query alongside version information to plan steps, identify risks, and outline rollback strategies. The workflow guidance covers best practices for introducing components, customizing themes, and performing common tasks like querying components, implementing features, and troubleshooting.

Complex scenarios

If a single component prop cannot satisfy a requirement, plan for extension or customization strategies and document any constraints or considerations to prevent regressions during upgrades.

Design standards and tokens

The design规范 acts as the unified constraint for generation and review, covering interaction, visuals, layout, and copy. Tokens define color, typography, spacing, and radii, ensuring consistency across implementations.

Data sources and references

Storybook documentation or MDX pages are the primary sources for component metadata, examples, and constraints.

Available tools

component_list

List components by category, status, and platform to help you quickly discover available building blocks.

component_search

Search components by requirements and terms, returning substitutes and guidance on applicability.

component_details

Provide API details including props, slots, events, variants, defaults, constraints, and accessibility notes for a given component.

component_examples

Deliver minimal and common usage examples to illustrate how to implement components.

theme_tokens

Define token values, CSS variable mappings, and guidelines for using tokens in styling and theming.

changelog_query

Fetch changelog, breaking changes, migration tips, and version-related guidance.