Kodza — MCP-сервер для Claude Code: готовые UI-компоненты
Отдаёт агенту точный код кнопок, ссылок и других элементов интерфейса на чистом HTML, CSS и JavaScript — без сборки и зависимостей.
claude mcp add --transport http kodza https://kodza.dev/api/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.
Какие задачи решает
- найти готовую кнопку по описанию и вставить её код в проект
- забрать разметку и стили компонента без сборщика и npm-пакетов
- подключить один и тот же элемент к обычной странице, WordPress или React
- настроить внешний вид компонента через CSS-переменные и классы-модификаторы
- инициализировать компоненты, которые появились на странице после AJAX-загрузки
Примеры запросов агенту
- Найди в Kodza кнопку с заливкой от курсора и добавь её в мой блок hero
- Возьми компонент липкой шапки через Kodza и покажи, какие файлы куда положить
- Настрой у кнопки из Kodza цвет заливки через переменные
--kz-…
Как установить Kodza
1Командой платформы: удалённый сервер
claude mcp add --transport http kodza https://kodza.dev/api/mcp2Командой платформы
claude mcp add kodza -- npx -y kodza-mcp1Командой платформы: удалённый сервер
codex mcp add kodza --url https://kodza.dev/api/mcp2Командой платформы
codex mcp add kodza -- npx -y kodza-mcpФайл настроек
{
"mcpServers": {
"kodza": {
"url": "https://kodza.dev/api/mcp"
}
}
}{
"mcpServers": {
"kodza": {
"command": "npx",
"args": [
"-y",
"kodza-mcp"
]
}
}
}Файл настроек
{
"servers": {
"kodza": {
"type": "http",
"url": "https://kodza.dev/api/mcp"
}
}
}{
"servers": {
"kodza": {
"type": "stdio",
"command": "npx",
"args": [
"-y",
"kodza-mcp"
]
}
}
}1Командой платформы: удалённый сервер
gemini mcp add -t http kodza https://kodza.dev/api/mcp2Командой платформы
gemini mcp add kodza npx -y kodza-mcpПо шагам, с командами для каждой платформы: Как подключить MCP-сервер: Claude Code, Codex, Cursor, VS Code, Gemini CLI и другие
Вопросы о Kodza
Как установить Kodza в Claude Code?
Добавьте MCP-сервер командой claude mcp add --transport http kodza https://kodza.dev/api/mcp. Если нужен локальный запуск, используйте claude mcp add kodza -- npx -y kodza-mcp.
Что делает Kodza?
Агент ищет компоненты по описанию и получает их точный HTML, CSS и JS вместе с настройками и инструкцией по подключению. Сервер только выдаёт код, в проект он не пишет.
Нужен ли ключ API или аккаунт?
Нет, сервер бесплатный и работает без регистрации. Для локального варианта через npx -y kodza-mcp понадобится Node.js.
