MCP Hudoro React

MCP (Model Context Protocol) Server untuk @hudoro/admin React component library. Server ini membantu AI coding assistant untuk memahami dan menggunakan komponen-komponen @hudoro 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

Installation

Via npx (Recommended)

Tidak perlu install, langsung pakai:

npx mcp-hudoro-react

Via npm global

npm install -g mcp-hudoro-react
mcp-hudoro-react

Configuration

Factory Droid CLI

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

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

Atau tambahkan via CLI:

droid mcp add hudoro-react "npx -y mcp-hudoro-react"

Claude Desktop

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

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

VS Code dengan Continue.dev

Tambahkan ke Continue config:

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

Tools

list_components

List semua komponen @hudoro. 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"
    }
  }
}

Resources

• hudoro://components - All components data
• hudoro://categories - Component categories

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