Click on "Deploy Server".
Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state.
In the chat, type @ followed by the MCP server name and your instructions, e.g., "@nhs-frontend-mcp show me the button component template and styles"
That's it! The server will respond to your query, and you can continue using it as needed.
Here is a step-by-step guide with screenshots.
An MCP server for the NHS.UK frontend design system. Plug it into Claude, Cursor, or any MCP-compatible client and your AI assistant can look up real component templates, SCSS, macro options, and usage examples directly from the source — no hallucinated class names.
Tool | What it does |
| Lists all 43 components |
| Full component details: template, styles, API, examples, and JS |
| Nunjucks template only |
| SCSS only |
| Macro options reference with types, required flags, and descriptions |
| Fixture examples for all variants |
| The base HTML page template |
| Keyword search across component names and descriptions |
| Manual git pull + cache clear |
Related MCP server: UK Government Technology Standards MCP Server
Every component is also exposed as an MCP resource at nhs://component/{name}.
On startup the server runs git pull on the nhsuk-frontend repo, then repeats every 6 hours (configurable). No manual pulls needed.
git clone https://github.com/nhsuk/nhsuk-frontend.gitgit clone https://github.com/EmmaExcel/nhs-frontend-mcp.git
cd nhs-frontend-mcp
npm install
npm run buildClaude Desktop (claude_desktop_config.json):
{
"mcpServers": {
"nhs-frontend": {
"command": "node",
"args": ["/path/to/nhs-frontend-mcp/dist/index.js"],
"env": {
"NHS_FRONTEND_PATH": "/path/to/nhs-frontend"
}
}
}
}Or via npx (no clone needed):
{
"mcpServers": {
"nhs-frontend": {
"command": "npx",
"args": ["nhs-frontend-mcp"],
"env": {
"NHS_FRONTEND_PATH": "/path/to/nhs-frontend"
}
}
}
}Variable | Description | Default |
| Path to your nhsuk-frontend clone |
|
| How often to pull updates. Set to |
|
npm run build # compile
npm start # run
node test.mjs # run tests (65 assertions)src/
index.ts # server entry, tool handlers, resource handlers
components.ts # component discovery, file reading, macro option parsing
format.ts # markdown output formatting
sync.ts # git pull on startup + interval
types.ts # shared interfacesMIT
This server cannot be deployed
Find UI components and themes, retrieve code, and generate with hosted 21st AI when enabled.
Serves your design system and coding standards to coding agents, so they stop guessing.
Code intelligence for LLMs. Analyze, search, and retrieve code from any public git repository.
Connect AI assistants to your GitHub-hosted Obsidian vault to seamlessly access, search, and analy…
