Adeo Mozaic MCP

🚀 Mozaic MCP Server

ADEOによるMozaic Design SystemをClaudeや他のAIアシスタントに公開するMCP（Model Context Protocol）サーバーです。

ドキュメントを表示 | プレイグラウンドを試す

⚠️ 重要提示

このプロジェクトは現在積極的に開発中です。コントリビューションやフィードバックを歓迎します！

🚀 クイックスタート

pnpm install
pnpm build   # TypeScriptをコンパイルし、データベースを構築します
pnpm start   # MCPサーバーを起動します

✨ 主な機能

このサーバーは、Mozaic Design System全体をインデックス化し、MCPツールを通じてクエリ可能にします。AIアシスタントは以下のことができます。

• デザイントークン（色、スペーシング、タイポグラフィなど）を検索する
• コンポーネントのドキュメントを取得する（props、スロット、イベント、サンプルを含む）
• SVG/React/Vueコード付きのアイコンを検索して取得する
• ドキュメントページを検索する
• コンポーネントのコードスニペットを生成する

📦 インストール

インストール手順

pnpm install
pnpm build   # TypeScriptをコンパイルし、データベースを構築します
pnpm start   # MCPサーバーを起動します

📚 ドキュメント

インデックス化された内容

ドキュメントのソース:

• デザインシステムのドキュメント（220ページ）
• Vue Storybookのドキュメント（58ページ） - 入門ガイド、使用ガイド
• React Storybookのドキュメント（3ページ） - 入門ガイド、使用ガイド

MCPツール

コンポーネントツール

CSSユーティリティツール

アイコンツール

インストールツール

その他のツール

トークンカテゴリ

CSSユーティリティ

CSSのみのレイアウトとユーティリティクラス（Vue/Reactのラッパーなし）。get_css_utilityツールを使用して、完全なクラスリストとサンプルを取得できます。

アーキテクチャ

┌─────────────────────────────────────────────────────────────┐
│                     Claude Desktop                          │
└─────────────────────────┬───────────────────────────────────┘
                          │ stdio
┌─────────────────────────▼───────────────────────────────────┐
│                    MCP Server                               │
│  ┌─────────────────────────────────────────────────────┐   │
│  │ Tools: get_component_info, get_css_utility, ...     │   │
│  └─────────────────────────┬───────────────────────────┘   │
│                            │                                │
│  ┌─────────────────────────▼───────────────────────────┐   │
│  │                 SQLite Database                     │   │
│  │  tokens | components | icons | css_utilities | docs │   │
│  └─────────────────────────────────────────────────────┘   │
└─────────────────────────────────────────────────────────────┘
                          ▲
                          │ build
┌─────────────────────────┴───────────────────────────────────┐
│                    Source Repositories                      │
│  mozaic-design-system  │  mozaic-vue  │  mozaic-react      │
└─────────────────────────────────────────────────────────────┘

スクリプト

詳細ドキュメント

• docs/ARCHITECTURE.md - アーキテクチャの図と統計情報
• docs/TEST.md - テストガイド

次のステップ

ベンチマーク: MCP vs Claude Skills

MCPサーバーのアプローチとネイティブのClaudeスキルのパフォーマンスと有効性を比較する:

• [ ] ベンチマークシナリオを定義する（コンポーネント検索、コード生成、ドキュメント検索）
• [ ] 応答の正確性と完全性を測定する
• [ ] トークンの使用量とレイテンシを比較する
• [ ] コンテキストウィンドウの効率を評価する
• [ ] トレードオフと推奨事項をドキュメント化する

リリースプロセス

MCPサーバーを公開する手順:

• [ ] npmレジストリ: npmに公開する (npm publish)
• [ ] Smithery: smithery.aiのMCPマーケットプレイスに提出する
• [ ] GitHubリリース: 変更履歴付きのタグ付きリリースを作成する
• [ ] Claude Desktop設定: claude_desktop_config.jsonでのインストールをドキュメント化する
• [ ] バージョン戦略: データベーススキーマの変更に対するセマンティックバージョニングポリシーを定義する

将来の改善点

• [ ] データベースの増分更新（完全な再構築を避ける）
• [ ] ローカル開発用のウォッチモード
• [ ] 頻繁にアクセスされるデータのキャッシュ層
• [ ] カスタム/拡張トークンのサポート
• [ ] 多言語ドキュメントのサポート

バージョン履歴

Mozaic Design Systemのバージョンとの互換性:

インデックス化されたMozaicリポジトリ

新しいMozaicバージョンへの更新

新しいMozaicバージョンがリリースされたとき:

1. 最新の変更を取得する: pnpm build（リポジトリを自動的にクローン/更新します）
2. 健全性チェックを実行する: pnpm database:sanity
3. テストを実行する: pnpm test
4. 上記のバージョンテーブルを更新する
5. リリースをタグ付けする: git tag vX.Y.Z

📄 ライセンス

MIT