Kodza MCP server

Kodza

UI components your AI can fetch. Plain HTML, CSS and JavaScript: no framework, no build step, no dependencies.

kodza.dev · Catalogue · Docs · Request a component

Just ask

Kodza is an MCP server too, at https://kodza.dev/api/mcp (Streamable HTTP). Free, no account, no API key. Plug it into your AI once:

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

Then ask in your own words: "Add the Kodza fill button to my hero." It gets the exact files in this repository, not its best guess, and where they go.

In your editor

Codex

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

VS Code (GitHub Copilot)

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

Cursor (~/.cursor/mcp.json)

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

Rather keep it on your machine? npx -y kodza-mcp runs the same server locally (kodza-mcp). Everything else in the docs.

What it does

Read-only: it hands out code and never touches your project. It counts which components get fetched, and by which assistant; nothing you type is kept.

Or take the files

Each folder in components/ is one component: the HTML, the CSS and, when it needs one, the JS. Link the CSS, paste the HTML, load the JS. It lands in a bare HTML page, WordPress, Shopify or React, because it's just code.

Written like it's going live tomorrow. Because it probably is.

• The CSS only touches kodza- classes. A generated theme guard keeps your site's CSS off the component.
• Settings are CSS variables (--kz-…), variants are modifier classes or data- attributes.
• As many instances as you like on one page, one copy of the JS for all of them.
• Keyboard, visible focus and prefers-reduced-motion, on every one.
• kodza:init and kodza:destroy for content loaded later: AJAX themes, Swup, React.

The components

112 of them, and counting. Each name opens its folder, each demo runs on kodza.dev.

Buttons

Shortened. The full README is on GitHub.