Kodza — Claude Code MCP server: ready-made UI components
Lets your assistant pull exact markup for buttons, links and other interface pieces written in plain HTML, CSS and JavaScript.
claude mcp add --transport http kodza https://kodza.dev/api/mcpWhat Kodza 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.
What it helps with
- 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 for the agent
- 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
How to install Kodza
1Platform CLI: remote server
claude mcp add --transport http kodza https://kodza.dev/api/mcp2Platform CLI
claude mcp add kodza -- npx -y kodza-mcp1Platform CLI: remote server
codex mcp add kodza --url https://kodza.dev/api/mcp2Platform CLI
codex mcp add kodza -- npx -y kodza-mcpConfig file
{
"mcpServers": {
"kodza": {
"url": "https://kodza.dev/api/mcp"
}
}
}{
"mcpServers": {
"kodza": {
"command": "npx",
"args": [
"-y",
"kodza-mcp"
]
}
}
}Config file
{
"servers": {
"kodza": {
"type": "http",
"url": "https://kodza.dev/api/mcp"
}
}
}{
"servers": {
"kodza": {
"type": "stdio",
"command": "npx",
"args": [
"-y",
"kodza-mcp"
]
}
}
}1Platform CLI: remote server
gemini mcp add -t http kodza https://kodza.dev/api/mcp2Platform CLI
gemini mcp add kodza npx -y kodza-mcpStep by step, with commands for each platform: How to add an MCP server to Claude Code, Codex, Cursor, VS Code, Gemini CLI and more
Questions about Kodza
How do I install Kodza in Claude Code?
Run claude mcp add --transport http kodza https://kodza.dev/api/mcp. For a local server instead, run claude mcp add kodza -- npx -y kodza-mcp.
What does Kodza do?
It lets the assistant search for a component and receive its exact HTML, CSS and JS along with settings and wiring notes. Code goes out, nothing goes into your project.
Do I need an API key?
No, the server is free and needs no sign-up. The local npx -y kodza-mcp route requires Node.js.
