DSG Vue MCP Server

Model Context Protocol (MCP) server for the DSG Vue component library. Enables AI coding agents and tools to discover, understand, and use DSG Vue components based on the UntitledUI design system.

Features

• Component Discovery — List and search 35+ Vue 3 components with full metadata
• Detailed Documentation — Props, events, slots, exposed methods, and usage examples for every component
• Figma/UntitledUI Name Translation — Translate between UntitledUI design system names and DSG component names
• Dual Transport — Supports both stdio (local) and HTTP/SSE (remote/self-hosted) protocols
• Cross-Platform — Works on macOS, Windows, and Linux with npm or pnpm

Installation

npx (No Install Required)

# Run directly with npx
npx @dcodegroup-au/dsg-vue-mcp

# With HTTP transport
npx @dcodegroup-au/dsg-vue-mcp --http --port 3100

Global Install

# npm
npm install -g @dcodegroup-au/dsg-vue-mcp

# pnpm
pnpm add -g @dcodegroup-au/dsg-vue-mcp

# Then run
dsg-vue-mcp
dsg-vue-mcp --http --port 3100

From Source

git clone https://github.com/DCODE-GROUP/dsg-vue.git
cd dsg-vue/mcp-server
pnpm install
pnpm run build
node dist/index.js

Configuration

Claude Desktop

Add to your Claude Desktop configuration file:

macOS: ~/Library/Application Support/Claude/claude_desktop_config.json
Windows: %APPDATA%\Claude\claude_desktop_config.json

{
  "mcpServers": {
    "dsg-vue": {
      "command": "npx",
      "args": ["@dcodegroup-au/dsg-vue-mcp"]
    }
  }
}

VS Code (Copilot / Continue)

Add to your .vscode/mcp.json or workspace settings:

{
  "servers": {
    "dsg-vue": {
      "command": "npx",
      "args": ["@dcodegroup-au/dsg-vue-mcp"]
    }
  }
}

Cursor

Add to your Cursor MCP settings:

{
  "mcpServers": {
    "dsg-vue": {
      "command": "npx",
      "args": ["@dcodegroup-au/dsg-vue-mcp"]
    }
  }
}

HTTP/SSE (Self-Hosted)

For remote or self-hosted deployments:

# Start the HTTP server
dsg-vue-mcp --http --port 3100

Connect your MCP client to the SSE endpoint:

• SSE Endpoint: http://localhost:3100/sse
• Health Check: http://localhost:3100/health

Available Tools

list_components

List all available DSG Vue components with optional category filtering.

Parameters: | Name | Type | Required | Description | |------|------|----------|-------------| | category | "Elements" \| "Table" \| "Icons" \| "Navigation" \| "Headers" \| "Editor" | No | Filter by category |

get_component

Get comprehensive details about a specific component including all props, events, slots, exposed methods, and usage examples.

Parameters: | Name | Type | Required | Description | |------|------|----------|-------------| | name | string | Yes | Component name (e.g. DsgButton). Case-insensitive. |

search_components

Search for components by name, description, prop name, or UntitledUI/Figma design name.

Parameters: | Name | Type | Required | Description | |------|------|----------|-------------| | query | string | Yes | Search query (e.g. button, date picker, modal dialog) |

translate_name

Translate component names between UntitledUI/Figma design system and DSG Vue.

Parameters: | Name | Type | Required | Description | |------|------|----------|-------------| | name | string | Yes | Component name to translate | | direction | "figma-to-dsg" \| "dsg-to-figma" \| "auto" | No | Translation direction (default: auto) |

get_component_example

Get a detailed usage example for a component.

Parameters: | Name | Type | Required | Description | |------|------|----------|-------------| | name | string | Yes | Component name | | variant | "basic" \| "full" | No | Example detail level (default: basic) |

list_name_mappings

List all UntitledUI/Figma to DSG Vue name mappings.

get_library_info

Get general library information including version, installation, entry points, and Tailwind setup.

Resources

The server also exposes MCP resources:

• dsg://components — JSON list of all components with names, categories, and descriptions
• dsg://name-mappings — JSON list of all Figma/UntitledUI name mappings

Component Name Mappings

The following table shows the mapping between UntitledUI/Figma design names and DSG component names:

| UntitledUI / Figma | DSG Component | Notes | |---|---|---| | Button | DsgButton | Supports all UntitledUI button variants via theme prop | | Input field | DsgInput | type prop controls input variant | | Textarea | DsgInput | Use theme="textarea" | | Phone input | DsgInput | Use theme="phone" | | Select / Dropdown | DsgInputSelect | Single and multi-select via multiple prop | | Checkbox | DsgCheckbox | Also supports radio via type="radio" | | Radio | DsgCheckbox | Use type="radio" | | Toggle | DsgToggle | Direct mapping | | Datepicker | DsgDatepicker | Supports single, range, month, time, year, week, quarter | | Badge | DsgBadge | Pill and badge themes | | Tag | DsgTag | Checkbox, count, avatar variants | | Avatar | DsgAvatar | Direct mapping | | Tooltip | DsgTooltip | Uses floating-vue | | Modal | DsgModal | Center and left placement with action buttons | | Dropdown menu | DsgDropdown | Avatar, button, icon trigger types | | Progress bar | DsgProgress | Direct mapping | | Alert / Toast | DsgAlert | Service-based (not a template component) | | Tabs | DsgTab | Tabs and pills styles | | Breadcrumbs | DsgBreadcrumb | Direct mapping | | Table | DsgTable | Full-featured with API mode | | Card | DsgCard | Direct mapping | | Accordion | DsgAccordion | Direct mapping | | Icon | DsgIcon | UntitledUI icon set | | Featured icon | DsgMiscIcon | Themed icon container | | Link | DsgLink | Direct mapping | | Rich text editor | DsgEditor | Vditor-based | | Barcode scanner | DsgBarcodeScanner | Camera-based scanning |

Development

# Install dependencies
pnpm install

# Run in development mode
pnpm run dev

# Build
pnpm run build

# Run tests
pnpm run test

Transport Protocols

stdio (Default)

Used for local MCP client integration (Claude Desktop, VS Code, Cursor, etc.). The server communicates over stdin/stdout using JSON-RPC.

dsg-vue-mcp

HTTP/SSE

Used for remote or self-hosted deployments. The server provides:

• GET /sse — SSE connection endpoint
• POST /messages?sessionId=<id> — Message endpoint
• GET /health — Health check

dsg-vue-mcp --http --port 3100

License

UNLICENSED — Internal use only.