# Kodza

Lets your assistant pull exact markup for buttons, links and other interface pieces written in plain HTML, CSS and JavaScript.

- MCP server · `type=mcp` · Claude Code, Codex, Cursor, GitHub Copilot, Windsurf (Devin Desktop), Cline, Zed, Gemini CLI
- Author: kodza-dev
- License: not stated · policy=link-only · description only; the file stays with the author
- Source: https://github.com/kodza-dev/kodza
- Updated: 2026-10-24
- HTML: https://affpapa.org/en/nevibecode/mcp/kodza

## What it does

Kodza is a component catalogue with an MCP server in front of it. The assistant calls `search_components` to locate an element from a description like a fill on hover or a header that sticks, then `get_component` hands back the HTML, CSS and JS, the available settings, and where the files belong. Nothing is built or bundled, so the same code drops into a bare page, WordPress, Shopify or React.

The server is read-only and never writes to your project. No account, no API key. Prefer to keep traffic local? `npx -y kodza-mcp` starts the same server on your machine, which means Node.js and npm access are required.

Component styles stay inside `kodza-` classes, so a site's own rules do not bleed in. Appearance is controlled with CSS variables named `--kz-…`, while variants come as modifier classes or `data-` attributes. Content added after load is handled by the `kodza:init` and `kodza:destroy` events.

## Requirements
- Needs: Node.js (commands run via npx)
- Remote server: `https://kodza.dev/api/mcp`

## Install

### Claude Code (native platform)

1. **Platform CLI: remote server**
```bash
claude mcp add --transport http kodza https://kodza.dev/api/mcp
```

2. **Platform CLI**
```bash
claude mcp add kodza -- npx -y kodza-mcp
```

### Codex

1. **Platform CLI: remote server**
```bash
codex mcp add kodza --url https://kodza.dev/api/mcp
```

2. **Platform CLI**
```bash
codex mcp add kodza -- npx -y kodza-mcp
```

### Cursor

**Config file**
File `.cursor/mcp.json`:
```json
{
    "mcpServers": {
        "kodza": {
            "url": "https://kodza.dev/api/mcp"
        }
    }
}
```
File `.cursor/mcp.json`:
```json
{
    "mcpServers": {
        "kodza": {
            "command": "npx",
            "args": [
                "-y",
                "kodza-mcp"
            ]
        }
    }
}
```

### GitHub Copilot

**Config file**
File `.vscode/mcp.json`:
```json
{
    "servers": {
        "kodza": {
            "type": "http",
            "url": "https://kodza.dev/api/mcp"
        }
    }
}
```
File `.vscode/mcp.json`:
```json
{
    "servers": {
        "kodza": {
            "type": "stdio",
            "command": "npx",
            "args": [
                "-y",
                "kodza-mcp"
            ]
        }
    }
}
```

### Gemini CLI

1. **Platform CLI: remote server**
```bash
gemini mcp add -t http kodza https://kodza.dev/api/mcp
```

2. **Platform CLI**
```bash
gemini mcp add kodza npx -y kodza-mcp
```

## When to use it
- find a finished button from a plain description and drop its code into a project
- copy component markup and styles without a bundler or package install
- reuse one element across a plain page, WordPress or React
- tune a component's look through CSS variables and modifier classes
- initialise components that arrive after an AJAX page update

## Example prompts
- Find the Kodza button that fills from the cursor and add it to my hero section
- Pull the sticky header component from Kodza and tell me which files go where
- Change the fill colour on that Kodza button using the `--kz-…` variables

## Similar
- [modern-web-guidance](https://affpapa.org/en/nevibecode/skills/modern-web-guidance.md) — skill · 35600 installs
- [vanilla-web](https://affpapa.org/en/nevibecode/skills/vanilla-web.md) — skill · 666 installs
- [preline-mcp](https://affpapa.org/en/nevibecode/skills/preline-mcp.md) — skill · 349 installs
- [daisyui](https://affpapa.org/en/nevibecode/skills/bobmatnyc-daisyui.md) — skill · 903 installs
- [huashu-design-html-native](https://affpapa.org/en/nevibecode/skills/huashu-design-html-native.md) — skill · 426 installs
- [content-driven-development](https://affpapa.org/en/nevibecode/skills/content-driven-development.md) — skill · 1600 installs

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md