Connect AI tools

One command per repo. Your AI tool asks Brandrail before it writes UI, and checks its own work before it hands it to you.

brandrail connect

npx brandrail connect

It shows a short code and opens your browser. Sign in, check the code matches, and approve.
It reads package.json to find the framework (React, Angular, Vue, Svelte, Solid, Web Components or plain HTML). Override with --framework angular.
It writes the files below, and installs the component kit if your registry uses it.

File	What it's for
`brandrail.config.json`	Your Brand Kit and component registry, and the project's own settings
`src/brandrail.tokens.css`	The Brand Kit as CSS variables; import it once at your app entry
`CLAUDE.md, AGENTS.md`	Rules for Claude Code, and for Codex and other agents
`.cursor/rules/brandrail.mdc`	Rules for Cursor
`.github/copilot-instructions.md`	Rules for GitHub Copilot
`.windsurf/rules/brandrail.md, GEMINI.md`	Rules for Windsurf and Gemini CLI
`.mcp.json, .cursor/mcp.json, .vscode/mcp.json`	The MCP server for Claude Code, Cursor and VS Code
`.claude/skills, .claude/agents`	The migration skill and agent for Claude Code

Commit them so the whole team gets the same setup: none of them hold a key. Restart your AI tool so it picks up the MCP server, then ask it for a screen.

Your key

The key is made on your machine and saved in ~/.config/brandrail/credentials.json, readable only by you. Brandrail only ever sees its hash. It lasts 90 days; revoke it any time in Connect → API keys. npx brandrail whoami shows who you're signed in as and npx brandrail logout removes the key.

Local or hosted MCP

By default the MCP server runs on your machine (npx brandrail mcp, started by the AI tool). It fetches the Brand Kit and checks code locally, so code never leaves the machine.

--report on the MCP command sends brand scores (never code) to your dashboard, so AI-tool activity shows up in Checks.
--remote on connect uses the hosted server instead. Snippets sent to validate_snippet are checked and not stored.

If your company needs approval for third-party tools, the local MCP server is the easiest to approve: nothing about your code is sent.

MCP tools

Tool	What it does
`get_guidelines`	The design system rules for this project: components to use in its framework, allowed tokens, what the Checker enforces. Called once before writing UI.
`get_design_tokens`	Every token with the CSS variable to use for it.
`find_component`	Finds the component for a need ("date picker", "primary action") with its import, rules and an example.
`get_component_docs`	Full docs for one component in the project's framework: import or tag, setup, props, rules, example.
`get_template`	A whole page (list, detail, form, settings, dashboard, sign-in) in the project's framework, built from your components and spacing scale, with the page's rules. The AI starts new pages here.
`get_migration_map`	How each piece of another UI library (Material, MUI, Bootstrap…) maps to your components.
`validate_snippet`	Runs the Checker on generated code and returns the fixes, so the AI corrects itself before you see it.

Page templates

Ask your AI tool for “a list page for orders” or “a settings page” and it starts from a Brandrail template: list, detail, form, settings, dashboard or sign-in. Each one is built from your registry's components and your spacing scale, in the project's framework (React, Angular, Vue or plain HTML), and comes with its rules: loading, empty and error states, one primary action, labels and captions, confirmations for destructive actions.

Without an AI tool, npx brandrail template list writes the same files into your project. Rename the sample data and labels; the structure already passes the Checker. If your registry has no component for a part (say, a Table), that spot gets a comment saying what goes there instead of another library.

Codex, Windsurf and Gemini

npx brandrail init --mcp prints the MCP config for tools that keep it outside the repo. The rule files for each of them are already in the repo.