Brand To Theme MCP Server

🚀 Brand-to-Theme MCP Server

An MCP server for converting brand PDFs into Shopify functional themes

🚀 Quick Start

This MCP server provides a set of tools for automatically converting PDF files from corporate brand manuals into complete Shopify theme templates while maintaining brand consistency. Leveraging advanced PDF parsing and code generation technologies, the server can transform brand visual elements (colors, fonts, etc.) into a complete and installable Shopify theme.

✨ Features

• PDF Extraction: Analyze PDFs to obtain color palettes, fonts, and other design elements.
• Generate Design Tokens: Convert extracted brand elements into standardized design tokens.
• Create Shopify Themes: Generate complete theme files based on brand information.
• Integrate with Shopify: Support direct installation of themes in connected stores.
• Integrate with Figma: Compatible with components extracted from Figma (via Figma's MCP).

📦 MCP Tools

The server exposes the following MCP tools:

1. extract_pdf_branding

Extract brand visual elements and information from a PDF file.

Parameters:

• pdfPath: Path to the brand manual PDF file.
• extractOptions: Extraction options (colors, fonts, logos).

2. generate_design_tokens

Generate design tokens based on the extracted brand information.

Parameters:

• brandingData: Brand data extracted from the PDF.
• figmaData: Optional data extracted from Figma.
• format: Output token format (JSON, CSS, SCSS).

3. create_shopify_theme

Generate a complete Shopify theme based on design tokens.

Parameters:

• designTokens: Generated design tokens.
• themeName: Name of the theme.
• outputPath: Path to save the theme files.

4. preview_shopify_theme

Generate a preview view of the Shopify theme.

Parameters:

• themePath: Path to the theme files.
• previewType: Type of preview to generate (thumbnail, full-screen).

5. install_shopify_theme

Install the generated theme into a connected Shopify store.

Parameters:

• themePath: Path to the theme files.
• installationType: Install as a new theme or update an existing theme.
• existingThemeId: ID of the existing theme to update (if necessary).
• setAsMain: Set as the main store theme.

📦 Installation

1. Clone this repository:

git clone https://github.com/mmokarzel/brand-to-theme-mcp-server.git
cd brand-to-theme-mcp-server

2. Install dependencies:

npm install

3. Compile the project:

npm run build

4. Configure this server in your MCP configuration file:

{
  "mcpServers": {
    "github.com/mmokarzel/brand-to-theme-mcp-server": {
      "command": "node",
      "args": [
        "/ruta/a/brand-to-theme-mcp/build/index.js"
      ],
      "env": {},
      "disabled": false,
      "description": "Brand-to-Theme MCP Server"
    }
  }
}

💻 Usage Examples

Basic Usage

1. Extract brand information from a PDF:

const result = await invoke('extract_pdf_branding', {
  pdfPath: '/path/to/brand指南.pdf',
  extractOptions: {
    colors: true,
    fonts: true,
    logos: false
  }
});

2. Generate design tokens based on the extracted information:

const tokens = await invoke('generate_design_tokens', {
  brandingData: result,
  format: 'CSS'
});

3. Create a Shopify theme using the design tokens:

await invoke('create_shopify_theme', {
  designTokens: tokens,
  themeName: 'BrandTheme',
  outputPath: '/path/to/output'
});

4. Preview the generated theme:

const preview = await invoke('preview_shopify_theme', {
  themePath: '/path/to/output/brandTheme.json',
  previewType: 'full'
});

5. Install the theme into a Shopify store:

await invoke('install_shopify_theme', {
  themePath: '/path/to/output/brandTheme.json',
  installationType: 'new',
  setAsMain: true
});

📚 Documentation

Prerequisites

• Node.js and npm installed on the system.
• A Shopify developer account and API access.
• Basic knowledge of command-line operations.