Mozaic MCP Server

npm version npm downloads License: MIT Documentation

ADEOによるMozaic Design Systemのための、自己完結型のClaude CodeスキルおよびMCPサーバーです。

📚 ドキュメント • 🎮 MCPプレイグラウンド

概要

このパッケージは、AIアシスタントでMozaic Design Systemを扱うための2つの補完的なツールを提供します。

🤖 Claude Codeスキル - コンポーネント構築とデザイン・トークン利用をガイドする7つのインタラクティブなスキル
🔌 MCPサーバー - Mozaicリソースへのプログラムによるアクセスを可能にする17のツールを備えたModel Context Protocolサーバー

含まれるもの

リソースタイプ	数	説明
デザイン・トークン	586	カラー、タイポグラフィ、スペーシング、シャドウ、ボーダー、ブレークポイント
コンポーネント	131+	Vue 3、React、Web Components、および完全なドキュメント付きのFreemarkerマクロ
アイコン	1,473	15カテゴリにわたるSVGアイコン
CSSユーティリティ	6	Flexy grid、Container、Margin、Padding、Ratio、Scroll
ドキュメント	281	検索可能な利用ガイドとベストプラクティス
MCPツール	17	すべてのリソースへのプログラムによるアクセス
Claudeスキル	7	Vue、React、Web Components、Freemarker、およびフレームワーク非依存の利用のためのインタラクティブなワークフロー

クイックスタート

インタラクティブなインストール（推奨）

npx -p mozaic-mcp-server@latest adeo-mozaic-install-tools

矢印キーとスペースキーでコンポーネントを選択し、Enterキーを押してインストールします。

ワンコマンドインストール

# Install everything (skills + MCP server)
npx -p mozaic-mcp-server@latest adeo-mozaic-install-tools all

# Install only skills (for Claude Code)
npx -p mozaic-mcp-server@latest adeo-mozaic-install-tools skills

# Install only MCP server (for Claude Desktop)
npx -p mozaic-mcp-server@latest adeo-mozaic-install-tools mcp

インストール状況の確認

npx -p mozaic-mcp-server@latest adeo-mozaic-install-tools list

インストール前に試す

インストールせずにブラウザで直接MCPツールをテストできます：

🎮 MCPプレイグラウンドを開く

プレイグラウンドでは以下のことが可能です：

11個のMCPツールをインタラクティブにテスト
コンポーネント、トークン、アイコンの閲覧
コードスニペットの生成
ドキュメントの検索

Claude Codeスキル

Mozaicでの構築のためのインタラクティブなワークフローを提供する6つの自己完結型スキルです。

利用可能なスキル

スキル	説明	ユースケース
mozaic-vue-builder	インタラクティブなVue 3コンポーネントジェネレーター	Mozaicを使用したVueアプリの構築
mozaic-react-builder	インタラクティブなReact/TSXコンポーネントジェネレーター	Mozaicを使用したReactアプリの構築
mozaic-webcomponents-builder	インタラクティブなWeb Componentsジェネレーター	ネイティブWebコンポーネントを使用したフレームワーク非依存アプリの構築
mozaic-freemarker-builder	インタラクティブなFreemarkerマクロジェネレーター	Freemarkerを使用したサーバーサイドテンプレートの構築
mozaic-design-tokens	デザイン・トークンとスタイリングの専門家	カラー、タイポグラフィ、スペーシングへのアクセス
mozaic-css-utilities	CSSユーティリティクラスとレイアウト	レスポンシブレイアウトの構築
mozaic-icons	アイコン検索と統合	Mozaicアイコンの検索と利用

スキルの仕組み

スキルはコンテキストに基づいてClaude Codeで自動的にアクティブ化されます。また、手動で呼び出すことも可能です：

User: "I need a login form with Mozaic"

Claude Codeは適切なスキル（VueまたはReactビルダー）を自動的にアクティブ化し、以下をガイドします：

コンポーネントの選択
Propsの設定
コード生成
インストール手順

詳細なドキュメントについては SKILLS.md を参照してください。

MCPサーバーツール

Model Context Protocolを介してMozaicリソースにアクセスするための14のプログラムツールです。

利用可能なツール

