API Reference

// Agent calls this at the start of a UI task
const designSystem = await mcp.call("get_design_system");

// Or fetch a specific section to reduce token usage
const colourSystem = await mcp.call("get_design_system", {
  section: "colour"
});

// Get all CSS tokens
const tokens = await mcp.call("get_tokens", { format: "css" });

// Get only colour tokens as JSON
const colours = await mcp.call("get_tokens", {
  format: "json",
  type: "colour"
});

// Get Tailwind theme extension
const tailwindTheme = await mcp.call("get_tokens", {
  format: "tailwind"
});

// Browse the full token catalogue
const catalogue = await mcp.call("list-tokens");

// Only the colour tokens, dark-mode values tagged
const colours = await mcp.call("list-tokens", {
  category: "colour"
});
// Returns entries like:
// { name: "--color-primary", value: "#6366F1", dark: "#818CF8", category: "colour" }

// Get the Button component spec before building it
const buttonSpec = await mcp.call("get_component", {
  name: "Button"
});

// Returns: anatomy, token mappings for default/hover/focus/active/disabled/loading/error,
// and a full TSX example using the design system tokens

// Discover all available components
const components = await mcp.call("list_components");

// Structured output for programmatic use
const json = await mcp.call("list_components", { format: "json" });

// Returns an array like:
// [
//   { name: "Button", description: "Primary action element", variants: 4 },
//   { name: "Card", description: "Content container", variants: 2 },
//   ...
// ]

const result = await mcp.call("check_compliance", {
  code: `
    <div style={{ color: "#6366f1" }}>
      <button className="bg-blue-500 text-white px-4 py-2">
        Submit
      </button>
    </div>
  `,
  format: "json"
});

// Returns violations with nearest-token suggestions:
// [
//   { rule: "hardcoded-colours", severity: "warning", line: 2,
//     value: "#6366f1", suggestion: "--color-primary" },
//   { rule: "missing-token-reference", severity: "warning", line: 3 }
// ]

// Render a component for visual review
await mcp.call("preview", {
  code: `
    export default function PricingCard({ plan, price }: { plan: string; price: string }) {
      return (
        <div className="rounded-xl border border-gray-200 p-6 bg-white">
          <h3 className="text-lg font-semibold text-[#0a0a0a]">{plan}</h3>
          <p className="text-3xl font-bold text-gray-900 mt-2">{price}</p>
        </div>
      );
    }
  `,
  props: { plan: "Pro", price: "£19/mo" }
});
// Opens/refreshes localhost:4321 with the rendered component

// Push a generated component to Figma for designer review (capture mode)
await mcp.call("push_to_figma", {
  code: `
    export default function HeroBanner() {
      return (
        <section className="bg-[var(--color-bg-surface)] px-8 py-16">
          <h1 className="text-5xl font-black text-[var(--text-primary)]">
            Your AI builds on-brand.
          </h1>
        </section>
      );
    }
  `,
  pageName: "Sprint 3 -  Components",
  frameName: "HeroBanner / Desktop"
});

// Push as editable Figma objects (native mode, no Playwright needed)
await mcp.call("push_to_figma", {
  code: `
    export default function HeroBanner() {
      return (
        <section className="bg-[var(--color-bg-surface)] px-8 py-16">
          <h1 className="text-5xl font-black text-[var(--text-primary)]">
            Your AI builds on-brand.
          </h1>
        </section>
      );
    }
  `,
  mode: "native",
  pageName: "Sprint 3 -  Components"
});

// Push tokens to an existing Figma file
await mcp.call("push_tokens_to_figma", {
  fileKey: "EHmQZ1wq5qHUcifyRYtiBC"
});

// Push tokens to a new Figma file
await mcp.call("push_tokens_to_figma");

// Capture a reference site into Figma
await mcp.call("url_to_figma", {
  url: "https://linear.app",
  pageName: "Reference -  Linear",
  viewports: [
    { width: 1440, height: 900 },
    { width: 390, height: 844 }
  ]
});
// Creates annotated frames in Figma with the captured screenshots

// Design a dashboard directly in Figma using your tokens
await mcp.call("design_in_figma", {
  prompt: "A settings page with sidebar navigation and dark theme",
  fileKey: "EHmQZ1wq5qHUcifyRYtiBC"
});
// Returns token palette + Figma MCP instructions

// Add a new brand colour token
await mcp.call("update_tokens", {
  tokens: { "--color-brand": "#6366F1", "--color-brand-hover": "#7577F3" },
  format: "css"
});

// Update only the dark-mode value, leaving light untouched
await mcp.call("update_tokens", {
  tokens: { "--color-brand": "#818CF8" },
  mode: "dark"
});

// Get all reference screenshots
const screenshots = await mcp.call("get_screenshots");

// Get only the viewport-cropped screenshot
const viewport = await mcp.call("get_screenshots", {
  type: "viewport"
});

// Scan the current directory for all components and stories
const result = await mcp.call("scan_project");

// Scan a specific path for Storybook stories only
const stories = await mcp.call("scan_project", {
  path: "./src",
  type: "storybook"
});

// Returns:
// {
//   components: [
//     { name: "Button", path: "src/components/Button.tsx", importPath: "@/components/Button", props: [...] },
//     ...
//   ],
//   stories: [
//     { name: "ButtonStory", component: "Button", path: "src/stories/Button.stories.tsx" },
//     ...
//   ]
// }

// Check everything
const result = await mcp.call("check_setup");

// Check only Figma setup and auto-fix issues
const fixed = await mcp.call("check_setup", {
  focus: "figma",
  fix: true
});

const catalogue = await mcp.call("list_ui_components");

// Returns entries like:
// { name: "button", title: "Button",
//   install: "npx @layoutdesign/context add button", ... }

const selection = await mcp.call("get_selected_element");

// Returns:
// { selected: true, file: "src/components/Hero.tsx",
//   line: 42, component: "Hero", classList: "..." }

const edits = await mcp.call("get_recent_visual_edits", {
  limit: 10
});

const requests = await mcp.call("get_pending_requests");

// Returns requests with targets like:
// { text: "Make this heading smaller on mobile",
//   target: "src/components/Hero.tsx:42" }

// Claim a request before starting work
await mcp.call("mark-request", {
  id: request.id,
  status: "in-progress"
});

// Report it complete with a note
await mcp.call("mark-request", {
  id: request.id,
  status: "done",
  note: "Reduced heading to text-2xl below the md breakpoint"
});

// The screenshot stored with a pinned request
const shot = await mcp.call("get-live-screenshot", {
  request_id: request.id
});

// A fresh capture of whatever Live is showing right now
const current = await mcp.call("get-live-screenshot");

const lock = await mcp.call("lock_file", {
  path: "src/components/Hero.tsx",
  ttl_seconds: 120
});

await mcp.call("unlock_file", {
  lock_id: lock.lock_id
});