# OnBrand UI: UI components for AI coding tools, in your brand > Connect OnBrand UI to Claude Code, Cursor or VS Code over MCP and get production-ready UI components in your own colours, type and spacing. Join the waitlist. Source: https://onbrandui.com --- In development. Early access by waitlist. # UI components for AI coding tools, in your brand. Connect OnBrand UI to Claude Code, Cursor or VS Code. Ask for a pricing table or a sign-up form, and the component that lands in your project uses your colours, type and spacing, from a set your team has approved. ## AI tools write UI that isn't yours. Ask an AI coding tool for a settings page and it will produce one quickly. It will also hard-code colours, ignore the components you already have, and guess at spacing. Someone then spends the afternoon making it look like your product. Large teams have hit this in public. monday.com's engineers [described AI output that hard-coded colours and skipped their existing components](https://engineering.monday.com/?p=11682), and built an internal server to give their tools the design system. Atlassian [tested ways of passing design context to AI tools](https://www.atlassian.com/blog/ai-at-work/atlassians-design-md-is-here-what-we-learned-testing-portable-design-context-in-practice) and found an MCP server worked better than a written style file. OnBrand UI gives every team that kind of connection, with the components already built. ## How it will work 1. Step 1 Add your brand Upload your design tokens: colours, fonts, spacing, radius. Or start from one of our themes and adjust it. 2. Step 2 Connect your AI tool Sign in once from Claude Code, Cursor or VS Code. OnBrand UI appears as a tool your assistant can call. claude mcp add onbrand --transport http 3. Step 3 Ask for what you need "Add a pricing section with three plans." The component is written into your project as source code, already in your brand. [Read the technical detail](https://onbrandui.com/how-it-works) ## For teams, the same components in every developer's tools. Admins choose which components AI tools are allowed to use, and every install comes back in the company's theme. New starters, contractors and agencies all build with the same parts. **Your tokens** One theme, applied to every component the tools install. **Approved set** AI tools can only reach the components your admins switch on. **Accessible by default** Built and tested to WCAG 2.2 AA before release. **Seats and billing** One account for the team, managed in one place. ## Questions ### What is OnBrand UI? + OnBrand UI is a library of UI components that AI coding tools can install for you. You connect it to a tool such as Claude Code or Cursor over MCP, ask for a component in plain English, and the code that arrives already uses your colours, type, spacing and corner radius. ### Can I use it now? + Not yet. OnBrand UI is in development. Join the waitlist and we will email you when early access opens. ### Which AI tools will it work with? + Any tool that supports remote MCP servers. That includes Claude Code, Cursor, VS Code with Copilot and Windsurf. We will confirm the full list, with setup steps for each, before launch. ### Who writes the components? + We do. Every component is original work, built and tested by us. We do not copy, scrape or repackage other libraries. ### Will the components be accessible? + That is the standard we are building to: each component is tested against WCAG 2.2 level AA before it is added to the library, covering keyboard use, focus states, labels and contrast. ### How much will it cost? + There will be a free tier, a monthly plan for individuals and plans for teams. We will publish prices before launch, and people on the waitlist will see them first. ## Join the waitlist We'll email you when early access opens. Tell us which tools you use and we'll make sure they're supported first.