Kodza

Name: Kodza
Author: kodza-dev

作者：kodza-devバージョン 0.1.6i★ –iパソコンでもクラウドでも

レジストリ名dev.kodza/kodza

インストール

概要

作者による説明（英語の原文）

Free premium UI components in plain HTML, CSS and vanilla JS, for AI coding assistants.

PopNx MCPの3つの柱

この3つを1つのスコアにまとめることはしません。意見、測定、人気はそれぞれ別のものだからです。

利用者の声iレビューはまだありませんレビューは今後のステップで、アカウント機能と一緒に始まります
私たちの基本チェックi3項目中3項目に合格公開情報からチェック。コードはまだスキャンしていません
利用状況i未計測★ –

できること

このサーバーのやさしい解説はまだ書いていません。以下はレジストリから読み取った事実です。

接続方法: パソコンでもクラウドでも
トランスポート: stdio, Streamable HTTP
カテゴリ: その他

インストール

使っているAIアプリを選んで、設定をコピーしてください。

インストールの前に

基本チェック：3項目中3項目に合格
作者のサーバーで動きます。あなたが頼んだ内容は、作者のサーバーを通ります。
できること：2件（ツール） search_components, get_component
レジストリには、入力が必要なキーは載っていません。

必要なもの

クラウドで動くインストール不要。インターネット経由でつながります
npmNode.jsのインストール（npxコマンドに必要）

どのアプリを使っていますか？

ClaudeClaude CodeCursorVS CodeChatGPT

上でアプリを選んでください。選んだアプリを覚えておくので、次からはボタンに「…にインストール」と表示されます。

ウェブ、デスクトップ、モバイルのClaudeで使えます：

Settings → Connectors を開く
Add custom connector を押す
下のアドレスを貼り付けて Add を押す
サインインを求められたら、作者のサービスにサインインする

https://kodza.dev/api/mcp

または、パソコンで動かす

Claude Desktop → Settings → Developer → Edit Config を開き、claude_desktop_config.json にこれを貼り付けます

{
  "mcpServers": {
    "kodza": {
      "command": "npx",
      "args": [
        "-y",
        "kodza-mcp"
      ]
    }
  }
}

ターミナルでこれを実行します

claude mcp add --transport http kodza https://kodza.dev/api/mcp

または、パソコンで動かす

claude mcp add kodza -- npx -y kodza-mcp

Cursorで開く

または、設定を自分でコピーする

プロジェクトの .cursor/mcp.json、または ~/.cursor/mcp.json に貼り付けます

{
  "mcpServers": {
    "kodza": {
      "url": "https://kodza.dev/api/mcp"
    }
  }
}

または、パソコンで動かす

Cursorで開く

または、設定を自分でコピーする

プロジェクトの .cursor/mcp.json、または ~/.cursor/mcp.json に貼り付けます

{
  "mcpServers": {
    "kodza": {
      "command": "npx",
      "args": [
        "-y",
        "kodza-mcp"
      ]
    }
  }
}

ブラウザがアプリを開いてよいか確認し、そのあとアプリが設定を表示して確認を求めます。キーの値は空欄のままなので、自分で入力してください。

VS Codeで開く

または、設定を自分でコピーする

プロジェクトの .vscode/mcp.json に貼り付けます

{
  "servers": {
    "kodza": {
      "type": "http",
      "url": "https://kodza.dev/api/mcp"
    }
  }
}

または、パソコンで動かす

VS Codeで開く

または、設定を自分でコピーする

プロジェクトの .vscode/mcp.json に貼り付けます

{
  "servers": {
    "kodza": {
      "type": "stdio",
      "command": "npx",
      "args": [
        "-y",
        "kodza-mcp"
      ]
    }
  }
}

ChatGPTがつなげるのは、インターネット上のサーバーだけです：

ウェブ版のChatGPTを開き → Settings → Connectors (Apps)
Create または Add を押す（プランによっては、先に Advanced で Developer mode をオンにする必要があります）
下のアドレスを貼り付け、名前を付けて保存する
サインインを求められたら、作者のサービスにサインインする

