# Teach your AI agent Box Kite in one command _Box Kite 2.2.5 · a markdown copy of https://www.box-kite.dev/ai-context/_ 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. - 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. - ✓ `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: ... }}. ## 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](https://www.box-kite.dev/start-with-ai.md) 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. ```shell 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…** ```shell 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** ```shell /plugin marketplace add box-kite/box-kite /plugin install box-kite@box-kite ``` **Cursor, as a rule file** ```shell 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** ```shell 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](#try): 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. ```shell 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. `` 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 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 } }); run(action)} />; ``` - [The catalog and the renderer, in full](https://www.box-kite.dev/generative-ui.md) - [AI SDK, assistant-ui, CopilotKit, AG-UI and A2UI, in one vocabulary](https://www.box-kite.dev/interop.md) - [The components an agent’s turn needs: the tool call, the approval, the reasoning](https://www.box-kite.dev/agent.md) - [Every prop, with the CSS the engine writes for it](https://www.box-kite.dev/box.md) ## 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](https://www.box-kite.dev/start-with-ai.md)[Install by hand](https://www.box-kite.dev/installation.md) --- _Every page: https://www.box-kite.dev/llms.txt · every prop, measured: https://www.box-kite.dev/props.md_