Claude Code · Cursor · Copilot · Codex · Windsurf · Zed

Teach your AI agent Box Kite in one command

The rules, all 235 props and an MCP server that runs the real engine ship inside the package. Pick your agent, paste one line, and it writes Box Kite right the first time — then checks its own work.

The MCP server checks every style it writes; the skill teaches it the rules before it starts.

Terminal

claude mcp add box-kite -- npx -y @box-kite/mcp
npx skills add box-kite/box-kite

One click adds the MCP server; the command adds the rules as a Cursor skill.

Add to Cursor

Terminal

npx skills add box-kite/box-kite -a cursor

One click adds the MCP server to Copilot’s agent mode; the command adds the rules.

Install in VS Code

Terminal

npx skills add box-kite/box-kite

Codex, Windsurf, Cline, Zed, Gemini CLI — every agent that reads AGENTS.md or installs a skill. The MCP config for each is below.

Terminal

npx skills add box-kite/box-kite
# or, with the package installed:
cp node_modules/@box-kite/react/AGENTS.md ./AGENTS.md

Start a new app with AI Try the checker Open the playground

No API key
Runs on your machine
Generated from the engine
Free and MIT licensed

Try it: the check your agent runs

A value Box Kite does not accept writes no CSS and says nothing — so an agent cannot tell a typo from a style that worked. This is the MCP server's check_styles, running the real engine in this tab. Edit the props, or pick an example.

check_styles

Props to check — JSX, as an agent writes it

p={4} wrote CSS
.p-4{padding:1rem}
bgColor="bleu-500" wrote nothing
bgColor="bleu-500" wrote no CSS: bgColor does not take that value, so the prop was dropped along with its class. Did you mean "blue-500"?
fontSize={4} wrote the wrong unit
fontSize={4} is 4px text: fontSize's divider is 16, not the spacing scale's 4, so the number is the pixel size. For 16px write fontSize={16}.
.fontSize-4{font-size:0.25rem}
href="/pricing" dropped
href is an HTML attribute, not a style prop, so at the top level it was dropped: write props={{ href: ... }}.

3 of 4 would ship silently broken. Your agent gets these answers mid-task from the MCP server.

Render it in the playground

Why agents get it right

A model writing against a library it has not seen guesses, and the guesses that compile are the expensive ones. Box Kite’s prop names collide with other libraries’ while the numbers mean different things — p={4} is a rem, fontSize={14} is pixels, b={1} is one pixel — so none of it is left to be guessed.

The instructions travel with the code

Installing the package installs AGENTS.md, the whole prop reference and a docs folder beside it. There is nothing to fetch, nothing to keep in sync and no version skew: the files were generated from the same registry the code was built from.

The compiler catches the rest

235 props are typed unions, so a value a model invented is an error in the editor rather than an element that renders with no background — and the diagnostic names the nearest real value, which is a repair an agent can apply on its own.

One question needs the engine

A value this library refuses writes no CSS and says nothing about it, which is right and is invisible. The MCP server runs the real engine so the answer to “did that work?” is measured rather than recalled.

Every route, by hand

Three routes in, and they compose — an AGENTS.md in the root for the rules, the MCP server for the questions that come up mid-task. Pick the first one that fits your agent — or, for a new project, one prompt that has the agent do all of it.

A file in your repository root

Codex, Cursor, Copilot, VS Code, Windsurf, Cline and Zed read a root AGENTS.md natively; Claude Code reads CLAUDE.md, so one line saying @AGENTS.md points it at the same file. A file in the root is read on every run — one referenced by hand is read when somebody remembers.

Terminal

cp node_modules/@box-kite/react/AGENTS.md ./AGENTS.md
echo '@AGENTS.md' > CLAUDE.md   # Claude Code reads this one

As a skill, in roughly forty-five agents

Agent Skills are an open standard, so one SKILL.md reaches nearly all of them — and unlike a file you copy, an install command keeps it current. Same rules as AGENTS.md, with a measured table of the dividers and four references it loads only when the question needs them.

Any agent — Claude Code, Cursor, Codex, Copilot, Gemini CLI, Zed…

Terminal

npx skills add box-kite/box-kite
npx skills add box-kite/box-kite -a cursor -g   # one agent, and globally

Claude Code, as a plugin

Terminal

/plugin marketplace add box-kite/box-kite
/plugin install box-kite@box-kite

Cursor, as a rule file

Terminal

mkdir -p .cursor/rules
cp node_modules/@box-kite/react/.cursor/rules/box-kite.mdc .cursor/rules/
curl -O https://www.box-kite.dev/box-kite.mdc   # or without the package installed

As an MCP server, with the engine behind it

A file is read once, at the start. A server is asked mid-task, which is when the question actually comes up. No key and no network: the references and the engine are built into the package.

Claude Code

Terminal

claude mcp add box-kite -- npx -y @box-kite/mcp

Cursor, VS Code, Codex, Zed — anything that speaks stdio

JSON

{
  "mcpServers": {
    "box-kite": { "command": "npx", "args": ["-y", "@box-kite/mcp"] }
  }
}

What is in the package

All of it generated during the build — the prop reference from the registry itself, the component table from the built chunks’ own exports — because a stale instruction file is worse than none: an agent trusts it over its own priors. The build fails if a generated file comes out empty, if a component no longer loads, or if the reference disagrees with itself about the prop count.

