mcp-ui-kit -example

This MCP server documents and exposes information about your Vue UI Kit components. It provides a set of tools to explore the kit: uikit_list_components helps you list components with optional filtering by package or category; uikit_get_component retrieves detailed metadata for a specific component, including props, events, and slots; uikit_search lets you find components by name, description, or category; uikit_generate_usage generates usage examples for a component; and uikit_stats returns statistics about the documented UI Kit. You can integrate this MCP server with an AI assistant (e.g., Cursor, Claude Desktop) to allow the assistant to answer questions like which props are available for AppButton, how to use a component in Vue, or to output example usage code tailored to your app. To use it in your project, run the server and point Cursor to the MCP endpoint configured in .cursor/mcp.json (the example shows a ui-kit server named ui-kit).

Prerequisites:

• Node.js and npm installed
• Access to the MCP Vue UI Kit repository

Step-by-step:

1. Clone the repository and install dependencies

git clone https://github.com/your-username/mcp-vue-ui-kit.git
cd mcp-vue-ui-kit
npm install

2. Configure the path to your UI Kit in the generator (edit scripts/generate-docs.ts)

const PACKAGES_TO_DOCUMENT: PackageConfig[] = [
  {
    name: 'my-ui-kit',
    alias: '@my-company/ui-kit',
    path: '/path/to/your/ui-kit',          // 👈 Укажите путь к вашему UI-kit
    componentsGlob: 'src/components/**/*.vue',
  },
];

3. Generate documentation

npm run generate

Docs will be written to the data/ directory.

4. Build the MCP server

npm run build

5. Run the server (example)

npm start

6. Connect Cursor or other clients

Add to your Cursor config (e.g., .cursor/mcp.json):

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

Tips:

• Ensure the UI Kit path in scripts/generate-docs.ts points to a valid Vue component library so documentation is generated correctly.
• If the server is running in development, use npm run dev for hot-reloading as described in the README.
• The UIKIT_DATA_DIR environment variable controls where documentation data is loaded from; if not set, it defaults to ./data.
• When updating components, re-run npm run generate to refresh the data directory and then restart the MCP server.
• If your AI assistant cannot access the server, verify network access and the path to dist/server.js in the mcp.config entry.