MCP TUV Admin React

MCP (Model Context Protocol) Server untuk @tuv-indo/admin React component library. Server ini membantu AI coding assistant untuk memahami dan menggunakan komponen-komponen @tuv-indo dengan lebih baik.

Features

• list_components: List semua komponen dengan filter kategori
• get_component: Detail props, variants, dan contoh penggunaan
• search_components: Cari komponen berdasarkan keyword
• suggest_component: Suggest komponen berdasarkan deskripsi UI dari Figma
• get_component_code: Generate code snippet siap pakai
• list_icons: List semua nama icon untuk @tuv-indo/icon
• list_hooks: List semua hook yang tersedia di @tuv-indo/hooks

Installation

Via npx (Recommended)

Tidak perlu install, langsung pakai:

npx mcp-tuv-admin-react

Via npm global

npm install -g mcp-tuv-admin-react
mcp-tuv-admin-react

Configuration

Factory Droid CLI

Tambahkan ke .factory/mcp.json di project Anda:

{
  "mcpServers": {
    "tuv-admin-react": {
      "type": "stdio",
      "command": "npx",
      "args": ["-y", "mcp-tuv-admin-react"],
      "disabled": false
    }
  }
}

Atau tambahkan via CLI:

droid mcp add tuv-admin-react "npx -y mcp-tuv-admin-react"

Claude Desktop

Tambahkan ke ~/Library/Application Support/Claude/claude_desktop_config.json:

{
  "mcpServers": {
    "tuv-admin-react": {
      "command": "npx",
      "args": ["-y", "mcp-tuv-admin-react"]
    }
  }
}

VS Code dengan Continue.dev

Tambahkan ke Continue config:

{
  "mcpServers": [
    {
      "name": "tuv-admin-react",
      "command": "npx",
      "args": ["-y", "mcp-tuv-admin-react"]
    }
  ]
}

Tools

list_components

List semua komponen @tuv-indo. Optional filter by category.

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

Categories: layout, form, feedback, data-display, navigation, other

get_component

Get detail lengkap satu komponen.

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

search_components

Cari komponen berdasarkan keyword.

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

suggest_component

Suggest komponen berdasarkan deskripsi UI.

{
  "name": "suggest_component",
  "arguments": {
    "description": "a clickable button with icon for form submission"
  }
}

get_component_code

Generate code snippet.

{
  "name": "get_component_code",
  "arguments": {
    "name": "Button",
    "props": {
      "variant": "primary",
      "size": "md"
    }
  }
}

list_icons

List semua nama icon.

{
  "name": "list_icons",
  "arguments": {}
}

list_hooks

List semua hook.

{
  "name": "list_hooks",
  "arguments": {}
}

Resources

• tuv-indo://components - All components data
• tuv-indo://categories - Component categories
• tuv-indo://icons - All icon names
• tuv-indo://hooks - All hook exports

Component Categories

| Category | Components | |----------|-----------| | layout | Box, Flex, Card, Section, etc. | | form | Button, Input, Checkbox, Radio, Dropdown, etc. | | feedback | Alert, Toast, Dialog, Drawer, Progress, etc. | | data-display | Table, Tabs, Accordion, Pagination, etc. | | navigation | Menu, Sidebar, Header |

License

MIT