Add @adobe/leonardo-mcp — runtime MCP server for color generation

[GarthDB]

Part of #266 — Leonardo AI tooling initiative.

Summary

Create a new monorepo package packages/mcp/ published as @adobe/leonardo-mcp. This is an MCP (Model Context Protocol) server that wraps @adobe/leonardo-contrast-colors at runtime, so AI assistants can generate verified, executable color output rather than approximating from documentation.

Follows the same pattern as @adobe/spectrum-design-data-mcp and @react-spectrum/mcp.

What makes this different from the Agent Skill

The Agent Skill teaches an AI how to use the library. The MCP server runs the library on the AI's behalf — producing real hex values, real contrast ratios, and real theme JSON that can be dropped directly into a project.

Package structure

packages/mcp/
├── package.json          # name: @adobe/leonardo-mcp, bin: src/cli.js
├── moon.yml              # moon task definitions
└── src/
    ├── cli.js            # #!/usr/bin/env node — npx entrypoint
    ├── server.js         # MCP server using @modelcontextprotocol/sdk StdioServerTransport
    └── tools/
        ├── generate-theme.js     # Theme + contrastColors
        ├── check-contrast.js     # contrast() wrapper with WCAG pass/fail
        ├── convert-color.js      # convertColorValue() wrapper
        └── create-palette.js     # Color + createScale() wrapper

Tools to expose

generate-theme

Inputs: array of color definitions (name, colorKeys, ratios, colorspace), lightness, contrast multiplier, saturation, output format.
Output: theme.contrastColors JSON — ready to paste into a design token file.

check-contrast

Inputs: foreground color, background color, optional contrast method (wcag2 | wcag3).
Output: ratio value, WCAG 2 AA/AAA pass/fail, APCA Lc value if wcag3 selected.

convert-color

Inputs: color value (any supported format), target format.
Output: converted color string.

create-palette

Inputs: colorKeys, colorspace, number of steps.
Output: array of interpolated color values.

Key technical decisions

• Transport: StdioServerTransport — works with npx @adobe/leonardo-mcp, no HTTP server required.
• Runtime dependency: @adobe/leonardo-contrast-colors as a workspace sibling (workspace:*), bundled at publish time.
• Input validation: zod schemas for each tool's inputs.
• SDK: @modelcontextprotocol/sdk

Cursor integration

Add .cursor/mcp.json to the repo:

{
  "mcpServers": {
    "leonardo": {
      "command": "node",
      "args": ["packages/mcp/src/cli.js"]
    }
  }
}

Published usage (post-release):

{
  "mcpServers": {
    "leonardo": {
      "command": "npx",
      "args": ["@adobe/leonardo-mcp"]
    }
  }
}

Moon integration

Add mcp to the workspace project list and add a moon.yml with build and test tasks matching the pattern in packages/contrast-colors/moon.yml.

Acceptance criteria

• packages/mcp/ exists as a valid monorepo package
• All four tools are implemented and input-validated with zod
• npx @adobe/leonardo-mcp starts the server without errors
• Each tool returns correct output when tested against known inputs (e.g., #cacaca background at lightness 97 with ratio 4.5 → expected hex)
• .cursor/mcp.json added to repo for local development
• moon.yml added with build and test tasks
• Package is added to changesets for release

[karim-semmoud]

Happy to see the development for Adobe Leonardo starts again 😄
I have been using it in Framer as a plugin and also in Corex design system pipeline.
https://www.framer.com/marketplace/plugins/accessible-colors/
https://github.com/corex-ui/corex-ui/tree/main/packages/design

@GarthDB Amazing work and if you need any help, I would love to contribute