https://kodza.dev/api/mcp

メニューの名前は、プランや時期によって少し違うことがあります。

選んだアプリは、この端末のCookieに保存されます。アカウントは不要です。

この設定は、作者のレジストリ登録情報から作成しています。READMEと違う場合は、READMEに従ってください。

できること

ツールの名前と説明は、サーバーが2026年11月6日に返したそのままの内容です。書いたのは作者で、私たちではありません。プレーンテキストとして表示しています。

search_components
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". An empty query lists a whole category. Returns the slugs get_component takes.
get_component
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 its install notes. Its CSS and JS are also

基本チェックi

誰でも見られる情報をチェックしており、コードは読んでいません。当てはまらない項目は数に入れていません。 · 2026年11月6日にチェック

✓ 合格
作者とリポジトリが一致
レジストリ名はドメイン kodza.dev で確認済みです（レジストリがドメインの所有を確認しています）
… 未チェック
今もメンテナンスされている
このリポジトリはまだGitHubから読み取っていません
… 未チェック
ライセンスがある
このリポジトリはまだGitHubから読み取っていません
✓ 合格
エンドポイントが応答する
226ミリ秒で応答（HTTP 200）
– 対象外
OAuthでサインイン
サインイン不要
✓ 合格
ツールの説明に隠れた指示がない
2件のツールの説明を読み、AIへの隠れた指示は見つかりませんでした

その他のほかのサーバーとの比較i

このカテゴリのほかの32461件のうち0%よりスターが多い
このカテゴリのほかの32461件のうち94%より最近レジストリに公開
基本チェックの結果が、このカテゴリのほかの32461件のうち100%と同じかそれ以上

レジストリでこのカテゴリにある有効なすべてのサーバーと比較しています。スターは、公開者がリポジトリの所有者である場合だけ数えます。

よくある質問

Kodzaは安全ですか？

当てはまる基本チェック3項目のうち3項目に合格しました。コードは読んでいません。キーやトークンを追加する前に、サーバーがどんなアクセスを求めているかを確認し、必要な権限だけを持つキーを使ってください。

どんなキーやコードが必要ですか？

レジストリには必須のキーは載っていません。ただし、最初に使うときにサインインを求めるサーバーもあります。

パソコンで動きますか、それともクラウドですか？

どちらでも使えます。パソコンにインストールしても、クラウド版につないでもかまいません。

今もメンテナンスされていますか？

GitHubリポジトリの最終更新は–、最新バージョン（0.1.6）がレジストリに届いたのは一昨日です。

どのアプリで使えますか？

Claude Desktop、Claude Code、Cursor、VS CodeなどのMCP対応アプリで使えます。URLでつながるので、リモートMCPサーバーに対応したアプリ（開発者モードのChatGPTなど）でも使えます。

代わりに使えるものは？

同じカテゴリには：Spec Driven Development, Remote Desktop Commander, dotnet-mcp

代わりの候補

同じカテゴリで、ほかの作者が作ったサーバー。スターの多い順。

カードの見方：★ GitHubスターi3つの柱：レビュー · チェック · 利用状況i更新＝最新バージョンをレジストリに公開した日i

Spec Driven Development

作者：formulahendry

MCP Server that facilitates spec-driven development workflows, not just Vibe Coding.

パソコンで動く★ 440MIT14 か月前更新

インストール

Remote Desktop Commander

作者：desktop-commander

Remote Desktop Commander: use files, terminal and processes on your own computers from any AI app.

クラウドで動く★ 211昨日更新

インストール

dotnet-mcp

作者：Skymly

MCP server for .NET symbols, XAML, source generators, and restricted workspace edit

パソコンで動く今日更新

インストール

作者のREADME

READMEを開く

作者のリポジトリから書かれたとおりにコピーしたものです。PopNx MCPは内容を確認・推奨していません。HTML、画像、スクリプトは取り除いています。リンクはこのサイトの外へ移動します。

