uids-mcp

thedevbob005/uids-mcp

3.1

If you are the rightful owner of uids-mcp and would like to certify it and/or have it hosted online, please leave a comment on the right or send an email to henry@mcphub.com.

An MCP server designed for AI frontend developers to facilitate seamless integration and communication between AI models and frontend applications.

UI Dev MCP Server (uids-mcp)

A Model Context Protocol server that provides AI agents and developers with comprehensive frontend development capabilities including UI component library exploration and browser automation.

🚀 Features

  • Library & Component Explorer: Browse 30+ UI libraries, search components, get live demos with screenshots
  • Browser Controller: Interactive testing and debugging with Playwright automation
  • Auto-Update System: Keeps library data current through intelligent web scraping
  • Performance Optimized: Sub-300ms component queries with intelligent caching
  • Production Ready: Docker support, health monitoring, and comprehensive documentation

📦 Quick Start

Installation

# Install globally
npm install -g uids-mcp

# Or clone and build from source
git clone https://github.com/thedevbob005/uids-mcp
cd uids-mcp
npm install
npm run build

Test the Server

# Test MCP connection
echo '{"method":"tools/list","params":{}}' | node dist/index.js

# Test component search
echo '{"method":"tools/call","params":{"name":"search_component","arguments":{"query":"button"}}}' | node dist/index.js

🔌 Integration with AI Coding Assistants

Kiro IDE

  1. Open Kiro Settings: Command Palette → "Open Kiro MCP Settings"

  2. Add Server Configuration:

    {
  "mcpServers": {
    "uids-mcp": {
      "command": "node",
      "args": ["/path/to/uids-mcp/dist/index.js"],
      "env": {
        "NODE_ENV": "production"
      },
      "disabled": false,
      "autoApprove": [
        "list_libs",
        "search_component", 
        "get_component_props",
        "get_component_demo"
      ]
    }
  }
}

  3. Using NPX (Recommended):

    {
  "mcpServers": {
    "uids-mcp": {
      "command": "npx",
      "args": ["uids-mcp"],
      "disabled": false,
      "autoApprove": ["list_libs", "search_component", "get_component_demo"]
    }
  }
}

  4. Restart Kiro or use Command Palette → "MCP: Reconnect Servers"

Cursor IDE

  1. Open Cursor Settings: Ctrl/Cmd + , → Extensions → MCP

  2. Add to MCP Configuration:

    {
  "mcpServers": {
    "uids-mcp": {
      "command": "node",
      "args": ["/absolute/path/to/uids-mcp/dist/index.js"],
      "env": {}
    }
  }
}

  3. Alternative with NPX:

    {
  "mcpServers": {
    "uids-mcp": {
      "command": "npx",
      "args": ["uids-mcp"]
    }
  }
}

Windsurf IDE

  1. Open Settings: Settings → Extensions → MCP Servers

  2. Add Server:

    {
  "name": "UI Dev MCP",
  "command": "node",
  "args": ["/path/to/uids-mcp/dist/index.js"],
  "env": {
    "BROWSER_HEADLESS": "true"
  }
}

Warp Terminal (with MCP support)

  1. Create MCP Config: ~/.warp/mcp.json

    {
  "mcpServers": {
    "uids-mcp": {
      "command": "node",
      "args": ["/path/to/uids-mcp/dist/index.js"]
    }
  }
}

  2. Restart Warp and use MCP commands in AI chat

Claude Desktop

  1. Open Claude Desktop Settings

  2. Add to MCP Configuration:

    {
  "mcpServers": {
    "uids-mcp": {
      "command": "node",
      "args": ["/path/to/uids-mcp/dist/index.js"]
    }
  }
}

Generic MCP Client

For any MCP-compatible client:

import { Client } from '@modelcontextprotocol/sdk/client/index.js';
import { StdioClientTransport } from '@modelcontextprotocol/sdk/client/stdio.js';

const transport = new StdioClientTransport({
  command: 'node',
  args: ['/path/to/uids-mcp/dist/index.js']
});

const client = new Client({
  name: "my-client",
  version: "1.0.0"
}, {
  capabilities: { tools: {} }
});

await client.connect(transport);

🛠️ Available Tools

Library Explorer

  • list_libs() - List all supported UI libraries
  • search_component(query, lib?) - Search for components
  • get_component_props(lib, component) - Get component props and TypeScript definitions
  • get_component_demo(lib, component, props?) - Generate live demo with screenshot
  • get_lib_install(lib, package_manager?) - Get installation commands

Browser Automation

  • createSession(options?) - Create browser session
  • open_url(url) - Navigate to URL
  • click_selector(selector) - Click element
  • type_text(selector, text) - Type into input
  • get_screenshot(fullpage?) - Capture screenshot
  • get_console() - Get console logs

Auto-Update Management

  • update_library_data(lib) - Update library data
  • get_update_status() - Check update status
  • schedule_auto_updates(interval) - Configure auto-updates

💡 Usage Examples

Find and Use a Component

# In your AI assistant chat:
"Find me a button component from MUI and show me how to use it with primary styling"

The MCP server will:

  1. Search MUI components for "button"
  2. Get the Button component props
  3. Generate a demo with primary styling
  4. Return JSX code and screenshot

Test a UI Component

# In your AI assistant chat:
"Open https://my-app.com and test the login form by filling username and password"

The MCP server will:

  1. Create a browser session
  2. Navigate to the URL
  3. Find and fill form fields
  4. Capture screenshots of the process

🐳 Docker Usage

# Quick start with Docker
docker run -d --name uids-mcp -p 3000:3000 uids-mcp:latest

# Use in MCP config
{
  "command": "docker",
  "args": ["exec", "uids-mcp", "node", "dist/index.js"]
}

🔧 Configuration

Create .env file for custom configuration:

# Performance
MAX_BROWSER_SESSIONS=10
CACHE_TTL=1800000

# Auto-updates
ENABLE_AUTO_UPDATES=true
AUTO_UPDATE_INTERVAL=86400000

# Browser settings
BROWSER_HEADLESS=true

🔍 Troubleshooting

Quick Fixes

Server won't start?

# Check Node.js version (requires 18+)
node --version

# Test server manually
npx uids-mcp

MCP connection issues?

# Test MCP communication
echo '{"method":"tools/list","params":{}}' | npx uids-mcp

Browser automation failing?

# Set headless mode
export BROWSER_HEADLESS=true

See for detailed troubleshooting.

📚 Documentation

  • - Step-by-step setup for Kiro, Cursor, Windsurf, etc.
  • - Complete API reference
  • - Framework integration examples
  • - Production deployment instructions

Project Structure

uids-mcp/
├── src/           # Source code
├── lib/           # Library utilities and shared code
├── data/          # Data files including libs.json and cached metadata
├── tests/         # Test files
├── config/        # Configuration files
└── dist/          # Compiled output

Requirements

  • Node.js >= 18.0.0
  • Chromium (installed automatically with Playwright)

License

MIT