Mozaic MCP Server

---
title: Mozaic MCP Server - Architecture Overview
---
flowchart TB
    subgraph Client["Claude Desktop / MCP Client"]
        CD[Claude Desktop]
    end

    subgraph MCP["Mozaic MCP Server"]
        direction TB
        Server[MCP Server<br/>src/index.ts]

        subgraph Tools["MCP Tools"]
            T1[get_design_tokens]
            T2[get_component_info]
            T3[list_components]
            T4[generate_vue_component]
            T5[generate_react_component]
            T6[search_documentation]
            T7[get_css_utility]
            T8[list_css_utilities]
            T9[get_icon]
            T10[search_icons]
            T11[get_install_info]
        end

        Server --> Tools
    end

    subgraph Data["Data Layer"]
        DB[(SQLite Database<br/>data/mozaic.db)]
        Queries[db/queries.ts]
    end

    subgraph Sources["Source Repositories"]
        DS[mozaic-design-system<br/>Tokens + Docs]
        VUE[mozaic-vue<br/>Vue Components]
        REACT[mozaic-react<br/>React Components]
    end

    CD <-->|stdio| Server
    Tools --> Queries
    Queries --> DB

    DS -.->|build| DB
    VUE -.->|build| DB
    REACT -.->|build| DB