Developer

For AI agents

An agent writing UI with Klyv should not have to guess a prop name or invent a colour. Connect it over MCP, or hand it the skill file, and it reads the catalogue, the real types and the tokens — the same data this site is built from.

components: 614
groups: 13
documented props: 5048
tokens: 53
MCP tools: 9

Connect the MCP server

It ships inside the package, so there is nothing extra to install.

Claude Code

bash

claude mcp add klyvui -- npx -y klyvui mcp

One command. The server starts on demand over stdio.

Anything that reads mcp.json

json

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

Already installed? Point at the local copy and skip the fetch: node ./node_modules/klyvui/mcp/server.mjs.

Tools

Generated from the server's own definitions, so this table and the server cannot disagree.

Tool	Takes	What it answers
`search_components`	query?: stringgroup?: string	Find components by name, by group, or by what they do. Returns name, slug, group, section and a one-line summary. Start here when you know the job but not the name.
`get_component`	name: string	Everything about one component: its summary, every prop with real type, default and description, the ARIA roles it renders, its gzipped size, and what it depends on. Accepts 'DataTable', 'data-table' or 'datatable'.
`get_component_source`	name: stringwithDependencies?: boolean	The real source of a component. With withDependencies, also returns every sibling component and shared module it imports, in the order they should be written — which is exactly what `klyvui add` copies.
`list_blocks`	category?: string	Whole screens built only from library components — sign-in, signup, two-factor, an admin panel, an operations dashboard, settings, a profile, a landing section. Reach for one when the job is a page rather than a part.
`get_block`	name: string	One block in full: what it is for, every library component it uses, the npm packages it needs, and its complete source — a working screen to adapt rather than write from nothing. Accepts the slug or the name: 'dashboard', 'Dashboard', 'two-factor'.
`list_groups`	—	The thirteen groups the library is organised by, with what each is for and how many components it holds.
`get_design_tokens`	group?: string	The design tokens in W3C Design Tokens format: colour, radius, shadow and type, plus the dark-mode overrides. Use these values rather than inventing colours.
`get_design_rules`	—	How the design system works and the rules every component obeys: the accent derivation, the surface stack, the ink scale, dark mode, and the five house rules. Read this before writing UI with Klyv.
`how_to_install`	—	Install and setup: the package, the stylesheet, Tailwind users, peer dependencies, icons, server components.

Names are forgiving. DataTable, data-table and datatable all resolve to the same component, and a miss comes back with near matches rather than an error.

Resources

The same knowledge as attachable documents, for clients that prefer them to tool calls.

klyv://catalog

Every component with its group, section and summary.

klyv://blocks

Every block — a whole screen — with the components it is built from.

klyv://tokens

Tokens in W3C Design Tokens format, including dark mode.

klyv://rules

The design system and the rules every component obeys.

klyv://usage

How to install the package and set up the stylesheet.

The Agent Skill

For harnesses that load skills instead of connecting a server.

skills/klyvui/SKILL.md ships in the package and carries the same guidance in one file: find the component before inventing one, read its real props, never invent a colour, plus the theming API and the mistakes that come up most. It works alongside the MCP server or on its own.

Every prop claim in the skill was checked against the generated types rather than written from memory — a skill that confidently names a prop that does not exist is worse than no skill at all.

Without a harness

The same facts are on disk, so any tool can read them.

bash

npx klyvui list chart     # search the cataloguenpx klyvui info combobox   # what it brings with itnpx klyvui add data-table  # copy the source, dependencies included

And the generated bundle ships as plain JSON: data/components.json, data/props.json, data/aria.json, data/sizes.json and data/tokens.json — the last in W3C Design Tokens format. The CLI, the MCP server and this site all read them, which is why none of the three can drift.