🧠 @spanexx/ui-mcp

Model Context Protocol server for @spanexx/angular-ui-components

Enable AI coding assistants to understand and use your Angular UI component library with full type safety and examples.

🎯 What is This?

This MCP server exposes metadata about all 30+ components in @spanexx/angular-ui-components through the Model Context Protocol, allowing AI assistants like:

• Claude Desktop
• Zed Editor
• Windsurf
• Cline
• Continue.dev
• Any MCP-compatible client

...to automatically know how to use your component library!

🚀 Quick Start

Installation

npm install -g @spanexx/ui-mcp

Usage

The MCP server runs via stdio and is designed to be configured in your AI assistant's settings.

Claude Desktop

Add to ~/Library/Application Support/Claude/claude_desktop_config.json:

{
  "mcpServers": {
    "spanexx-ui": {
      "command": "spanexx-ui-mcp"
    }
  }
}

Zed Editor

Add to your Zed settings.json:

{
  "context_servers": {
    "spanexx-ui": {
      "command": {
        "path": "spanexx-ui-mcp",
        "args": []
      }
    }
  }
}

Windsurf / Cursor

Add to your MCP settings:

{
  "mcpServers": {
    "spanexx-ui": {
      "command": "spanexx-ui-mcp",
      "args": []
    }
  }
}

🛠️ Available Tools

The MCP server provides these tools to AI assistants:

list_components

Lists all 30+ available UI components

{
  "name": "list_components"
}

get_component

Get detailed info about a specific component

{
  "name": "get_component",
  "arguments": {
    "name": "Button"
  }
}

search_components

Search components by name, description, or selector

{
  "name": "search_components",
  "arguments": {
    "query": "form input"
  }
}

get_components_by_category

Get components organized by category

{
  "name": "get_components_by_category",
  "arguments": {
    "category": "form"
  }
}

Categories: form, display, layout, navigation, data, overlay, typography

generate_component_code

Generate TypeScript code for using a component

{
  "name": "generate_component_code",
  "arguments": {
    "componentName": "Button"
  }
}

📚 Resources

The server provides these resources:

• spanexx://components/all - Complete component metadata
• spanexx://docs/getting-started - Getting started guide
• spanexx://docs/installation - Installation instructions
• spanexx://examples/form - Form example with validation
• spanexx://examples/dashboard - Dashboard layout example

💡 Prompts

Pre-built prompts for common tasks:

create_component_usage

Generate code for using a specific component

component: "Button"

build_form

Generate a complete form with validation

fields: "email,password,name"

create_layout

Generate a page layout

layout_type: "dashboard"

🧪 Testing Locally

Build

cd projects/ui-mcp
npm run build

Run

node dist/index.js

Test with Echo

echo '{"jsonrpc":"2.0","id":1,"method":"tools/list"}' | node dist/index.js

Expected output:

{
  "jsonrpc": "2.0",
  "id": 1,
  "result": {
    "tools": [...]
  }
}

📦 Component Library

This MCP server provides metadata for:

Form Components (6)

• Input, Textarea, Checkbox, Radio, Switch, Label

Display Components (5)

• Card, Badge, Alert, Avatar, Progress

Layout Components (4)

• Container, Separator, Tabs, Accordion

Navigation Components (4)

• NavigationMenu, Breadcrumb, Command, Navigation

Data Components (3)

• Table, ScrollArea, Calendar

Overlay Components (4)

• Modal, Popover, Tooltip, Dropdown

Typography Components (3)

• Heading, Paragraph, Text

Total: 30+ Production-Ready Components

🔧 Development

Project Structure

projects/ui-mcp/
├── src/
│   ├── index.ts              # MCP server implementation
│   └── metadata/
│       └── components.json   # Component metadata
├── bin/
│   └── spanexx-ui-mcp.js     # Executable entry point
├── package.json
├── tsconfig.json
└── README.md

Build & Publish

# Build
npm run build

# Test locally
npm start

# Publish to npm
npm publish --access public

🤝 Integration Example

Once configured, AI assistants can:

1. List all components:

   "What UI components are available?"

2. Get component details:

   "Show me how to use the NavigationMenu component"

3. Generate code:

   "Create a login form with email and password fields"

4. Search components:

   "Which components can I use for displaying data?"

5. Get examples:

   "Show me an example dashboard layout"

The AI will automatically query the MCP server to get accurate, up-to-date information about your component library!

📄 License

MIT - Same as @spanexx/angular-ui-components

🔗 Links

• Component Library: @spanexx/angular-ui-components
• MCP Protocol: modelcontextprotocol.io
• GitHub: spanexx/angular-ui-components

Built with ❤️ for AI-assisted Angular development