brandrail
Supports Angular projects by providing Brandrail design-system guidelines, tokens, component docs, page templates, and validation of generated Angular UI.
Provides a migration map describing what Brandrail design-system components replace Bootstrap pieces.
The checker reads CSS, allowing generated styles to be validated against Brandrail brand rules.
Provides a migration map describing what Brandrail design-system components replace MUI pieces.
The checker reads Nunjucks templates so generated UI can be validated against Brandrail brand rules.
The checker reads PHP files so generated UI can be validated against Brandrail brand rules.
Provides a migration map describing what Brandrail design-system components replace PrimeNG pieces.
Supports React projects by providing Brandrail design-system guidelines, tokens, component docs, page templates, and validation of generated React UI.
The checker reads Svelte files so generated UI can be validated against Brandrail brand rules.
This server does not currently have a deployable release on Glama. Follow the repository's setup instructions to install and configure it for your MCP client, including any required credentials and local dependencies.
Brandrail
Your design system, in every AI coding tool.
AI coding tools don't know your design system, so every screen comes out with different colours, buttons and spacing. Brandrail's MCP server gives the tool your Brand Kit and components before it writes UI, then checks what it wrote and returns the fixes, so it corrects itself before you see the code.
Seven read-only tools:
get_guidelines,get_design_tokens,find_component,get_component_docs,get_template,get_migration_map,validate_snippet.Works in React, Angular, Vue, Web Components and plain HTML. The checker also reads Svelte, CSS, PHP, Twig, Mustache, Handlebars, Nunjucks and Liquid.
Runs locally over stdio. Code is checked on your machine and never uploaded.
Try it with no account: it starts with starter tokens. Connect a free Brandrail account to use your own Brand Kit.
Use it with your AI tool
In each repo:
npx brandrail connectIt signs you in through the browser and writes the MCP config and rule files for Claude Code, Cursor, Copilot, Codex, Windsurf and Gemini CLI. The files it writes hold no key, so commit them.
You type the code it shows on the Brandrail page, so nobody can approve a terminal for you with a link. The
key is made on your machine (only its hash is sent) and saved outside the repo. To help you recognise the
request, the terminal's description (user@computer · folder) is shown on the approval page.
Or add the MCP server by hand (works without an account):
{
"mcpServers": {
"brandrail": { "command": "npx", "args": ["-y", "brandrail", "mcp"] }
}
}Cursor install link:
cursor://anysphere.cursor-deeplink/mcp/install?name=brandrail&config=eyJjb21tYW5kIjoibnB4IiwiYXJncyI6WyIteSIsImJyYW5kcmFpbCIsIm1jcCJdfQ==Set BRANDRAIL_KEY (an API key from Dashboard → Connect) to load your organisation's Brand Kit without
running connect. Full docs: https://www.brandrail.com.au/docs/connect
BRANDRAIL_KEY is only ever sent to www.brandrail.com.au (or localhost). If BRANDRAIL_API_URL points
anywhere else, the CLI says so on every run and won't send the key; sign in to that server with connect.
Related MCP server: Atelier-MCP
MCP tools
Tool | What it does |
| The project's design system rules: components to use in its framework, allowed tokens, what the checker enforces. Called once before writing UI. |
| Every colour, spacing, radius and type token with the CSS variable to use. |
| Finds the component for a need ("date picker", "primary action") with its import, rules and an example. |
| Full docs for one component in the project's framework: import or tag, props, rules, example. |
| A whole page (list, detail, form, settings, dashboard, sign-in) built from your components, with the files to create and the page's rules. |
| What replaces each piece of Material, MUI, Bootstrap, Ant, Chakra or PrimeNG. |
| Runs the checker on generated code and returns a brand score and each fix. |
The CLI
The same package is a command-line checker:
npx brandrail check --changed # only what you changed vs origin/main
npx brandrail scan http://localhost:3000 --pages 3 # a running app, in a real browser
npx brandrail migrate # what's left of Material, MUI, Bootstrap and othersEvery command and option: packages/cli/README.md and https://www.brandrail.com.au/docs/cli
Privacy
The MCP server and CLI run on your machine. Code is checked locally and never uploaded. With a key, they
fetch your Brand Kit; --upload and --report send scores and messages to your dashboard, never code.
Security details: https://www.brandrail.com.au/security
What's in this repo
packages/
cli/ the `brandrail` npm package: CLI and local MCP server
mcp/ the MCP server's tools
engine/ the checker rules engine (pure TypeScript, no runtime dependencies)
mcpb/ MCP bundle for Smithery and desktop apps
plugins/
cursor/ Cursor plugin: MCP server plus a rulepnpm install
pnpm test # engine tests
pnpm build # → packages/cli/dist/brandrail.mjsLicence
MIT, see LICENSE. The Brandrail web app (Brand Kit hosting, repo sync, GitHub App, teams) is a separate service: https://www.brandrail.com.au/pricing
Questions: hello@brandrail.com.au · Security reports: security@brandrail.com.au
Tool Schema Changelog
Recent tool additions, removals, and schema changes observed during successful MCP inspections.
Loading tool schema changelog…
This server cannot be deployed
Maintenance
Related MCP Connectors
Run accessibility, contrast, and design token audits and file QA issues from your AI coding tool.
Serves your design system and coding standards to coding agents, so they stop guessing.
Live React design-system APIs, patterns, and code validation so AI agents build real UI, not slop.
Give your agent a real design system: tokens, measured WCAG contrast, and rules to follow.
Related MCP Servers
- AlicenseNot gradedqualityBmaintenanceEnables coding agents to query a workspace's design system before writing UI and validate generated code against the same system afterward, using configurable token and component sources.13 npm1MIT
- AlicenseNot gradedqualityCmaintenanceEnables AI coding assistants to inspect frontend projects, search a curated design and motion recipe catalog, prepare and preview structured design plans, apply changes with backups and rollback, capture previews, audit UI accessibility and performance, and monitor activity via a web dashboard.13 npmMIT
- AlicenseAqualityBmaintenanceIt lets AI coding agents look up design tokens, component specifications, and prohibition rules on demand, then validate generated HTML or JSX with the same lint logic used by CI and editor hooks so violations are caught and corrected immediately. It also exposes the design constitution and rule sets as resources for reference during generation.6272 npm202MIT
- AlicenseAqualityCmaintenanceA design harness for AI coding agents. Better Design gives an agent design systems, UI and UX principles, icons and UI review: it finds or creates a design system that fits the product and installs its components, explains how sign-up, forms and onboarding should work, and reviews finished screens for readability, accessibility and unclear copy.48568MIT