Mantine UI MCP Server

Mantine UI MCP サーバー

Mantine UI コンポーネントを操作するためのツールを提供する、Model Context Protocol（MCP）サーバーです。

機能

ドキュメントツール

• get_component_docs：任意の Mantine コンポーネントの詳細なドキュメントを取得します
• search_components：キーワードで Mantine コンポーネントを検索します
• list_components：利用可能なすべての Mantine コンポーネントを一覧表示します

コンポーネントの生成

• generate_component：バリアントを備えた、Mantine ベースのカスタムコンポーネントを生成します

テーマユーティリティ

• create_theme_config：Mantine のテーマ設定を作成します
• create_component_theme：コンポーネント固有のテーマ設定を作成します

インストール

グローバルインストール

# Install globally
npm install -g @hakxel/mantine-ui-server

# Run the server directly
mantine-ui-server

npx を使用する場合

npx @hakxel/mantine-ui-server

設定

Claude Desktop の場合

サーバー設定を Claude Desktop の設定ファイルに追加します。

macOS：~/Library/Application Support/Claude/claude_desktop_config.json
Windows：%APPDATA%/Claude/claude_desktop_config.json
Linux：~/.config/Claude/claude_desktop_config.json

{
  "mcpServers": {
    "mantine": {
      "command": "npx",
      "args": ["@hakxel/mantine-ui-server"],
      "env": {
        "MANTINE_VERSION": "7.16.2" // Optional: specify version
      }
    }
  }
}

Claude Extension を使用する VS Code の場合

VSCode の設定または Cline 拡張機能の設定に追加します。

{
  "mcpServers": {
    "mantine": {
      "command": "npx", 
      "args": ["@hakxel/mantine-ui-server"],
      "env": {
        "MANTINE_VERSION": "7.16.2" // Optional: specify version
      }
    }
  }
}

使用例

コンポーネントのドキュメントを取得する

get_component_docs(component: "Button", section: "props")

Button コンポーネント、特にその props の詳細なドキュメントを返します。

コンポーネントを検索する

search_components(query: "input")

検索クエリ「input」に一致するすべてのコンポーネントの一覧を返します。

コンポーネントを生成する

generate_component(
  name: "CustomButton", 
  mantineComponent: "Button",
  props: {
    size: "md",
    variant: "filled"
  },
  styling: {
    useModule: true
  }
)

Mantine の Button に基づいて、新しい CustomButton コンポーネントを生成します。

テーマ設定を作成する

create_theme_config(
  extension: "colors",
  definitions: {
    primary: ["#90CAF9", "#2196F3", "#1976D2"],
    secondary: ["#CE93D8", "#9C27B0", "#7B1FA2"]
  },
  darkMode: true
)

ライトモードとダークモード用のカラーパレットのテーマ設定を作成します。

環境変数

• MANTINE_VERSION：ドキュメントで使用する Mantine のバージョンを指定します（デフォルト：最新）
• CACHE_DOCS：「false」に設定すると、ドキュメントのキャッシュを無効にします
• CACHE_TTL：ドキュメントキャッシュの有効期間（秒）
• CACHE_STORAGE：キャッシュの保存方法（「memory」または「file」）

開発

# Clone the repository
git clone https://github.com/hakxel/mantine-ui-server.git
cd mantine-ui-server

# Install dependencies
npm install

# Build the server
npm run build

# For development with auto-rebuild
npm run watch

デバッグ

MCP サーバーは stdio 経由で通信するため、デバッグには MCP Inspector を使用できます。

npm run inspector

ライセンス

MIT