File	What it is
`AGENTS.md`	The rules, and the block that tells a model its prior is a different library. Read first.
`docs/props.md`	Every prop, the values it takes and one example measured from the engine.
`docs/components.md`	Every component, its import specifier and whether it renders on a server — read off the built chunks' own exports.
`docs/a11y.md`	The behaviour hooks, for a pattern this library does not ship.
`docs/anchor.md`	Where a floating layer goes, in CSS and in the measured fallback.
`docs/catalog.md`	What a generated UI may build, and how it renders.
`docs/interop.md`	The agentic runtimes, each verified against its own published package.
`docs/mcp.md`	The MCP server, and why one tool of it cannot be replaced by a file.
`BOX_KITE_AI_CONTEXT.md`	The long-form reference: prop tables, the DataGrid API, debugging.
`.claude/skills/box-kite/`	The same rules as an installable skill, with four references beside it.
`.cursor/rules/box-kite.mdc`	That skill as a Cursor rule.

The MCP server's six tools

check_styles is the one you tried above: no reference can settle whether a value worked, because a value this library refuses writes no rule and no class name, silently. The other five answer what a goal needs without already knowing its name — capability level rather than one tool per document.

Tool	What it answers
`search_docs`	The prop, component, nesting key or rule for what you are building — ranked across all four.
`get_props`	A prop's whole record, with a numeric prop's scale measured at 1/2/4/8 rather than described.
`get_component`	One component's contract: props and defaults, sub-parts, the keyboard map and the ARIA it writes.
`get_rules`	The rules the library is written by, as an index or in full.
`get_blocks`	Whole sections the shadcn CLI installs — a data-grid page, a settings form, a dashboard shell.
`check_styles`	A prop bag through the real engine: the CSS each prop wrote, or why it wrote none.

The docs site answers in markdown

An agent that fetches a documentation page gets an HTML shell and a JavaScript bundle it has no reason to parse. Every page here is also served as markdown at its own address with .md appended, and llms.txt is the index of all of them — one line per page, with the block of facts to read before writing any props. The files are converted from the pages themselves during the build, so nothing here is a second copy that can fall behind.

Terminal

curl https://www.box-kite.dev/llms.txt      # the index: every page, and what each one covers
curl https://www.box-kite.dev/box.md        # any page, as markdown — append .md to the address
curl https://www.box-kite.dev/props.md      # every prop, the CSS it writes, one measured example
curl https://www.box-kite.dev/skill.md      # the skill itself, for an agent with no install command
curl https://www.box-kite.dev/box-kite.mdc  # and the Cursor rule
curl https://www.box-kite.dev/llms-full.txt # all of it in one file, for a tool that indexes a site

And what an AI may build at runtime

Everything above is for whatever writes your code. catalog() is the other half: what a model is allowed to compose while your app is running. It describes every component and every value its props take, as JSON Schema — so a generated tree can be validated before it renders, and a colour it asks for has to be one the theme has. The prop registry is read live, so a Box.extend() prop is in the catalog with nothing regenerated. <SpecRenderer> renders the answer: a name the app did not register renders nothing, a prop the schema refuses is dropped, and the only prop that can become a function is one the catalog calls an event.

JAVASCRIPT

Playground

import { catalog } from '@box-kite/react/catalog';
import SpecRenderer, { createSpecRegistry } from '@box-kite/react/spec';

// The allow-list is yours: the library ships everything it can render.
const allowed = catalog({ include: ['Flex', 'H2', 'P', 'Sparkline'], styleProps: ['d', 'gap', 'p', 'bgColor', 'fontSize'] });

allowed.components.Flex.props;   // a strict JSON Schema, ready for a structured-output API
allowed.rules;                   // the dividers — what a schema cannot say and a prompt must

// And the other half: render what came back, against the components this app allows.
const registry = createSpecRegistry({ catalog: allowed, components: { Flex, H2, P, Sparkline } });

<SpecRenderer spec={spec} registry={registry} data={data} onAction={(action) => run(action)} />;

Questions

Which AI coding agents does it work with?

Any agent that reads AGENTS.md, installs an Agent Skill or speaks MCP — Claude Code, Cursor, GitHub Copilot in VS Code, Codex, Windsurf, Cline, Zed and Gemini CLI among them.

Does the MCP server need an API key or a network connection?

No. It runs locally over stdio through npx, with the references and the style engine built into the package, so nothing leaves your machine.

AGENTS.md, the skill or the MCP server — which one do I need?

They compose. AGENTS.md or the skill gives the agent the rules up front; the MCP server answers the questions that come up mid-task, like whether a value it just wrote produced any CSS. Most setups use a rules file and the server.

Will the instructions go out of date?

They ship inside the package and are generated from the prop registry during the build, so the version you install describes exactly the code you installed.

Does it work in an existing project?

Yes. Install @box-kite/react, add the server and a rules file, and it works beside whatever styling the project already has — Box writes its own classes and needs no stylesheet or build plugin.

Is it free?

Yes. Box Kite, its skill and its MCP server are open source under the MIT licence.

Ready when your agent is

Start a new app from one prompt, or add Box Kite to the project you already have.

Start with AI Install by hand