MCP Server — Veritheme

Install

One command in Claude Code, or one entry in any MCP client's config.

Claude Code

claude mcp add veritheme -- npx -y @veritheme/mcp-server

Cursor, Windsurf, Claude Desktop and other clients

{
  "mcpServers": {
    "veritheme": {
      "command": "npx",
      "args": ["-y", "@veritheme/mcp-server"]
    }
  }
}

A client loads its servers when a session starts: after adding Veritheme, start a new session or restart the client.

View on npm

Use your own system

Out of the box the server answers with the default theme. Give it your system and every answer uses your tokens.

Create your system in the builder and download its package. Keep veritheme.system.json and tokens.json in the project root. get_project_system, get_tokens and get_theme then read them instead of the defaults.

The server looks in the folder the client starts it in. If that is not your project, point it there:

{
  "mcpServers": {
    "veritheme": {
      "command": "npx",
      "args": ["-y", "@veritheme/mcp-server"],
      "env": { "VERITHEME_PROJECT_DIR": "/path/to/your/project" }
    }
  }
}

Check every file

The rules ask the AI to run validate_markup. A hook makes sure it does, on every file it writes.

Claude Code

{
  "hooks": {
    "PostToolUse": [
      {
        "matcher": "Write|Edit|MultiEdit",
        "hooks": [
          { "type": "command", "command": "npx -y @veritheme/mcp-server hook" }
        ]
      }
    ]
  }
}

Put this in your project's .claude/settings.json. After every write, the hook lints the file. An error goes straight back to the AI, which fixes it before it moves on. A warning reaches it as a note. HTML, Astro, Vue, Svelte, JSX and TSX are checked; files without a vt- class, and anything in node_modules or a build folder, are skipped.

Any client, CI or your terminal

npx -y @veritheme/mcp-server validate src

Pass files or folders. The command exits with 1 when a file has an error, so it can fail a CI job; warnings never do. Add --format json for machine-readable findings.

Figma to code

Turn a Figma frame drawn with the Veritheme library into a page built from the same components.

Connect Figma's own MCP server next to this one. Then run the figma-to-page prompt with a link to the frame (Claude Code lists it among its slash commands), or just ask:

Build this frame with Veritheme: https://www.figma.com/design/…?node-id=12-345

get_figma_reader returns a read-only script, and the agent runs it through the Figma MCP.
figma_to_markup turns what it read into HTML. Each instance becomes its component and variant, each auto-layout frame becomes layout, and anything it cannot translate is listed rather than guessed.
validate_markup checks the page against your system before you look at it.

Draw with instances of the library's components and keep values bound to its variables. A detached layer or a raw value has no component behind it, so it cannot be translated.

Get the Figma plugin

Tools

21 tools, grouped by what the AI uses them for.

Tool	What it does
Build with the library
`search`	Finds components, classes, tokens and snippets by name or purpose.
`list_components`	Lists every component by category.
`get_component`	Classes, variants, sizes, anatomy, states, contract and a snippet for one component.
`get_snippet`	Ready HTML for a component, or one of its named examples.
`list_patterns`	Lists the page patterns: dashboard, settings, sign-in, chat, mail and more.
`get_pattern`	The skeleton of a proven screen, to start a page from.
`get_starter`	A page shell with the CSS and JS links, dark mode and theme set up.
`get_guidelines`	The rules the AI builds by: components first, the spacing scale, color roles.
Design to code
`get_figma_reader`	A read-only script that reads a Figma frame through the Figma MCP.
`figma_to_markup`	Turns that frame into Veritheme HTML and lists what it could not translate.
Check the result
`validate_markup`	Lints HTML against the system: unknown or off-scale classes, unlabeled icon buttons, hard-coded colors and more.
`audit_contrast`	Checks every color pair the components use against WCAG AA, light and dark.
Tokens and themes
`get_project_system`	Reads your system package from the project, so the AI works from your tokens.
`get_tokens`	Design tokens: colors, spacing, radius, type, shadows.
`get_theme`	The active theme: yours when the project has one, else the default.
`explain_token`	What a token is for, what it resolves to and which components read it.
`derive_theme`	A whole theme from one brand color, with the builder’s own engine.
`get_theme_css`	The CSS custom properties for a theme, ready to paste.
Your own components
`list_project_components`	Custom blocks already built for this project.
`get_project_component`	The exact markup of one, to reuse as is.
`register_project_component`	Saves a new custom block so every page and session reuses it.

In your AI pipeline

Built to be one step in the agents your team already runs.

The server is a local process that talks over stdio. It makes no network requests, needs no account, and writes only to veritheme.project.json in your project, when the AI saves a custom component.

Add it once, and every agent builds with the same components, tokens and checks. Pin a version in the config to update on your own schedule.