RELATED 01
WordPress Design System MCP Server
OFFICIAL SERVERComponent docs and design tokens from the WordPress Design System, served to coding assistants
12kGitHub stars
519/wknpm downloads
52popularity score
Helios Design System MCP server
Looks up HashiCorp Helios components, design tokens, icons and docs for app developers
Official · HashiCorp TypeScript Local · stdio Developer toolsDesign
73 popularity score ★ 520 ↓ 3.6k/wk
Connect your client
Local (npm)
Add in one click
Opens the app, which asks before it adds the server. Then replace each <NAME> in its settings with your value.
Or add it by command or config
FirstTerminal
cd <ABSOLUTE_PATH_TO_APPLICATION>
pnpm add --save-dev @hashicorp/design-system-mcpClaude CodeTerminal
claude mcp add helios-design-system -- pnpm --dir '<ABSOLUTE_PATH_TO_APPLICATION>' exec helios-design-system-mcpClaude Desktopclaude_desktop_config.json
{
"mcpServers": {
"helios-design-system": {
"command": "pnpm",
"args": [
"--dir",
"<ABSOLUTE_PATH_TO_APPLICATION>",
"exec",
"helios-design-system-mcp"
]
}
}
}Cursor~/.cursor/mcp.json
{
"mcpServers": {
"helios-design-system": {
"command": "pnpm",
"args": [
"--dir",
"<ABSOLUTE_PATH_TO_APPLICATION>",
"exec",
"helios-design-system-mcp"
]
}
}
}VS Code.vscode/mcp.json
{
"servers": {
"helios-design-system": {
"type": "stdio",
"command": "pnpm",
"args": [
"--dir",
"<ABSOLUTE_PATH_TO_APPLICATION>",
"exec",
"helios-design-system-mcp"
]
}
}
}Codex~/.codex/config.toml
[mcp_servers.helios-design-system]
command = "pnpm"
args = ["--dir", "<ABSOLUTE_PATH_TO_APPLICATION>", "exec", "helios-design-system-mcp"]Gemini CLITerminal
gemini mcp add --scope user helios-design-system pnpm -- --dir '<ABSOLUTE_PATH_TO_APPLICATION>' exec helios-design-system-mcpSettings 1
HDS_MCP_PROJECT_ROOT |
Optional: Absolute path of the application whose Helios packages are read; defaults to the nearest package.json at or above the working directory. |
|---|
What it does
HashiCorp's own MCP server for Helios, the design system used across HashiCorp products. It answers questions about Helios from inside a coding assistant: which components exist and what arguments they take, which design tokens and Flight icons are available, and what the Helios documentation says on a topic. It is meant for developers building interfaces with the Helios Ember components package.
The server runs locally over stdio and is installed as a dev dependency of the application being built. Component, token and icon data are taken from the Helios packages installed in that application, so answers match the versions in its lockfile; if those packages cannot be found it falls back to the copies bundled with the server, which may be different versions. Documentation is not read from the application: it comes from a docs snapshot (docs-catalog.json) shipped inside the MCP package, so it reflects the docs as of that package release.
Version 0.2.2 registers six tools, plus MCP resources for components, tokens and icons and four prompts (choose a component, implement a pattern, review usage, troubleshoot a component), per src/index.ts and src/tools/index.ts at that tag. The README lists none of the tool names.
What it needs
| Runtime | Node.js 24+ |
|---|
Node.js 24 or later and pnpm. Install the package as a dev dependency of the Helios-based application (pnpm add --save-dev @hashicorp/design-system-mcp) so it can read that app's @hashicorp/design-system-components, tokens and icons packages. No account or key is needed.
Limits
Read-only lookup: it cannot edit code or files. Documentation answers come from the snapshot bundled with the installed MCP version, not the live Helios website. If the app's Helios packages cannot be resolved, it silently uses its own bundled versions, which may differ. Component, icon and token searches return 20 results by default and at most 50, with queries capped at 200 characters (src/tools/constants.ts); doc search returns 8 by default, up to 25, and read_hds_docs returns 16,000 bytes by default, between 500 and 60,000 (src/tools/docs/constants.ts). Version 0.x.
Who it suits
Suits teams building HashiCorp-style UIs with the Helios Ember components who want an assistant to pick the right component, arguments, tokens and icons for the exact package versions in their project. It runs locally with no sign-in and only reads, so it is low-friction to add. It is of no use for other design systems or for working on Figma files; teams on another design system should look for that system's own server.
Tools 6
search_hds_components- Search Helios components by name or keyword
get_hds_component- Return details of one Helios component, such as its arguments
search_hds_docs- Search the bundled Helios documentation snapshot
read_hds_docs- Read a Helios documentation page, truncated to a byte limit
search_hds_icons- Search the Helios Flight icon set
search_hds_tokens- Search Helios design tokens