ツール	カテゴリ	説明
`get_design_tokens`	トークン	カテゴリ（カラー、タイポグラフィ、スペーシングなど）でトークンをクエリ
`get_component_info`	コンポーネント	コンポーネントのprops、スロット、イベント、ドキュメントを取得
`list_components`	コンポーネント	カテゴリまたはフレームワーク別にコンポーネントをリスト化
`generate_vue_component`	コード生成	props付きのVue 3 SFCコードを生成
`generate_react_component`	コード生成	TypeScriptを使用したReact/TSXコードを生成
`generate_webcomponent`	コード生成	インポートを含むネイティブWebコンポーネントHTMLを生成
`get_webcomponent_info`	Webコンポーネント	属性、スロット、イベント、CSSプロパティを取得
`list_webcomponents`	Webコンポーネント	カテゴリ別にWebコンポーネントをリスト化
`generate_freemarker`	コード生成	設定付きのFreemarkerマクロコードを生成
`get_freemarker_info`	Freemarker	マクロ設定オプションと使用法を取得
`list_freemarker`	Freemarker	カテゴリ別にFreemarkerマクロをリスト化
`search_documentation`	ドキュメント	281ページのドキュメント全体を全文検索
`get_css_utility`	CSS	CSSユーティリティクラスと例を取得
`list_css_utilities`	CSS	利用可能なCSSユーティリティをリスト化
`search_icons`	アイコン	名前、タイプ、カテゴリで1,473個のアイコンを検索
`get_icon`	アイコン	アイコンのSVGとフレームワークコードを取得
`get_install_info`	インストール	npm/yarn/pnpmのインストールコマンドを取得

設定

Claude CodeまたはClaude Desktopの設定に追加してください：

Claude Codeの場合 (.claude/settings.json内):

{
  "mcpServers": {
    "mozaic": {
      "command": "npx",
      "args": ["-y", "mozaic-mcp-server"]
    }
  }
}

Claude Desktopの場合 (~/Library/Application Support/Claude/claude_desktop_config.json内):

{
  "mcpServers": {
    "mozaic": {
      "command": "npx",
      "args": ["-y", "mozaic-mcp-server"]
    }
  }
}

使用例

Claude Codeでのスキルの使用

スキルはリクエストに基づいて自動的にアクティブ化されます：

You: "I need a responsive grid with 3 columns"
Claude: [activates mozaic-css-utilities skill]
        Here's the Flexy grid solution...

You: "Add a shopping cart icon"
Claude: [activates mozaic-icons skill]
        I found these cart icons...

MCPツールをプログラムで使用する

設定が完了すると、ClaudeはMCPツールを直接使用できます：

You: "What design tokens are available?"
Claude: [calls get_design_tokens tool]
        Found 586 tokens across 7 categories...

You: "Generate a React button component"
Claude: [calls get_component_info, then generate_react_component]
        Here's your Button component with TypeScript...

CLIコマンド

adeo-mozaic-install-tools CLIはいくつかのコマンドを提供します：

# Interactive mode (default)
npx -p mozaic-mcp-server@latest adeo-mozaic-install-tools

# Install all components
npx -p mozaic-mcp-server@latest adeo-mozaic-install-tools all

# Install skills only
npx -p mozaic-mcp-server@latest adeo-mozaic-install-tools skills

# Install MCP server only
npx -p mozaic-mcp-server@latest adeo-mozaic-install-tools mcp

# Check status
npx -p mozaic-mcp-server@latest adeo-mozaic-install-tools list

# Remove components
npx -p mozaic-mcp-server@latest adeo-mozaic-install-tools remove skills
npx -p mozaic-mcp-server@latest adeo-mozaic-install-tools remove mcp
npx -p mozaic-mcp-server@latest adeo-mozaic-install-tools remove all

# Show help
npx -p mozaic-mcp-server@latest adeo-mozaic-install-tools --help

アーキテクチャ

┌─────────────────────────────────────┐
│   Claude Code / Claude Desktop      │
│                                     │
│   ┌─────────────┐  ┌─────────────┐ │
│   │   Skills    │  │ MCP Server  │ │
│   │  (5 total)  │  │ (11 tools)  │ │
│   └─────────────┘  └─────────────┘ │
│          │                │         │
└──────────┼────────────────┼─────────┘
           │                │
           ▼                ▼
    ┌──────────────────────────┐
    │  Shell Scripts (14)      │
    │  ↓ sqlite3 queries       │
    └──────────────────────────┘
               ▼
    ┌──────────────────────────┐
    │  SQLite Database         │
    │  ~/.claude/mozaic.db     │
    │                          │
    │  • 586 tokens            │
    │  • 91 components         │
    │  • 1,473 icons           │
    │  • 281 docs              │
    └──────────────────────────┘

ファイルの場所

インストール後：

