RELATED 01
Musea MCP Server
Exposes a Vue project's Musea component registry, variants and design tokens over MCP
925GitHub stars
22k/wknpm downloads
77popularity score
Canvas Kit MCP
Workday's Canvas Kit component docs, tokens, icons and upgrade guides served to coding assistants
Official · Workday TypeScript Local · stdio Developer toolsDesign
67 popularity score ★ 369 ↓ 2.6k/wk
Connect your client
Local (npm)
Add in one click
Opens the app, which asks before it adds the server.
Or add it by command or config
Claude CodeTerminal
claude mcp add canvas-kit -- npx -y @workday/canvas-kit-mcpClaude Desktopclaude_desktop_config.json
{
"mcpServers": {
"canvas-kit": {
"command": "npx",
"args": [
"-y",
"@workday/canvas-kit-mcp"
]
}
}
}Cursor~/.cursor/mcp.json
{
"mcpServers": {
"canvas-kit": {
"command": "npx",
"args": [
"-y",
"@workday/canvas-kit-mcp"
]
}
}
}VS Code.vscode/mcp.json
{
"servers": {
"canvas-kit": {
"type": "stdio",
"command": "npx",
"args": [
"-y",
"@workday/canvas-kit-mcp"
]
}
}
}Codex~/.codex/config.toml
[mcp_servers.canvas-kit]
command = "npx"
args = ["-y", "@workday/canvas-kit-mcp"]Gemini CLITerminal
gemini mcp add --scope user canvas-kit npx -- -y @workday/canvas-kit-mcpSettings 1
CANVAS_PROJECT_ROOT |
Optional: Path to your Canvas Kit project, used when no projectPath argument or client roots are given; otherwise the start directory is used. |
|---|
What it does
Canvas Kit MCP is Workday's own server for Canvas Kit, its React design-system library. It ships the Canvas Kit documentation inside the npm package: component pages with code examples, design-token migration guides, icon migration guides, accessibility guidance and upgrade guides from v9 onward. An assistant working on a Canvas Kit front end can look up a component, check a token or icon name, or pull the right upgrade notes without leaving the editor.
Version 16.2.0 registers 12 tools, while the package README describes only four (source: modules/mcp/lib/index.ts and register-catalog-tools.ts at tag v16.2.0). The extra seven search the component and icon catalogs, validate token keys, check a code snippet or file for unresolvable Canvas imports, deprecated tokens and raw hex colours, and report which Canvas packages your project has installed and how far they lag the server's index version. To find your project it tries, in order, a projectPath argument, the client's MCP roots, the CANVAS_PROJECT_ROOT variable, and finally the directory the server was started in (project-context.ts).
It can also return a component story as an interactive HTML preview (an MCP App resource) for clients that render them.
What it needs
| Runtime | Node.js |
|---|
Node.js with npx. No account or key. The project-aware tools need a local project with Canvas Kit packages in node_modules; set CANVAS_PROJECT_ROOT or start the server in that folder when your client does not send MCP roots.
Limits
Documentation and checks only: the accessibility tool returns guidance links and, as its own description says, does not scan code, test pages or certify WCAG conformance. Upgrade guides cover v9 onward. Component and icon searches return 10 results by default, at most 25 with limit. The docs are bundled at build time, so they match the package version installed, not newer Canvas Kit releases. Interactive story previews need a client that renders MCP Apps.
Who it suits
Front-end developers building on Workday's Canvas Kit who want an assistant to use the right components, tokens and icons, and to plan major-version upgrades against what is actually installed. It runs locally with no sign-in and only reads. It is of no use outside Canvas Kit projects; for general React or other design systems, pick a server for that library.
Tools 12
get-canvas-kit-upgrade-guides- Lists the bundled Canvas Kit major-version upgrade guides.
get-canvas-kit-tokens- Returns design-token reference and migration docs for @workday/canvas-tokens-web.
get-accessibility-guidelines- Returns accessibility guidance for a component, a scenario, or both.
get-canvas-kit-icon-migration- Returns guides for moving to canvas-system-icons-web v5.
fetch-component-documentation-example- Shows an interactive preview of a component story with its docs link.
search-canvas-components- Searches the component catalog and checks results against your installed packages.
get-canvas-component- Looks up one component by name or slug, with availability in your project.
validate-canvas-tokens- Checks token keys against the catalog and the installed tokens package.
search-canvas-icons- Searches system icon exports and verifies them against installed typings.
get-canvas-project-context- Reports the project root, installed Canvas packages and version drift.
validate-canvas-code- Flags bad Canvas imports, deprecated tokens and raw hex colours in a snippet or file.
get-canvas-upgrade-path- Gives upgrade guides, codemods and notes from your installed version to a target.