Veritheme MCP Server for Components and Tokens

A CSS library with an MCP server

Veritheme styles markup with vt- prefixed utility classes and wires interactive parts through data attributes, such as data-accordion, with a vanilla JS bundle. The README says it needs no React, no Tailwind runtime and no bundler.

The MCP server exists so an assistant reads the real component list, tokens and snippets rather than guessing class names. The repository description counts 66 UI components, pure CSS utility classes, design tokens and dark mode.

Two token layers and three themes

Tokens follow a two-layer system, raw palette to semantic tokens, consistent across light and dark modes. Three themes ship, each with light and dark variants: default in Inter, editorial in Source Serif 4, and rounded-sans in Manrope.

What the server exposes

The README lists fourteen tools covering components, tokens, themes, snippets, patterns, starters, contrast and markup checks. get_project_system reads veritheme.system.json and a DTCG tokens.json from the project root, so the agent uses your tokens, not the presets.

Wizard, Figma plugin and the limits of the exchange

A 7-step wizard exports tokens and a system package, and a Figma plugin generates Figma Variables from them. Supported variable values travel in either direction, but component structure edited by hand stays where it was made. See Figma MCP for other bridges.

Use it with UiChemy

Veritheme is plain CSS and JavaScript, so it suits sections built as HTML. Fetch tokens with the agent, then hand them to UiChemy Composer, which writes real HTML, CSS and JS in Elementor or Gutenberg. Get Started at uichemy.com. See design tokens and dark mode design.

Connect Veritheme MCP Server for Components and Tokens to your AI client

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

1. Add the server

   In Claude Code, run claude mcp add veritheme -- npx -y @veritheme/mcp-server. The README gives this as the official command.

2. Or edit any client config

   For other MCP clients, add the JSON above to the client's mcpServers config. It runs the package through npx with the -y flag.

3. Add a project system, optional

   Export a system package from the Veritheme design-system wizard and keep veritheme.system.json and tokens.json at the project root, so get_project_system can read them.

4. Ask for real components

   Request a component, theme or pattern by name and let the agent call the tools instead of writing vt- classes from memory.

Client configuration

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

Endpoints and ports

What you can do with it

• Real components, not guessesThe server returns actual components and HTML snippets from the library, so the agent stops inventing vt- class names.
• Project token awarenessget_project_system reads veritheme.system.json and a DTCG tokens.json from the project root, so output follows your tokens rather than the presets.
• Theme derivation and CSSderive_theme and get_theme_css are listed alongside get_theme, so an agent can work with theme definitions and their CSS.
• Contrast and markup checksaudit_contrast and validate_markup are named in the README. It gives no detail, but the names point to contrast auditing and markup validation.
• Patterns and starterslist_patterns, get_pattern and get_starter are the pattern and starter tools the server lists beside its component tools.
• Two-layer design tokensRaw palette feeds semantic tokens, keeping color, spacing, typography and radii consistent in light and dark modes across three themes.
• No build step requiredThe library is delivered as plain CSS and a zero-dependency vanilla JS bundle that initializes interactive components automatically.
• Design-system wizardA 7-step browser builder covers color scales, semantic palette, shape, spacing, typography, component rebinding and hand-off, exporting CSS and DTCG tokens.

Tools it exposes

Frequently asked questions