Mantine Ui Server

🚀 Mantine UI MCP サーバー

Model Context Protocol (MCP) サーバーで、Mantine UI コンポーネントとの協働ツールを提供します。

✨ 主な機能

ドキュメントツール

• get_component_docs: 任意の Mantine コンポーネントの詳細ドキュメントを取得します。
• search_components: キーワードに基づいて Mantine コンポーネントを検索します。
• list_components: 利用可能なすべての Mantine コンポーネントをリストします。

コンポーネント生成

• generate_component: Mantine ベースのカスタムコンポーネントとそのバリエーションを生成します。

テーマユーティリティ

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

📦 インストール

グローバルインストール

# グローバルインストール
npm install -g @hakxel/mantine-ui-server

# サーバーを直接起動
mantine-ui-server

npx を使用する

npx @hakxel/mantine-ui-server

📚 ドキュメント

Claude デスクトップ版用

サーバー設定を Claude デスクトップ版の設定ファイルに追加します。

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" // オプション: バージョンを指定
      }
    }
  }
}

VS Code の Claude 拡張機能用

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

{
  "mcpServers": {
    "mantine": {
      "command": "npx", 
      "args": ["@hakxel/mantine-ui-server"],
      "env": {
        "MANTINE_VERSION": "7.16.2" // オプション: バージョンを指定
      }
    }
  }
}

💻 使用例

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

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

Button コンポーネントの詳細ドキュメント、特にそのプロパティ部分を返します。

コンポーネントの検索

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」）

開発

# リポジトリをクローン
git clone https://github.com/hakxel/mantine-ui-server.git
cd mantine-ui-server

# 依存関係をインストール
npm install

# サーバーをビルド
npm run build

# 自動再構築付きの開発
npm run watch

デバッグ

MCP サーバーは標準入出力で通信するため、MCP デバッグツールを使用できます。

mantine-ui-server --inspect=8700

その後、chrome://devtools でデバッグ画面を開きます。

📄 ライセンス

このプロジェクトは MIT License の下で提供されています。