Canvas Kit MCP
OFFICIAL SERVERWorkday's Canvas Kit component docs, tokens, icons and upgrade guides served to coding assistants
Exposes a Vue project's Musea component registry, variants and design tokens over MCP
By ubugeeei-prod TypeScript Local · stdio Developer toolsDesign
77 popularity score ★ 925 ↓ 22k/wk
Opens the app, which asks before it adds the server. Then replace each <NAME> in its settings with your value.
Install vp from https://viteplus.dev/guide/install
cd <ABSOLUTE_PROJECT_PATH> && vp install -D @vizejs/musea-mcp-serverclaude mcp add musea -- vp -C '<ABSOLUTE_PROJECT_PATH>' exec musea-mcp '<ABSOLUTE_PROJECT_PATH>'{
"mcpServers": {
"musea": {
"command": "vp",
"args": [
"-C",
"<ABSOLUTE_PROJECT_PATH>",
"exec",
"musea-mcp",
"<ABSOLUTE_PROJECT_PATH>"
]
}
}
}{
"mcpServers": {
"musea": {
"command": "vp",
"args": [
"-C",
"<ABSOLUTE_PROJECT_PATH>",
"exec",
"musea-mcp",
"<ABSOLUTE_PROJECT_PATH>"
]
}
}
}{
"servers": {
"musea": {
"type": "stdio",
"command": "vp",
"args": [
"-C",
"<ABSOLUTE_PROJECT_PATH>",
"exec",
"musea-mcp",
"<ABSOLUTE_PROJECT_PATH>"
]
}
}
}[mcp_servers.musea]
command = "vp"
args = ["-C", "<ABSOLUTE_PROJECT_PATH>", "exec", "musea-mcp", "<ABSOLUTE_PROJECT_PATH>"]gemini mcp add --scope user musea vp -- -C '<ABSOLUTE_PROJECT_PATH>' exec musea-mcp '<ABSOLUTE_PROJECT_PATH>'MUSEA_PROJECT_ROOT |
Optional: Project root to scan when no positional path is given; defaults to the working directory. |
|---|---|
MUSEA_TOKENS_PATH |
Optional: Design token file or folder inside the project; same as --tokens-path. Otherwise tokens/, design-tokens/ and style-dictionary/ are searched. |
The Musea MCP Server is part of Vize, a Vue toolchain, and is published on npm as @vizejs/musea-mcp-server. It runs locally over stdio against one Vue project and gives an assistant structured facts about that project's components instead of guesses: the props and emitted events of a single-file component, the variants recorded in Musea art files (*.art.vue), and the project's design tokens.
Its 13 tools fall into four groups. Discovery tools list, search and rank the registered components for a described UI task. API tools statically analyse a .vue file for props, defaults, required flags and emits, and infer a props palette of control types and options. Generation tools return text drafts: an .art.vue file of variant combinations, a Storybook CSF 3.0 story from an art file, Markdown docs for one component, or a catalog of the whole registry. Token tools read a token file or folder as JSON or Markdown and search token names, paths, values and descriptions.
In the 0.454.0 source, the generation handler only reads files; drafts come back in the response and nothing is written to the project. Search tools return 10 results by default, recommendations 5, token matches 20, and generate_variants makes at most 20 variants unless maxVariants is set (tools/definitions.ts). The CLI also reads the MUSEA_PROJECT_ROOT and MUSEA_TOKENS_PATH environment variables and a --tokens-path flag (cli.ts). Its makers mark the server as experimental.
| Runtime | Node.js 22+ |
|---|
Node.js 22 or newer (the package's engines field) and the Vite+ `vp` command, installed from the Vite+ install guide. The package must be installed as a dev dependency of the Vue project it reads (`vp install -D @vizejs/musea-mcp-server`); it pulls in the native binding @vizejs/native. For the registry tools, the project needs Musea art files (*.art.vue); token tools need a token file or a tokens/, design-tokens/ or style-dictionary/ folder.
Marked experimental by its makers; its API may change between releases. It reads one project root per process, chosen by the positional argument, then MUSEA_PROJECT_ROOT, then the working directory. Without *.art.vue files only analyze_component is useful on plain .vue files. Generated variants, stories and docs are drafts returned as text, not saved. Scans skip node_modules/ and dist/, and non-empty scan results are cached for five seconds, so a newly added art file can take a moment to show up. get_tokens fails when no token path is given and none of the default folders exists.
Teams building a Vue design system with Musea art files who want an assistant to pick real components, prop names and token values from their own code before writing UI. It is local, needs no account and only reads files, so it fits projects where code must stay on the machine. It is little use for React or other frameworks, for Vue projects without art files beyond prop analysis, or for anyone who wants an assistant to edit files itself: pair it with a file-editing tool for that. As an experimental, community-made package, expect changes between versions.
analyze_componentget_palettelist_componentsget_componentget_variantsearch_componentsrecommend_componentsgenerate_variantsgenerate_csfgenerate_docsgenerate_catalogget_tokenssearch_tokens