k-ui 组件库信息查询 MCP 服务器

k-ui MCP Server 是一个为 LLM 提供 k-ui 组件库信息的 MCP 服务器,支持组件列表、组件 Schema、设计令牌查询以及 TSX 代码验证,适用于在 Claude Code 等 AI 编程环境中辅助前端开发。

  • by k1e1n04
  • TypeScript
  • 本地部署
  • 更新于
在 GitHub 查看 k1e1n04/k-ui-mcp-server

使用说明

k-ui MCP Server

k-ui コンポーネントライブラリの情報を LLM に提供する MCP サーバー。

セットアップ

Claude Code

.claude/settings.json に追加:

{
  "mcpServers": {
    "k-ui": {
      "command": "npx",
      "args": ["-y", "@k1e1n04/k-ui-mcp-server@1.0.0"]
    }
  }
}

実行するバージョンは @k1e1n04/k-ui-mcp-server@1.0.0 のように固定してください。 バージョンを固定せず github: 参照やレンジ指定でインストールすると、改ざんされた パッケージを実行するサプライチェーンリスクがあります。

ローカルの k-ui ソースを参照する場合は K_UI_PATH を指定:

{
  "mcpServers": {
    "k-ui": {
      "command": "npx",
      "args": ["-y", "@k1e1n04/k-ui-mcp-server@1.0.0"],
      "env": {
        "K_UI_PATH": "/path/to/k-ui"
      }
    }
  }
}

K_UI_PATH 未指定の場合、GitHub から自動的に clone して ~/.cache/k-ui-mcp-server/ にキャッシュします。

バージョン指定

K_UI_VERSION でブランチやタグを指定できます(デフォルト: main):

{
  "mcpServers": {
    "k-ui": {
      "command": "npx",
      "args": ["-y", "@k1e1n04/k-ui-mcp-server@1.0.0"],
      "env": {
        "K_UI_VERSION": "v1.2.0"
      }
    }
  }
}

バージョンごとにキャッシュが分かれるため、複数バージョンの切り替えも可能です。

K_UI_VERSION にはブランチ名・タグに加えて コミット SHA を指定することを推奨します。 ブランチやタグは後から書き換えられる可能性があるため、再現性と改ざん耐性のため K_UI_VERSION: "0d409d3..." のように不変なコミット SHA を固定してください。

ツール

ツール 説明
list_components コンポーネント一覧を返す。category で atoms/molecules/templates をフィルタ可能
get_component_schema 指定コンポーネントの Props 定義・デフォルト値・Storybook 使用例・ソースコードを返す
get_design_tokens デザイントークン(CSS 変数)を返す。category で colors/spacing/typography/shadows/animations/radius をフィルタ可能
validate_code k-ui を使った TSX コードスニペットを検証する(import チェック・props 値の検証・tokens.css の有無)

開発

pnpm install
pnpm build