How it works
How OnBrand UI works with your AI coding tools
OnBrand UI is a remote MCP server. Your AI coding tool connects to it, asks for a component by name, and receives finished source code already themed to your brand. This page explains each part. OnBrand UI is in development, so this describes how it is being built.
What is MCP?
MCP, the Model Context Protocol, is an open standard for connecting AI tools to outside services. A service that speaks MCP offers a list of tools the AI can call. Claude Code, Cursor, VS Code with Copilot and Windsurf can all connect to remote MCP servers.
What happens when you ask for a component
- 01
You ask in plain English
"Add a pricing section with three plans and a monthly or yearly switch."
- 02
Your assistant searches OnBrand UI
It calls the server's search tool and sees the components you have access to, with a short description of each. On a team account, that list is limited to the components your admins have approved.
- 03
The server returns themed code
OnBrand UI applies your tokens and sends back the component's source files and any small dependencies they need.
- 04
Your assistant writes it into your project
The files land in your repository like any other change, ready to review and edit. Nothing runs from our servers at runtime.
Connecting a tool
Each tool has its own way to add a remote MCP server, usually one command or one settings entry. You sign in to OnBrand UI once in the browser, and the tool keeps the connection. In Claude Code it will look like this:
claude mcp add onbrand --transport http <your OnBrand UI url>We will publish setup steps for each supported tool at launch.
Common questions
What is a design system MCP server?
It is an MCP server that gives AI coding tools access to a design system: the tokens, the components and the rules for using them. Instead of guessing what your interface should look like, the tool asks the server and uses what comes back.
Does OnBrand UI see my code?
No. Your AI tool sends OnBrand UI a request for a component, and OnBrand UI sends back the component code. Your repository stays on your machine and in your own hosting.
Which frameworks will the components support?
We are starting with React and Tailwind CSS, the combination most AI coding tools produce by default. Astro and Vue are planned next. Tell us what you use when you join the waitlist.
Do I need to install a package?
No. Components are written into your project as source files, the same way you would copy them by hand, so there is no runtime dependency on OnBrand UI.
Want early access?
Join the waitlist and tell us which tools you use.