Working with AIHow to set up AI coding tools to generate correct XDS component code.
OverviewXDS is designed to be AI-friendly — consistent naming, predictable prop patterns, and a CLI that feeds structured documentation directly into AI context windows. But models still need the right context to avoid falling back to generic React patterns or inventing props.The XDS CLI includes a built-in agent docs system that generates context files for your AI tool of choice. One command sets up everything your AI needs to write correct XDS code.
Quick StartTell your AI to install the CLI and set itself up:
Paste this into your AI
text
Install @xds/cli and run `npx xds agent-docs` to set up your XDS context. Read the generated file.
That's it. The agent-docs command generates everything your AI needs — component index, behavioral rules, CLI reference — pulled from your installed version. After a version bump, run it again to update in place.If you prefer to target a specific file format:
Manual options
bash
npx xds agent-docs --agent claude    # CLAUDE.md
npx xds agent-docs --agent cursor    # .cursorrules
npx xds agent-docs --agent codex     # AGENTS.md (Copilot, Codex, etc.)
What Gets GeneratedThe generated context teaches your AI a 3-step workflow before writing any UI code:
1.`npx xds template --list` — find a related page pattern to use as reference
2.`npx xds template <name> --skeleton` — study the layout structure
3.`npx xds component <Name>` — read props and examples for every component used
It also includes rules that prevent common mistakes (no raw divs, no style={{}}, use tokens not magic values) and a CLI quick reference. After setup, you shouldn't need to manually correct your AI on XDS conventions — the agent docs handle it at the system level.
Cursor SetupCursor project rules aren't always picked up — it selects which rules to apply based on relevance. For reliable inclusion, install XDS context as a User Rule instead. User Rules live at ~/.cursor/rules/ and apply across all projects.
Install as a Cursor user rule
bash
mkdir -p ~/.cursor/rules
npx xds agent-docs --agent-docs-path ~/.cursor/rules/xds.mdc
Checking Your SetupPaste this into your AI before writing any XDS code. These three questions have a 0% pass rate without docs — models confidently guess wrong on all of them. If your AI can't answer them, it'll know to install the agent docs first.
Paste this into your AI
text
Before writing any XDS code, check your knowledge:
​
1. What is the correct import path for XDSButton?
2. How do you make an XDSDialog non-dismissible?
3. What prop does XDSSelector use for its items?
​
If you don't know all three, run `npx xds init --features agents` to generate agent docs, then read the generated file.
The npm run xds PatternAI agents frequently invoke the CLI with incorrect paths (e.g. node_modules/@xds/cli/bin/docs.mjs instead of xds.mjs), leading to silent failures. Adding an npm script alias with the correct path eliminates this entirely.
package.json
json
"scripts": {
  "xds": "node node_modules/@xds/cli/bin/xds.mjs"
}
With this alias, agents use `npm run xds -- component --list` instead of guessing the binary path. The `--` separator is standard npm convention for passing flags to scripts.
Reliable CLI invocation
bash
npm run xds -- component --list
npm run xds -- component Dialog --dense
npm run xds -- docs styling --dense
npm run xds -- docs tokens --dense
The --dense FlagEvery CLI command supports --dense, which outputs a token-efficient format designed for AI context windows. Use it when pasting CLI output into a web-based AI tool like ChatGPT or Claude.
Dense output for pasting into AI conversations
bash
npx xds component Dialog --dense
npx xds docs styling --dense
npx xds docs tokens --dense