# How it works with Claude Code and Cursor

> How OnBrand UI connects to AI coding tools over MCP, what a design system MCP server is, and what happens when your assistant asks for a component.

Source: https://onbrandui.com/how-it-works

---

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](https://modelcontextprotocol.io), 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

1. 01 You ask in plain English "Add a pricing section with three plans and a monthly or yearly switch."
2. 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.
3. 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.
4. 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:

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.