styling-mcp-setup

@ama-styling/mcp Server Setup

Configure the @ama-styling/mcp server so AI assistants can discover, list, and recommend design tokens from your project's token library instead of guessing or hardcoding values.

Prerequisites

• A styling.metadata.json file generated by @ama-styling/style-dictionary using the ama/json/metadata format.
• Node.js (LTS recommended) for running npx.

Generating the Metadata File

The MCP server reads a styling.metadata.json that contains all your design tokens with their metadata, values, and Otter extensions. To generate it:

1. Install @ama-styling/style-dictionary, which provides the Ama transforms

   npm install --save-dev @ama-styling/style-dictionary
   

2. Add the ama/json/metadata format to your Style Dictionary config (sd.config.js or style-dictionary.config.json):

   export default {
     source: ['tokens/**/*.json'],
     platforms: {
       metadata: {
         transformGroup: 'ama/css',
         buildPath: './',
         files: [{
           destination: 'styling.metadata.json',
           format: 'ama/json/metadata'
         }]
       }
     }
   };
   

3. Build the tokens:

   npx style-dictionary build
   

   This produces styling.metadata.json at the project root.

Configuration

The server runs via npx with no permanent install required.

Claude Code

Add to .mcp.json at the project root:

{
  "mcpServers": {
    "ama-styling": {
      "command": "npx",
      "args": ["-y", "-p", "@ama-styling/mcp", "ama-styling-mcp-start", "--metadata", "./styling.metadata.json"]
    }
  }
}

GitHub Copilot (VS Code)

Add to .vscode/mcp.json:

{
  "servers": {
    "ama-styling": {
      "type": "stdio",
      "command": "npx",
      "args": ["-y", "-p", "@ama-styling/mcp", "ama-styling-mcp-start", "--metadata", "./styling.metadata.json"]
    }
  }
}