set_variables: Write CSS Custom Properties

Write CSS custom properties to the DesignJS iframe :root to update design tokens — changes are merged, persisted to .designjs.json, and applied on reload.

The set_variables tool writes CSS custom properties to the :root of the canvas iframe. Variables you set here become available throughout the canvas as design tokens — any component using var(--your-token) in its styles will reflect the change immediately. The update is a merge operation: only the keys you provide are written, and any existing keys you don’t include are preserved unchanged. The full updated map is returned so your agent can confirm the final state.

Changes made with set_variables are persisted to the cssVariables section of .designjs.json and re-applied every time the canvas reloads, making them a durable part of your design system.

Parameters

variables · object · required

A Record<string, string> of CSS custom property names (including the -- prefix) to their new values. For example: { "--brand-primary": "oklch(0.55 0.2 260)", "--radius-lg": "1rem" }. Values can be any valid CSS value string.

Response

variables · object · required

The complete updated Record<string, string> of all CSS custom properties currently applied to the canvas :root — not just the ones you changed. This is equivalent to calling get_variables immediately after the update.

Example

request — set brand color tokens

{
  "method": "tools/call",
  "params": {
    "name": "set_variables",
    "arguments": {
      "variables": {
        "--brand-primary": "oklch(0.55 0.2 260)",
        "--brand-secondary": "oklch(0.65 0.15 180)",
        "--brand-accent": "oklch(0.75 0.18 35)"
      }
    }
  }
}

response

{
  "content": [
    {
      "type": "text",
      "text": "{\"variables\": {\"--brand-primary\": \"oklch(0.55 0.2 260)\", \"--brand-secondary\": \"oklch(0.65 0.15 180)\", \"--brand-accent\": \"oklch(0.75 0.18 35)\", \"--text-primary\": \"#111827\", \"--surface-default\": \"#ffffff\"}}"
    }
  ]
}

Variables are merged into the existing set. To remove a variable, you cannot pass null or an empty string — you would need to manually edit .designjs.json or reset the canvas. When in doubt, call get_variables first to inspect what’s already defined.

Design token workflows work well as a first step: call set_variables with your complete token set before adding any components. Components you add via add_components can then reference these tokens using var(--token-name) in their style attributes.