Kodza

UI components your AI can fetch. Plain HTML, CSS and JavaScript: no framework, no build step, no dependencies.

[kodza.dev](https://kodza.dev) · Catalogue · Docs

Found a bug, or missing a component? kodza-dev/requests: issues for bugs, discussions for requests, with votes.

Just ask

Kodza is an MCP server too, at https://kodza.dev/api/mcp (Streamable HTTP). Free, no account, no API key. Plug it into your AI once:

claude mcp add -t http kodza https://kodza.dev/api/mcp

Then ask in your own words: "Add the Kodza fill button to my hero." It gets the exact files in this repository, not its best guess, and where they go.

In your editor

Codex

codex mcp add kodza --url https://kodza.dev/api/mcp

VS Code (GitHub Copilot)

code --add-mcp '{"name":"kodza","type":"http","url":"https://kodza.dev/api/mcp"}'

Cursor (~/.cursor/mcp.json)

{ "mcpServers": { "kodza": { "url": "https://kodza.dev/api/mcp" } } }

Rather keep it on your machine? npx -y kodza-mcp runs the same server locally (kodza-mcp). Everything else in the docs.

What it does

Tool	What it does
`search_components`	Finds components by what they do or look like ("button fill hover", "sticky header", "date picker"), or lists a category, each with the link to its demo.
`get_component`	One component: its exact HTML, CSS and JS (or the commands to download them), its settings (`--kz-…` variables, modifier classes, `data-` attributes), what each key does, its dark-mode values and how to wire it into a plain page, WordPress, Shopify, React or a Claude artifact.

Three slash commands too, for when you'd rather not write the request: build_page, replace_element and find_component (Claude Code: /mcp__kodza__build_page, VS Code: /mcp.kodza.build_page).

Read-only: it hands out code and never touches your project. It counts which components get fetched, and by which assistant; nothing you type is kept.

Six of them

Picked from the 200. Each picture runs its demo on kodza.dev, each name opens its files.

Trapdoor Menu · Hero Showcase · Topographic Lines · Fill Button · Date Picker · Hover List Preview

Or take the files

Each folder in components/ is one component: the HTML, the CSS and, when it needs one, the JS. Link the CSS, paste the HTML, load the JS. It lands in a bare HTML page, WordPress, Shopify or React, because it's just code.

Written like it's going live tomorrow. Because it probably is.

The CSS only touches kodza- classes. A generated theme guard keeps your site's CSS off the component.
Settings are CSS variables (--kz-…), variants are modifier classes or data- attributes.
As many instances as you like on one page, one copy of the JS for all of them.
Keyboard, visible focus and prefers-reduced-motion, on every one.
kodza:init and kodza:destroy for content loaded later: AJAX themes, Swup, React.

The components

200 of them, and counting. Open a category: each name opens its folder, each demo runs on kodza.dev. All of them in motion: the catalogue.

Buttons · 15

Component	What it does
3D Press Button	A button with real thickness: the face sinks into its base, even the quickest tap goes all the way down, and it springs back with a small bounce. A keycap, a brutalist slab, or a toggle that stays down.	Demo
Add to Cart	Add-to-cart button that confirms with a tick while a copy of the product picture flies into the cart icon and its count rolls up by one. Rolls back if the request fails.	Demo
Arrow Button	An arrow that draws itself in on hover, nudges the label aside, then carries on through the button when you leave.	Demo
Call Button	A round phone icon that opens into a full "Book a call" button, with a little ring. Stays open on touch screens. Pure CSS.	Demo
Copy to Clipboard	A command, or a sentence for your AI, with a copy button: the icon turns into a check that draws itself and the label rolls to "Copied".	Demo
Fill Button	A button that fills from the exact point your cursor enters and empties toward where it leaves, with a rolling label and a looping arrow.	Demo
Hold to Confirm	For the actions you cannot take back: hold it down and an ink pill fills the button, let go too early and it drains back, hold to the end and it ticks. Mouse, finger, Space or Enter.	Demo
Ink Like	Like button whose heart fills with ink, a small wave riding the surface, and drains when the like is taken back. The count rolls digit by digit with carries (999 → 1,000) and rolls back if the request fails.	Demo
Loading Button	A button that shows its work: its words roll from Deploy to Deploying while a ring comes in, then the ring closes on a tick for Deployed. The width never moves.	Demo
Magnetic Button	A button that leans towards the pointer as it comes near, its words a little further, and settles back softly. Its click area moves with it. Calm on touch screens.	Demo
Morph Button	A pill that tightens into a circle on hover while its label gives way to an arrow. The clickable area never moves. Pure CSS.	Demo
Roll Button	A button whose label rolls up letter by letter on hover, and keeps rolling the same way when you leave. Plain CSS and a few lines of JS.	Demo
Scroll Down	The cue at the bottom of a hero: an arrow in a ring or a mouse whose wheel rolls now and then. One click glides to the next section, the first scroll fades it out, and it comes back at the top.	Demo
Share Button	Press Share and the options slide out from behind it, the last one pushing the pill open, while the arrow takes off and a cross draws itself. Copy link turns into a check; X and LinkedIn open in a small window.	Demo
Split Button	The main action on the left, the other options behind an arrow. One tint slides between the halves; pick another way to do it and the label rolls over, the button easing to its new width.	Demo

Links · 10

Component	What it does
Arrow Link	A link that points the way: at rest a chevron, on hover the shaft draws itself in and the head moves on, › becomes →. A back variant points the other way. Pure CSS.	Demo
Download Link	A download link that shows the file's type and weight beside its words, read from the file itself. On hover the arrow sinks into its tray; a click sends it through and back from the top.	Demo
External Link	A link that leaves the site says so: a line of ink runs under the words to the ↗, which then springs out towards the corner, its shaft stretching after it. Pure CSS.	Demo
Footnote Link	Footnotes that stay on their line. Wide, the note sits in the margin level with its line and inks with its number; narrow, it folds out under the line. Picks up WordPress footnotes as they are.	Demo
Heading Anchor	A # beside every heading. It slides out of the margin when the heading is pointed at, or waits after the last word on a touch screen. Click it, or the heading, to put the section in the bar and copy the link.	Demo
Highlight Link	A highlighter stroke that sweeps behind the link text, or a solid block that flips the text to white exactly under its edge.	Demo
Link Preview	Point at a link and a card of where it goes unfolds above it. One card per paragraph: it glides from link to link, its picture cross-fading and its words rolling.	Demo
Quote Link	Select words in an article and a pill offers a link to them: the page's address with a text fragment, which opens it scrolled to the quote and highlighted. It rolls to Link copied with a check.	Demo
Scramble Link	Hover a link and its word scrambles, then settles from left to right: symbols that decode, its own letters shuffling, or a split-flap.	Demo
Underline Link	An underline that slides in from the left and leaves through the right, or the reverse. Follows the text across lines, like a pen.	Demo

Forms · 31

Component	What it does
Book a Visit	A booking form: the coming days, the free times worked out from the opening hours, name and email. On send it rolls up into the answer, with Add to calendar as an .ics file.	Demo
Checkbox

冒頭だけを表示しています。続きはリポジトリで読めます

Kodza

概要

PopNx MCPの3つの柱

できること

インストール

インストールの前に

または、パソコンで動かす

または、パソコンで動かす

または、パソコンで動かす

または、パソコンで動かす

できること

基本チェックi

作者とリポジトリが一致

今もメンテナンスされている

ライセンスがある

エンドポイントが応答する

OAuthでサインイン

ツールの説明に隠れた指示がない

その他のほかのサーバーとの比較i

よくある質問

代わりの候補

Spec Driven Development

Remote Desktop Commander

dotnet-mcp

作者のREADME

Kodza

Just ask

In your editor

What it does

Six of them

Or take the files

The components