DRYL Components
Blazor UI library DRYL: find components, read their exact API and tokens, validate Razor markup.
Should I use this
Quality & Safety
Based on automated analysis of tool definitions and protocol compliance.
Context Cost
This is the approximate number of tokens consumed each time the server's tools are loaded into a model's context. Higher counts reduce the attention available for other tasks.
Install
One-Click Install
Add this to your `claude_desktop_config.json` file:
{
"mcpServers": {
"components": {
"url": "https://components.dryl.dev/mcp"
}
}
}Remote endpoints
https://components.dryl.dev/mcpstreamable-httpWhat it can do
Tool inventory
Tools (4)
🟢search_components(query, limit)
Find DRYL Blazor components (DRYL.Components and DRYL.Components.Agents) by name, title, category or purpose. Use this first when you need a component for a job; then call get_component for its exact API.
Input Schema
{
"type": "object",
"properties": {
"query": {
"description": "What to look for: a component name with or without the 'Dryl' prefix ('button', 'DrylDatePicker'), a category ('Inputs') or a purpose ('date', 'chart', 'streaming text').",
"type": "string"
},
"limit": {
"description": "Maximum number of results, 1–50. Default 10.",
"type": "integer",
"default": 10
}
},
"required": [
"query"
]
}Output Schema
{
"type": "object",
"properties": {
"version": {
"type": "string"
},
"results": {
"type": "array",
"items": {
"type": "object",
"properties": {
"name": {
"type": "string"
},
"category": {
"type": "string"
},
"summary": {
"type": "string"
},
"aiAware": {
"type": "boolean"
},
"docsUrl": {
"type": [
"string",
"null"
]
}
},
"required": [
"name",
"category",
"summary",
"aiAware",
"docsUrl"
]
}
},
"hint": {
"type": [
"string",
"null"
]
}
},
"required": [
"version",
"results",
"hint"
]
}🟢get_component(name)
The exact public API of one DRYL component: every parameter with type, default and description, the members of every enum it uses, its public methods and a canonical Razor example. DRYL variants are enums, never strings: write an enum value as qualifiedName.Member (e.g. Variant="DrylButton.ButtonVariant.Secondary") — many enums are nested in their component, so the bare enum name does not compile.
Input Schema
{
"type": "object",
"properties": {
"name": {
"description": "Component name, case-insensitive, with or without the 'Dryl' prefix: 'DrylButton', 'button'.",
"type": "string"
}
},
"required": [
"name"
]
}Output Schema
{
"type": "object",
"properties": {
"version": {
"type": "string"
},
"name": {
"type": "string"
},
"category": {
"type": "string"
},
"summary": {
"type": "string"
},
"aiAware": {
"type": "boolean"
},
"docsUrl": {
"type": [
"string",
"null"
]
},
"apiUrl": {
"type": "string"
},
"parameters": {
"type": "array",
"items": {
"type": "object",
"properties": {
"name": {
"type": "string"
},
"type": {
"type": "string"
},
"default": {
"type": "string"
},
"required": {
"type": "boolean"
},
"kind": {
"type": "string"
},
"cascading": {
"type": "boolean"
},
"description": {
"type": "string"
}
},
"required": [
"name",
"type",
"default",
"required",
"kind",
"cascading",
"description"
]
}
},
"enums": {
"type": "array",
"items": {
"type": "object",
"properties": {
"name": {
"type": "string"
},
"qualifiedName": {
"type": "string"
},
"description": {
"type": "string"
},
"members": {
"type": "array",
"items": {
"type": "object",
"properties": {
"name": {
"type": "string"
},
"description": {
"type": "string"
}
},
"required": [
"name",
"description"
]
}
}
},
"required": [
"name",
"qualifiedName",
"description",
"members"
]
}
},
"methods": {
"type": "array",
"items": {
"type": "object",
"properties": {
"signature": {
"type": "string"
},
"returnType": {
"type": "string"
},
"description": {
"type": "string"
}
},
"required": [
"signature",
"returnType",
"description"
]
}
},
"example": {
"type": [
"string",
"null"
]
}
},
"required": [
"version",
"name",
"category",
"summary",
"aiAware",
"docsUrl",
"apiUrl",
"parameters",
"enums",
"methods",
"example"
]
}🟢get_tokens(category)
The CSS custom properties DRYL styles itself with, grouped (colors, glass, accent, spacing, radius, motion, …), with the dark value and — where light mode differs — the light value. Reference these with var(--name) in your CSS instead of writing literal colors, sizes or durations; DRYL follows the user's color mode through them.
Input Schema
{
"type": "object",
"properties": {
"category": {
"description": "Optional group name, case-insensitive ('Motion', 'Spacing'). Omit to get every group.",
"type": [
"string",
"null"
],
"default": null
}
}
}Output Schema
{
"type": "object",
"properties": {
"version": {
"type": "string"
},
"categories": {
"type": "array",
"items": {
"type": "object",
"properties": {
"name": {
"type": "string"
},
"description": {
"type": "string"
},
"tokens": {
"type": "array",
"items": {
"type": "object",
"properties": {
"name": {
"type": "string"
},
"dark": {
"type": "string"
},
"light": {
"type": [
"string",
"null"
]
},
"note": {
"type": [
"string",
"null"
]
}
},
"required": [
"name",
"dark",
"light",
"note"
]
}
}
},
"required": [
"name",
"description",
"tokens"
]
}
}
},
"required": [
"version",
"categories"
]
}🟢validate_markup(razor)
Check a Razor snippet's <Dryl…> tags against DRYL's real API before you finish: unknown components, unknown parameters, and enum parameters given a string or a member that does not exist — each with a suggested fix. Call it on every DRYL markup you write or change. It scans tags; it does not compile Razor.
Input Schema
{
"type": "object",
"properties": {
"razor": {
"description": "The Razor markup to check — a component, a page or a fragment; up to 50,000 characters.",
"type": "string"
}
},
"required": [
"razor"
]
}Output Schema
{
"type": "object",
"properties": {
"version": {
"type": "string"
},
"valid": {
"type": "boolean"
},
"findings": {
"type": "array",
"items": {
"type": "object",
"properties": {
"line": {
"type": "integer"
},
"kind": {
"type": "string"
},
"severity": {
"type": "string"
},
"message": {
"type": "string"
},
"suggestion": {
"type": [
"string",
"null"
]
}
},
"required": [
"line",
"kind",
"severity",
"message",
"suggestion"
]
}
},
"notChecked": {
"type": "string"
}
},
"required": [
"version",
"valid",
"findings",
"notChecked"
]
}Community
Evidence