Artelier UI Kit · MCP server

Apps built from the kit, not from guesses.

Ask a model for a screen and it invents class names, props and colours that look plausible and do not exist. So the kit has its own MCP server, and that is how new studio work starts: the model is handed the real thing — every component's schema and source, the tokens and the rules, in Vue or in Rust — and builds from nothing else.

01
It reads the catalogue
Before writing anything, the model lists what exists. It cannot reach for a component the kit does not have.
02
It reads the schema
Props, types and required fields come from the components themselves, not from a description that has drifted.
03
It follows the rules
The design rules travel with the schema: the destructive button is never the accent, every chart says what it measures.

How it is wired

The server runs locally over stdio, beside the project it is building. It reads the kit from disk on every call, so it can never describe a component that has since changed.

Claude Code

# In a studio project, with the kit in ads/
cd ads/mcp && npm install && npm run build && cd ../..
claude mcp add artelier-ui-kit -- node ./ads/mcp/dist/index.js

Claude Desktop and Cursor

json

{
  "mcpServers": {
    "artelier-ui-kit": {
      "command": "node",
      "args": ["/path/to/project/ads/mcp/dist/index.js"]
    }
  }
}

One request, start to finish

You  Build a settings screen in Dioxus: a name field, a theme switch,
     and a delete-account action.

     → get_setup { kit: "rust" }
     → get_component_schema { name: "AdsField", kit: "rust" }
     → get_component_schema { name: "AdsChoice", kit: "rust" }
     → get_component_schema { name: "AdsAlertDialog", kit: "rust" }
     → get_design_rules

     The field gets the label it requires. Delete is a destructive
     AdsButton, default weight, behind an AdsAlertDialog with focus
     on Cancel — the accent stays on Save.

What the model is given

list_components: Every component in the kit, with its category and what it is for. Vue or Rust.
get_component_schema: One component in full: props with their types, defaults and which are required, slots, events, a usage example and the source.
get_design_rules: The rules the kit is built on: grey chrome, one accent per screen, monospaced numbers, status never by colour alone.
get_setup: How to add the kit to a Nuxt app or a Dioxus app.
list_design_tokens: Every token by group: surfaces, text, elevation, radius, spacing, motion, and the data palettes.
get_utility_classes: The utility vocabulary, so layout uses the kit’s spacing rather than invented values.
list_icons: The glyph names the Icon component draws.
render_component: A self-contained HTML preview of a component, with the real stylesheets inlined.
compose_layout: Several components stacked into one previewable screen.

It reads the catalogue

It reads the schema

It follows the rules

How it is wired

One request, start to finish

What the model is given