Kodza
Free premium UI components in plain HTML, CSS and vanilla JS, for AI coding assistants.
사용해야 할까요
품질 및 안전성
도구 정의와 프로토콜 준수에 대한 자동 분석을 기반으로 합니다.
컨텍스트 비용
이는 서버의 도구가 모델의 컨텍스트에 로드될 때마다 소비되는 대략적인 토큰 수입니다. 수치가 높을수록 다른 작업에 사용할 수 있는 주의가 줄어듭니다.
설치
원클릭 설치
`claude_desktop_config.json` 파일에 다음을 추가하세요:
{
"mcpServers": {
"kodza": {
"command": "npx",
"args": [
"kodza-mcp"
]
}
}
}실행 가능한 패키지
0.1.1stdio원격 엔드포인트
https://kodza.dev/api/mcpstreamable-http할 수 있는 일
도구 목록
도구 (2)
🟢search_components(query, category, limit)
Find Kodza UI components (plain HTML/CSS/vanilla JS) by what they do or look like, e.g. "button fill hover", "image slider", "sticky header", "date picker". Leave query empty to list a whole category. Returns slugs to pass to get_component.
입력 스키마
{
"type": "object",
"properties": {
"query": {
"type": "string",
"description": "Words describing the component or effect, in English"
},
"category": {
"type": "string",
"description": "buttons, links, text, images, cards, navigation, scroll, transitions, forms, overlays, feedback or data"
},
"limit": {
"type": "integer",
"minimum": 1,
"maximum": 50,
"description": "How many results, 12 by default"
}
}
}🟢get_component(slug, target, inline)
The full code of one Kodza component (HTML, CSS and, when it has one, vanilla JS), its API (CSS variables with defaults, modifier classes, data attributes, events), what each key does when it takes the keyboard, its dark-mode values and how to install it. Its CSS and JS are also served as exact files, listed with their curl download commands; inline: false leaves them out of the answer. target narrows the install notes to one stack.
입력 스키마
{
"type": "object",
"properties": {
"slug": {
"type": "string",
"description": "The component slug, from search_components (e.g. \"button-fill\")"
},
"target": {
"type": "string",
"enum": [
"html",
"artifact",
"wordpress",
"shopify",
"react"
],
"description": "Where it goes: html (a plain page), artifact (a Claude artifact on claude.ai), wordpress, shopify or react. All of them when omitted"
},
"inline": {
"type": "boolean",
"description": "false: leave the CSS and JS out of the Code section (you download those files with the given commands). true by default, for assistants that cannot run commands"
}
},
"required": [
"slug"
]
}커뮤니티
증거