RELATED 01
Helios Design System MCP server
OFFICIAL SERVERLooks up HashiCorp Helios components, design tokens, icons and docs for app developers
520GitHub stars
3.6k/wknpm downloads
73popularity score
WordPress Design System MCP Server
Component docs and design tokens from the WordPress Design System, served to coding assistants
Official · WordPress JavaScript Local · stdio Developer toolsDesign
52 popularity score ★ 12k ↓ 519/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 wordpress-design-system -- npx -y --ignore-scripts --min-release-age=2 @wordpress/design-system-mcp@latestClaude Desktopclaude_desktop_config.json
{
"mcpServers": {
"wordpress-design-system": {
"command": "npx",
"args": [
"-y",
"--ignore-scripts",
"--min-release-age=2",
"@wordpress/design-system-mcp@latest"
]
}
}
}Cursor~/.cursor/mcp.json
{
"mcpServers": {
"wordpress-design-system": {
"command": "npx",
"args": [
"-y",
"--ignore-scripts",
"--min-release-age=2",
"@wordpress/design-system-mcp@latest"
]
}
}
}VS Code.vscode/mcp.json
{
"servers": {
"wordpress-design-system": {
"type": "stdio",
"command": "npx",
"args": [
"-y",
"--ignore-scripts",
"--min-release-age=2",
"@wordpress/design-system-mcp@latest"
]
}
}
}Codex~/.codex/config.toml
[mcp_servers.wordpress-design-system]
command = "npx"
args = ["-y", "--ignore-scripts", "--min-release-age=2", "@wordpress/design-system-mcp@latest"]Gemini CLITerminal
gemini mcp add --scope user wordpress-design-system npx -- -y --ignore-scripts --min-release-age=2 @wordpress/design-system-mcp@latestWhat it does
This is the WordPress project's own MCP server for its design system, published from the Gutenberg monorepo as the npm package @wordpress/design-system-mcp. It gives a coding assistant a machine-readable view of the same component reference that Gutenberg's Storybook shows to people, so code written for WordPress admin screens and block editor interfaces uses current components rather than retired ones.
It has three read-only tools. One lists every component with its package and a short summary, which helps map a loose request such as "dropdown" to the real export name. A second returns full details for one or several named components: props, import lines and usage examples. The third returns the design token reference covering colours, spacing, typography and motion, for styling new pieces to match.
The server holds no copy of this data. On each request it downloads a components manifest from the Gutenberg GitHub Pages site and the tokens document from the Gutenberg repository on GitHub, so answers follow the trunk branch. Its makers mark the package experimental: early, and open to drastic and breaking changes.
What it needs
| Runtime | Node.js 22+ |
|---|
Node.js 22.13.0 or newer with npx, and outbound internet access to wordpress.github.io and raw.githubusercontent.com. No account, key or WordPress install is needed. TypeScript projects that import the package need TypeScript 5 or later.
Limits
Experimental: its makers say it may change drastically and break between releases. It only reads documentation; it does not edit code, create components or touch a WordPress site. It covers the WordPress Design System components and tokens only, not WordPress core APIs, themes or plugins. Every call fetches from GitHub, so it does not work offline and fails when those pages are unreachable.
Who it suits
Suits developers building Gutenberg blocks, WordPress admin screens or plugins with @wordpress/components who want their assistant to pick current components and tokens. Because it needs no key and only reads public docs, it is quick to add. Pick something else if you need to manage a WordPress site's content or settings, or if you work offline; and pin a version if breaking changes from an experimental package would hurt your workflow.
Tools 3
get_components- Lists all design system components with their package names and short summaries.
get_component_details- Returns props, import statements and usage examples for one or more named components.
get_design_tokens- Returns the token reference for colours, spacing, typography, motion and more.