An MCP server for Kodza: free, premium UI components and effects in plain HTML, CSS and vanilla JavaScript. Your AI assistant finds the component, gets its exact code and knows how to wire it into a plain page, WordPress, Shopify or React. No framework, no build step, no API key.

Install

Kodza runs at https://kodza.dev/api/mcp. Nothing to install: give your assistant the address.

Claude Code

claude mcp add -t http kodza https://kodza.dev/api/mcp

Codex (the CLI, the IDE extension and the app share ~/.codex/config.toml)

codex mcp add kodza --url https://kodza.dev/api/mcp

Cursor (.cursor/mcp.json for one project, ~/.cursor/mcp.json for all)

{
  "mcpServers": {
    "kodza": { "url": "https://kodza.dev/api/mcp" }
  }
}

From a project file, the server starts switched off: turn it on in Customize → MCPs.

VS Code

code --add-mcp '{"name":"kodza","type":"http","url":"https://kodza.dev/api/mcp"}'

That one is for every project. For one project only, in .vscode/mcp.json:

{
  "servers": {
    "kodza": { "type": "http", "url": "https://kodza.dev/api/mcp" }
  }
}

Run it locally

Rather keep the search on your machine, or using a client that only starts local servers (like Claude Desktop's claude_desktop_config.json)? The same server runs through npx (Node 18 or newer):

{
  "mcpServers": {
    "kodza": { "command": "npx", "args": ["-y", "kodza-mcp"] }
  }
}

In a terminal: claude mcp add kodza -- npx -y kodza-mcp, codex mcp add kodza -- npx -y kodza-mcp.

Server won't start? spawn npx ENOENT, or No such file or directory in VS Code: the editor can't find your Node. Give command the full path from which npx, and the server "env": { "PATH": "<that folder>:/usr/bin:/bin" }: npx needs node right next to it.

Then ask

Ask for what you need: "add a button that fills from the cursor", "a sticky header that hides while I read, in my WordPress theme", "a date picker for this form".

Tools

Tool What it does

search_components Finds components by what they do or look like (query), or lists a category. Returns slugs.

get_component One component: description, API (CSS variables and their defaults, modifier classes, data- attributes, events), what each key does (for the components that take the keyboard), its dark-mode values, how to install it (target: html, artifact for a Claude artifact, wordpress, shopify, react), its files and the full code. inline: false leaves the CSS and JS out of the code, for an assistant that downloads the files.

Tool	What it does
`search_components`	Finds components by what they do or look like (`query`), or lists a `category`. Returns slugs.
`get_component`	One component: description, API (CSS variables and their defaults, modifier classes, `data-` attributes, events), what each key does (for the components that take the keyboard), its dark-mode values, how to install it (`target`: `html`, `artifact` for a Claude artifact, `wordpress`, `shopify`, `react`), its files and the full code. `inline: false` leaves the CSS and JS out of the code, for an assistant that downloads the files.

Exact files, not retyped code

An assistant that can run commands should not retype a component: a CSS with its theme guard runs to several hundred lines, retyping it costs thousands of tokens and can drop or change a line. Each component's CSS, JS and HTML are served as files, byte for byte what the Kodza site copies, and get_component gives the commands:

curl -fsSL --create-dirs -o kodza/kodza-drawer.css https://kodza.dev/registry/drawer/kodza-drawer.css
curl -fsSL --create-dirs -o kodza/kodza-drawer.js https://kodza.dev/registry/drawer/kodza-drawer.js

The install notes then load those files (a <link> and a <script defer>, wp_enqueue_style and wp_enqueue_script, Shopify assets/, Next.js public/). Only the HTML is pasted and adapted. The code stays inline by default, for assistants that can't run anything (a chat, a Claude artifact); inline: false drops the CSS and JS blocks to save the reading too.

How Kodza components behave

Three pieces, pasted as they are: HTML, CSS, and often a small vanilla JS file.
The CSS only targets kodza- classes: it never touches the rest of the page or the theme.
Restyle with the --kz-… variables, the modifier classes and the data- attributes.
Dark mode: every component comes with its values for a dark background, ready for @media (prefers-color-scheme: dark) or your own dark selector.
They take the page's font. The Kodza look is Geist (Google Fonts).
Any number of instances per page; one copy of the JS serves them all.
Content added after the page load (AJAX, SPA, a builder preview): document.dispatchEvent(new CustomEvent('kodza:init', { detail: { root } })) starts it, 'kodza:destroy' stops it and puts the original markup back.
prefers-reduced-motion, keyboard and WCAG AA are checked on every component.

What Kodza counts

Kodza counts which components AI assistants fetch, to know what is actually used: the component, the assistant's name (as it gives it when connecting, like claude-code or cursor-vscode) and the target, when one was asked for (html, artifact, wordpress, shopify, react). That's all.

Through kodza.dev/api/mcp, your search words reach the server to run the search, and are thrown away with the answer: never stored, never logged. Your files and your code stay on your machine: the tools only take a few words and a slug. With the local server (npx), the search itself runs on your machine.

Options

KODZA_REGISTRY points the local server at another copy of the catalogue: a URL, or a local folder that contains registry/ and components/ (the library's build output). Default: https://kodza.dev. The download commands then point at that copy too (file:// for a folder).

KODZA_REGISTRY=http://localhost:5180 npx -y kodza-mcp

Hosting your own copy: http.js exports handle(request, { source }), which takes a web Request and returns its Response (the server is stateless, with no dependency).

License

The Kodza License, like the rest of Kodza: use the components in any project, personal, client or commercial, no attribution required; don't resell or redistribute them as such. Full text in LICENSE.