MCP. Ermine UI

Two servers

Pick by where the assistant runs. Both serve the same components and themes.

Server	Local	Remote
For	Claude Code, Codex, Cursor, Claude Desktop	claude.ai and other web clients
Runs	On your computer, started by the assistant: `npx ermineui mcp`	On this website, at `/mcp`
Can change your project	Yes: sets it up, adds components, applies themes	No: hands back source, CSS and commands for you to use
Serves	The version of `ermineui` that npx installs	The latest version of this website

Local, in your editor

Add the server once. The assistant starts it when it needs it; there is nothing to keep running.

Claude Code

claude mcp add ermine -- npx -y ermineui mcp

Codex

# ~/.codex/config.toml
[mcp_servers.ermine]
command = "npx"
args = ["-y", "ermineui", "mcp"]

Cursor

.cursor/mcp.json

{
  "mcpServers": {
    "ermine": { "command": "npx", "args": ["-y", "ermineui", "mcp"] }
  }
}

Claude Desktop

Open Settings, then Developer, then Edit Config, and add the server. Claude Desktop is not opened in a project, so tell it which folder you mean, for example “set up Ermine in ~/code/my-site”.

claude_desktop_config.json

{
  "mcpServers": {
    "ermine": { "command": "npx", "args": ["-y", "ermineui", "mcp"] }
  }
}

What it can do

Tool	What it does
`list_components`	Every component and block, ticked where the project already has it.
`get_component`	A component's full source and what it depends on.
`init_project`	Writes `ermine.json` and the stylesheet, with the usual folders for Vue, Nuxt or Astro.
`add_components`	Copies components or blocks, and everything they need, into the project.
`set_theme`	Applies a style, base and accent to the project's stylesheet, or lists them.

Remote, in claude.ai

In claude.ai, open Settings, then Connectors, and choose Add custom connector. Custom connectors need a paid plan.
Name it Ermine UI and paste the address below. It needs no sign-in.
In a chat, turn the connector on from the tools menu and ask away.

Server address

https://ermineui.netlify.app/mcp

The same server works from any client that connects over HTTP, Claude Code included:

claude mcp add --transport http ermine-remote https://ermineui.netlify.app/mcp

What it can do

Tool	What it does
`list_components`	Every component and block, with a one-line summary.
`get_component`	A component's full source and what it depends on.
`get_theme`	Lists the themes, or gives the CSS and command for a style, base and accent. It can also give the whole stylesheet with them in it.
`install_instructions`	What adding components would copy, where it goes, and the commands to run.

claude.ai cannot compile .vue files, so a live preview there is the assistant's rebuild of the components in plain HTML and CSS from their source. The code it writes for you to paste uses the real components.

Prompts to try

Set up and look around

With the local server, the assistant runs these against your project.

Set this project up with Ermine UI and show me which themes are available.
Which Ermine components and blocks would I use for an online shop?
How does Ermine's select work? Read it first, then tell me its props and parts.

Pick a look

A style sets the type, weights and shapes (catalogue, editorial, soft); a base tints the greys; an accent sets the primary colour.

Make this look like an architecture portfolio: quiet, image-led, square corners.
Switch to the soft style but keep my colours.
Use the catalogue style with a slate base and a blue accent.
Give me the complete Ermine stylesheet with the editorial style and the sand base.

Build something

The assistant should read each component before writing code with it, so it uses the real props.

Build a project page for 'Stanley Hills Residence' in the editorial style: a full-bleed hero, a media-and-text section, and a list of project stats.
Build a product page for a shampoo with the product-detail block and an accordion for the ingredients, in the catalogue style.
Add a settings page with a form for name, email and notification preferences, using Ermine fields and switches.

Fine-tune

Good answers change variables after the theme blocks rather than editing component CSS.

Make the buttons pill-shaped but keep everything else from the editorial style.
I don't want to load fonts from Google. Keep the editorial style with system fonts.

Getting good results

Name Ermine UI in the prompt, at least the first time, so the assistant reaches for the server rather than writing components from memory.
Ask it to read before it writes. “Read the dialog component first” makes it use the real props and parts.
Change the look with themes and variables. Ask for a style or a variable change, such as pill-shaped buttons, rather than edits to component CSS; your changes then survive switching themes.
Fonts. Styles load their fonts from Google Fonts. To serve fonts yourself, ask the assistant to remove the fonts block at the top of the stylesheet and set--er-font-sans, --er-font-display and --er-font-prose.

Prefer to do it yourself? The installation guide covers the same steps by hand, and llms.txt gives any assistant a summary to read.