aaspaiui-mcp

@aaspaiui-mcp

Official Model Context Protocol (MCP) server for ZedBlock UI.

Installation

Using npx (Recommended)

The easiest way to use this MCP server is via npx:

npx -y @aaspaiui-mcp@latest

Install MCP Configuration

Add to your IDE's MCP config:

For Cursor:

{
  "mcpServers": {
    "@aaspaiui-mcp": {
      "command": "npx",
      "args": ["-y", "@aaspaiui-mcp@latest"]
    }
  }
}

For Claude Desktop:

{
  "mcpServers": {
    "@aaspaiui-mcp": {
      "command": "npx",
      "args": ["-y", "@aaspaiui-mcp@latest"]
    }
  }
}

For Windsurf:

{
  "mcpServers": {
    "@aaspaiui-mcp": {
      "command": "npx",
      "args": ["-y", "@aaspaiui-mcp@latest"]
    }
  }
}

Example Usage

Once configured, you can ask questions like:

"List all available UI components"

"Show me components in the Form category"

"Get the code for the button component"

"What categories are available?"

Available Tools

The server provides the following tools callable via MCP:

Tool Name	Description
list_components	Lists all available UI components with optional filtering by category, search, and limit
get_categories	Get all available component categories
get_component_code	Get metadata and source code information for a specific component
get_component_variants	Get available variants for a specific component

Tool Details

list_components

Lists all available UI components with optional filtering.

Parameters:

• category (optional): Filter by category (e.g., "Form", "Display", "Navigation")
• search (optional): Search components by name, category, or subcategory
• limit (optional): Maximum number of components to return (default: 50, max: 100)

Example:

{
  "name": "list_components",
  "arguments": {
    "category": "Form",
    "limit": 10
  }
}

get_categories

Get all available component categories.

Parameters: None

Example:

{
  "name": "get_categories",
  "arguments": {}
}

get_component_code

Get metadata and source code information for a specific component.

Parameters:

• componentName (required): Name of the component (e.g., "button", "card")

Example:

{
  "name": "get_component_code",
  "arguments": {
    "componentName": "button"
  }
}

get_component_variants

Get available variants for a specific component.

Parameters:

• componentName (required): Name of the component

Example:

{
  "name": "get_component_variants",
  "arguments": {
    "componentName": "button"
  }
}

Component Registry

The server reads component information from a bundled components.json file, which contains:

• Component metadata (name, category, subcategory)
• Dependencies (npm packages required)
• Registry dependencies (other components required)
• File information and content (when available)

Development

Building from Source

cd mcp-server
npm install
npm run build

Project Structure

mcp-server/
├── src/
│   ├── index.ts              # Entry point
│   ├── server.ts             # MCP server setup
│   ├── types.ts              # TypeScript interfaces
│   ├── services/
│   │   └── registry-service.ts  # Component registry service
│   ├── tools/
│   │   ├── list-components.ts
│   │   ├── get-categories.ts
│   │   ├── get-component-code.ts
│   │   └── get-component-variants.ts
│   └── utils/
│       └── paths.ts          # Path resolution utilities
├── scripts/
│   └── copy-components-json.js  # Script to bundle components.json
├── dist/                     # Compiled output
├── components.json          # Bundled component registry
├── package.json
├── tsconfig.json
└── README.md

License

MIT