Free premium UI components in plain HTML, CSS and vanilla JS, for AI coding assistants.
Call this server's tools from your browser. Nothing to install.
Requests go through mcptry because browsers can't call most MCP servers directly. Header values are sent to the server for that request only and are never stored or logged.
Tool list from our last check. Connect live to refresh it.
The full code of one Kodza component (HTML, CSS and, when it has one, vanilla JS), its API (CSS variables with defaults, modifier classes, data attributes, events), what each key does when it takes the keyboard, its dark-mode values and how to install it. Its CSS and JS are also served as exact files, listed with their curl download commands; inline: false leaves them out of the answer. target narrows the install notes to one stack.
The component slug, from search_components (e.g. "button-fill")
false: leave the CSS and JS out of the Code section (you download those files with the given commands). true by default, for assistants that cannot run commands
Where it goes: html (a plain page), artifact (a Claude artifact on claude.ai), wordpress, shopify or react. All of them when omitted
The full code of one Kodza component (HTML, CSS and, when it has one, vanilla JS), its API (CSS variables with defaults, modifier classes, data attributes, events), what each key does when it takes the keyboard, its dark-mode values and how to install it. Its CSS and JS are also served as exact files, listed with their curl download commands; inline: false leaves them out of the answer. target narrows the install notes to one stack.
| Argument | Type | Description |
|---|---|---|
| slug* | string | The component slug, from search_components (e.g. "button-fill") |
| inline | boolean | false: leave the CSS and JS out of the Code section (you download those files with the given commands). true by default, for assistants that cannot run commands |
| target | string | Where it goes: html (a plain page), artifact (a Claude artifact on claude.ai), wordpress, shopify or react. All of them when omitted |
{
"type": "object",
"required": [
"slug"
],
"properties": {
"slug": {
"type": "string",
"description": "The component slug, from search_components (e.g. \"button-fill\")"
},
"inline": {
"type": "boolean",
"description": "false: leave the CSS and JS out of the Code section (you download those files with the given commands). true by default, for assistants that cannot run commands"
},
"target": {
"enum": [
"html",
"artifact",
"wordpress",
"shopify",
"react"
],
"type": "string",
"description": "Where it goes: html (a plain page), artifact (a Claude artifact on claude.ai), wordpress, shopify or react. All of them when omitted"
}
}
}Find Kodza UI components (plain HTML/CSS/vanilla JS) by what they do or look like, e.g. "button fill hover", "image slider", "sticky header", "date picker". Leave query empty to list a whole category. Returns slugs to pass to get_component.
| Argument | Type | Description |
|---|---|---|
| limit | integer | How many results, 12 by default |
| query | string | Words describing the component or effect, in English |
| category | string | buttons, links, text, images, cards, navigation, scroll, transitions, forms, overlays, feedback or data |
{
"type": "object",
"properties": {
"limit": {
"type": "integer",
"maximum": 50,
"minimum": 1,
"description": "How many results, 12 by default"
},
"query": {
"type": "string",
"description": "Words describing the component or effect, in English"
},
"category": {
"type": "string",
"description": "buttons, links, text, images, cards, navigation, scroll, transitions, forms, overlays, feedback or data"
}
}
}