~/.claude/
├── mozaic.db                      # SQLite database (all Mozaic data)
├── skills/                        # Claude Code skills
│   ├── mozaic-vue-builder/
│   ├── mozaic-react-builder/
│   ├── mozaic-design-tokens/
│   ├── mozaic-css-utilities/
│   └── mozaic-icons/
└── (Claude Code settings.json)    # MCP server config

~/Library/Application Support/Claude/
└── claude_desktop_config.json     # Claude Desktop MCP config

開発

前提条件

Node.js ≥25.2.0
pnpm (推奨)

セットアップ

# Clone the repository
git clone https://github.com/MerzoukeMansouri/adeo-mozaic-mcp.git
cd mozaic-mcp-server

# Install dependencies
pnpm install

# Build the project (compiles TypeScript + builds database)
pnpm build

# Run tests
pnpm test

# Start MCP server in debug mode
pnpm start:debug

プロジェクト構造

mozaic-mcp-server/
├── src/                    # TypeScript source code
│   ├── index.ts           # MCP server entry point
│   ├── tools/             # MCP tool implementations
│   └── database/          # Database utilities
├── skills/                # Claude Code skills
│   ├── mozaic-vue-builder/
│   │   ├── skill.md       # Skill instructions
│   │   └── scripts/       # Shell scripts (4)
│   └── ...                # Other skills
├── scripts/               # Build and utility scripts
│   ├── build-index.ts     # Database builder
│   └── generate-docs.ts   # Documentation generator
├── data/                  # Generated database
│   └── mozaic.db
├── repos/                 # Mozaic Design System repositories (git submodules)
│   ├── mozaic-design-system/
│   ├── mozaic-vue/
│   └── mozaic-react/
├── bin/                   # CLI entry points
│   └── install.js         # Installation CLI
└── website/               # Documentation website

データベースの構築

SQLiteデータベースはMozaic Design Systemリポジトリから構築されます：

# Update submodules
git submodule update --init --recursive

# Build database
pnpm build

以下がインデックス化されます：

mozaic-design-system/packages/tokens からのデザイン・トークン
mozaic-vue および mozaic-react からのコンポーネント
mozaic-design-system/packages/icons からのアイコン
すべてのリポジトリからのドキュメント

貢献

貢献を歓迎します！以下のガイドラインに従ってください：

リポジトリをフォークする
フィーチャーブランチを作成する (git checkout -b feature/amazing-feature)
Conventional Commits を使用して変更をコミットする
ブランチにプッシュする (git push origin feature/amazing-feature)
プルリクエストを開く

コミット規約

セマンティックバージョニングとConventional Commitsを使用しています：

feat: - 新機能（マイナーバージョンアップ）
fix: - バグ修正（パッチバージョンアップ）
feat!: または BREAKING CHANGE: - 破壊的変更（メジャーバージョンアップ）
chore:, docs:, style:, refactor:, test: - バージョンアップなし

リソース

ドキュメントとツール

📚 ドキュメント: https://merzoukemansouri.github.io/adeo-mozaic-mcp/
🎮 MCPプレイグラウンド: https://merzoukemansouri.github.io/adeo-mozaic-mcp/#/playground
GitHub: https://github.com/MerzoukeMansouri/adeo-mozaic-mcp
npm: https://www.npmjs.com/package/mozaic-mcp-server

ライセンス

MITライセンス - 詳細は LICENSE ファイルを参照してください。

サポート

問題や質問がある場合：

📚 オンラインドキュメントを読む
🎮 MCPプレイグラウンドを試す
🐛 GitHub でIssueを開く
📖 スキルドキュメントを確認する
🎨 Mozaic Design Systemドキュメントを確認する

ADEOコミュニティのために ❤️ を込めて構築されました

Mozaic Design SystemはADEOによって保守されています

Mozaic MCP Server

Mozaic MCP Server

概要

含まれるもの

クイックスタート

インタラクティブなインストール（推奨）

ワンコマンドインストール

インストール状況の確認

インストール前に試す

Claude Codeスキル

利用可能なスキル

スキルの仕組み

MCPサーバーツール

利用可能なツール

設定

使用例

Claude Codeでのスキルの使用

MCPツールをプログラムで使用する

CLIコマンド

アーキテクチャ

ファイルの場所

開発

前提条件

セットアップ

プロジェクト構造

データベースの構築

貢献

コミット規約

リソース

ドキュメントとツール

関連リソース

ライセンス

サポート

Resources

Looking for Admin?

Latest Blog Posts

MCP directory API