Build with AI

Your agent can read WunderUI

Most of the code written with a component library today is written by an agent that has never seen its documentation. WunderUI ships the same design system four more times — as an MCP server, a markdown document, structured data and an llms.txt — so the agent works from the real API instead of guessing.

Components described

204

Why it exists

Ask an agent for a data table and it writes one from scratch: raw divs, invented class names, a color it picked itself. Not because it is careless, but because nothing told it that exists, takes a array and already handles sorting, search and selection.

Everything on this page answers that one question — what exists, what it takes, and which token to use — in whatever form the tool at hand can consume.

What ships

Pick by what your tool speaks. They carry the same content from the same source.

INSTRUCTIONS.md

The short, always-on rules — components, tokens, motion, copy — to paste into CLAUDE.md, AGENTS.md or your Cursor rules, so every session starts with them.

Claude Code, Codex, Cursor, any agent with a rules file

MCP server

Eleven tools that let an agent search the inventory, read prop signatures, pull tokens, drop in a starter, follow a WunderUI skill without installing it and — with a Pro key — pull block source, inside the editor.

Claude Code, Cursor, Windsurf, Codex, VS Code, Cline

DESIGN.md

The whole design system as one markdown document: install steps, the rules an agent should follow, every token, the component inventory and starter snippets.

Any chat or agent that takes pasted context

design.json

The same content as structured data — tokens, components with exports and prop signatures, templates — for your own scripts, checks and tooling.

Build scripts, CI, custom tooling

llms.txt

The llms.txt convention: a short, link-dense index of every component and template, plus llms-small.txt (rules and inventory) and llms-full.txt (everything in one file).

Crawlers, search and discovery agents

Agent skills

A whole job for your agent, not one answer.

Agent skills

Pro

Folders a coding agent loads when the task fits: the steps, the scripts and the rules for a whole job. Available now: UI/UX Design Auditor.

Claude Code · comes with WunderUI Pro

Quick start

One line in Claude Code, and the agent can search the library while it works:

bash

claude mcp add wunderui -- npx -y wunderui-mcp

No editor with MCP support? Paste the design context at the top of your prompt instead:

bash

curl -s https://wunderui.com/DESIGN.md | pbcopy

Set up the MCP server

How it stays current

Nothing here is written by hand. A generator reads the library source on every release and rewrites all four artifacts, so the props an agent sees are the props the build actually exports.

Source in the repo	Becomes
	Design tokens, light and dark
	Exports and prop signatures
	Names, categories, descriptions
	The page templates

bash

npm run build:react            # dist/index.d.ts must be current
npm run generate:agent-context # rewrites DESIGN.md, design.json, llms.txt and the MCP data

Free to use

No key, no account

All four artifacts are public and free, whether or not you own a license. They describe the library and cost nothing to read. The free components are MIT; the license covers the Pro components, UI Blocks and templates. The MCP server runs locally over stdio: no key, no account, no network call. The agent skills above are the one exception: they are part of WunderUI Pro and come with the purchase.