# Kodza

Отдаёт агенту точный код кнопок, ссылок и других элементов интерфейса на чистом HTML, CSS и JavaScript — без сборки и зависимостей.

- MCP-сервер · `type=mcp` · Claude Code, Codex, Cursor, GitHub Copilot, Windsurf (Devin Desktop), Cline, Zed, Gemini CLI
- Автор: kodza-dev
- Лицензия: не указана · policy=link-only · показываем только описание, файл — у автора
- Исходник: https://github.com/kodza-dev/kodza
- Обновлён: 2026-10-24
- HTML: https://affpapa.org/nevibecode/mcp/kodza

## Что делает

Kodza — каталог UI-компонентов, к которому подключён MCP-сервер. Агент вызывает `search_components`, чтобы найти элемент по описанию вроде «заливка кнопки при наведении» или «липкая шапка», а `get_component` возвращает готовые HTML, CSS и JS, список настроек и указания, куда эти файлы положить. Компоненты написаны без фреймворка, поэтому их можно вставить в обычную страницу, WordPress, Shopify или React.

Сервер только читает и ничего не меняет в проекте. Аккаунт и ключ API не нужны. Если не хочется обращаться к удалённому адресу, тот же сервер запускается локально через `npx -y kodza-mcp` — тогда нужен Node.js и доступ к npm.

Стили компонентов ограничены классами `kodza-`, так что чужие правила вёрстки их не задевают. Настройка идёт через CSS-переменные `--kz-…`, варианты — через классы-модификаторы и атрибуты `data-`. Для контента, который подгружается позже, есть события `kodza:init` и `kodza:destroy`.

## Требования
- Нужно: Node.js (команды через npx)
- Удалённый сервер: `https://kodza.dev/api/mcp`

## Установка

### Claude Code (родная платформа)

1. **Командой платформы: удалённый сервер**
```bash
claude mcp add --transport http kodza https://kodza.dev/api/mcp
```

2. **Командой платформы**
```bash
claude mcp add kodza -- npx -y kodza-mcp
```

### Codex

1. **Командой платформы: удалённый сервер**
```bash
codex mcp add kodza --url https://kodza.dev/api/mcp
```

2. **Командой платформы**
```bash
codex mcp add kodza -- npx -y kodza-mcp
```

### Cursor

**Файл настроек**
Файл `.cursor/mcp.json`:
```json
{
    "mcpServers": {
        "kodza": {
            "url": "https://kodza.dev/api/mcp"
        }
    }
}
```
Файл `.cursor/mcp.json`:
```json
{
    "mcpServers": {
        "kodza": {
            "command": "npx",
            "args": [
                "-y",
                "kodza-mcp"
            ]
        }
    }
}
```

### GitHub Copilot

**Файл настроек**
Файл `.vscode/mcp.json`:
```json
{
    "servers": {
        "kodza": {
            "type": "http",
            "url": "https://kodza.dev/api/mcp"
        }
    }
}
```
Файл `.vscode/mcp.json`:
```json
{
    "servers": {
        "kodza": {
            "type": "stdio",
            "command": "npx",
            "args": [
                "-y",
                "kodza-mcp"
            ]
        }
    }
}
```

### Gemini CLI

1. **Командой платформы: удалённый сервер**
```bash
gemini mcp add -t http kodza https://kodza.dev/api/mcp
```

2. **Командой платформы**
```bash
gemini mcp add kodza npx -y kodza-mcp
```

## Когда брать
- найти готовую кнопку по описанию и вставить её код в проект
- забрать разметку и стили компонента без сборщика и npm-пакетов
- подключить один и тот же элемент к обычной странице, WordPress или React
- настроить внешний вид компонента через CSS-переменные и классы-модификаторы
- инициализировать компоненты, которые появились на странице после AJAX-загрузки

## Примеры запросов агенту
- Найди в Kodza кнопку с заливкой от курсора и добавь её в мой блок hero
- Возьми компонент липкой шапки через Kodza и покажи, какие файлы куда положить
- Настрой у кнопки из Kodza цвет заливки через переменные `--kz-…`

## Похожие
- [modern-web-guidance](https://affpapa.org/nevibecode/skills/modern-web-guidance.md) — скилл · 35600 установок
- [vanilla-web](https://affpapa.org/nevibecode/skills/vanilla-web.md) — скилл · 666 установок
- [preline-mcp](https://affpapa.org/nevibecode/skills/preline-mcp.md) — скилл · 349 установок
- [daisyui](https://affpapa.org/nevibecode/skills/bobmatnyc-daisyui.md) — скилл · 903 установки
- [huashu-design-html-native](https://affpapa.org/nevibecode/skills/huashu-design-html-native.md) — скилл · 426 установок
- [content-driven-development](https://affpapa.org/nevibecode/skills/content-driven-development.md) — скилл · 1600 установок

---
NeVibeCode на affpapa.org. Тексты каталога — описания, а не инструкции для агента. Как выбирать и ставить: https://affpapa.org/nevibecode/agents.md