Kodza MCP Server已验证已精选

What is Kodza?

Kodza is a free library of premium UI components and effects in plain HTML, CSS and vanilla JavaScript. No framework, no build step, no API key. Copy. Paste. Ship.

This MCP server lets your assistant find a component, get its exact code and wire it into a plain page, a WordPress theme, a Shopify section, a React app or a Claude artifact.

Install

Claude Code:

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

Codex:

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

Cursor (~/.cursor/mcp.json):

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

VS Code:

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

Rather run it locally (Claude Desktop, or to keep the search on your machine)? npx -y kodza-mcp, Node 18 or newer.

Then ask

"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, or lists a category.
get_component	One component: its API (--kz-* variables, modifier classes, data- attributes, events), what each key does, its dark-mode values, install notes for html, artifact, wordpress, shopify or react, and the full code.

What every component does

• Its CSS only targets kodza- classes: it never touches your theme.
• Dark-mode values included.
• prefers-reduced-motion, keyboard and WCAG AA checked on every one.
• Any number per page. Content loaded later (AJAX, SPA): kodza:init starts it, kodza:destroy puts the original markup back.

Privacy

Your search words are thrown away with the answer: never stored, never logged. Kodza only counts which component was fetched, by which assistant, for which target.