What it does

Searches a design system's components so the agent reuses them instead of inventing a parallel button. Narrow by nature — it is one organisation's design system — but the pattern is the useful part: the cheapest way to stop generated UI from drifting is to make the real components searchable.

Install

Terminal

npx -y @ehrocks/fe-mcp-server

Client configuration

Paste this into your MCP client config (Claude Desktop, Cursor, or any client that reads mcpServers), then restart the client.

mcp.json

{
  "mcpServers": {
    "hero-design": {
      "command": "npx",
      "args": [
        "-y",
        "@ehrocks/fe-mcp-server"
      ]
    }
  }
}

Use it for

Generating UI code that uses components which already exist

Skip it if

Anywhere the design system is not the source of truth

When to use it

Reach for this when the task needs design-system inside the agent loop. Skip it if a plain shell command or a one-off script is enough — every server you add costs context and adds a failure mode.

Other TypeScript servers

Filesystem — Gives an agent scoped read, write, and search access to directories you explicitly allow
Memory — A persistent knowledge graph stored in a local JSON file, exposed through entities, relations, and observations
Sequential Thinking — Gives the model a scratchpad for structured, revisable reasoning: numbered thoughts that can branch, revise, and conclude

Hero Design System MCP