Theme

MCP Server

Let AI agents review DryUI Svelte components, fetch composed-output source, and diagnose DryUI theme CSS via the Model Context Protocol.

What is it?

@dryui/mcp is a standalone MCP server that exposes three tools to any compatible AI agent:

review

Validate Svelte component source against the DryUI spec. Returns structured JSON issues (compound component usage, prop/part mismatches, accessibility/style suggestions).

get

Retrieve copyable Svelte source for a composed output from the DryUI catalog.

diagnose

Diagnose DryUI theme CSS for missing tokens, value errors, and contrast/visibility issues. Returns a JSON theme report.

Installation

Install the MCP server package in your project.

bash
bun add @dryui/mcp

Agent setup

Standardize on one of these primary setups. Each uses the same @dryui/mcp package, but the config file path varies by client.

Use the bundled DryUI skill for conventions and add the MCP server when you want review and diagnose tools in the same session.

DryUI skill

From a clone of the dryui repo, link the bundled skill into Codex's skills directory (`$CODEX_HOME/skills`).

bash
mkdir -p "$CODEX_HOME/skills"
ln -sfn "$(pwd)/skills/dryui" "$CODEX_HOME/skills/dryui"

MCP config

Append the MCP server block to your Codex config file (project-scoped or global at ~/.codex/config.toml).

toml
[mcp_servers.dryui]
command = "npx"
args = ["-y", "@dryui/mcp"]

Review tool

The review tool validates Svelte component source code against the DryUI spec and returns a JSON report of issues (and a summary).

Input

js
// Provide the Svelte source code as code
// Optional: filename, and projectCss with --dry-* overrides
{
  code: "<Svelte source>",
  filename?: "src/components/Button.svelte",
  projectCss?: ":root{--dry-color-...: ...}"
}

What it checks

text
- Bare compound components (<Card> instead of <Card.Root>)
- Unknown components / invalid props / invalid parts
- Missing accessible labels / accessible wrappers
- Missing theme CSS import warnings (when applicable)

Diagnose tool

The diagnose tool checks DryUI theme CSS for missing tokens, value errors, and contrast/visibility issues.

Input

js
// Provide either raw CSS as css or a file path as path
{
  css?: "<css with --dry-* overrides>",
  path?: "src/themes/custom.css"
}

What it checks

text
- Missing required --dry-color-* semantic tokens
- Wrong value types (e.g. length where a color is expected)
- Low contrast / transparency / visibility problems
- Unresolvable var() references and dark/light inconsistencies

Source browsing

When you need copyable source rather than validation, use the get tool or the equivalent docs/CLI surfaces. Keep setup and component scaffolding in the docs site and CLI.

setup

Getting Started covers theme bootstrap, local linking, and SvelteKit form validation patterns.

components

Components is the detailed API surface with props, structure notes, CSS hooks, and examples.

source-backed outputs

get returns raw composed-output source, while the Blocks, Templates, and Starter kit pages expose the same source in a browsable UI.

LLM docs

Pair the MCP server with static LLM endpoints when an agent needs broad DryUI context before it starts calling tools.

llms.txt

Library overview, setup, and compact component summaries.

/llms.txt
llms-components.txt

Detailed component imports, props, styling hooks, and example snippets.

/llms-components.txt

Example prompts

These are prompts you can give to an AI agent that has the dryui MCP server connected. The agent will call the review / diagnose tools automatically.

"Review this Svelte file for DryUI spec compliance and accessibility issues."

The agent uses the review tool and returns issues with line numbers.

"I customized my theme CSS. Diagnose it for missing tokens and contrast problems."

The agent uses the diagnose tool and returns a theme diagnosis report.

"Review my component and also check whether my project theme CSS could make it invisible."

The agent uses review and (when provided) auto-diagnoses projectCss alongside the component.