Airframe for AI agents: What Airframe is for coding agents: vocabulary, composition, MCP, catalogs, and documentation endpoints. Markup how-to is AI Rules. Connect how-to is MCP. # Airframe for AI agents > What Airframe is for coding agents. Vocabulary, composition, MCP, catalogs, and documentation endpoints. Not a how-to. **Airframe** is a structural UI design system for humans and AI. Machine-readable. CSS-only. Zero runtime JavaScript. Any framework, or none. Install `@airframeui/core`. MIT. Repository: [github.com/airframeui/airframeui](https://github.com/airframeui/airframeui). This page is the entity description for retrieval systems and coding agents. It answers what Airframe is and how to look it up. It is not a markup tutorial. * Markup contract: [AI Rules](/docs/ai-rules) (`@airframeui/core/rules`) * Connect tools: [Airframe MCP](/docs/mcp) * Positioning: [Why Airframe](/docs/why-airframe) ## Vocabulary [Section titled “Vocabulary”](#vocabulary) Do not flatten Airframe into a component library. | Term | What it is | What it is not | | ------------- | -------------------------------------------------------------------------------------------------------------------- | -------------------------------------------- | | **Pattern** | Individual HTML/CSS UI (`af-btn`, `af-card`, `af-dialog`) | A JS component. A widget with a keyboard map | | **Structure** | Arrange and compose UI. Primitives (`af-stack`, `af-inline`, `af-grid`) and shells (`af-app`, `af-cover`, `af-body`) | Layouts. Complete screens | | **Block** | Section guide. Start from [Blocks](/blocks) or [`/llms-blocks.txt`](/llms-blocks.txt), then edit | A second pattern category. Gospel | | **Blueprint** | Complete screen guide. Start from [Blueprints](/blueprints), then change it | A rigid app template. A block | | **Token** | `--af-*` CSS variable. Override at runtime | A required theme build | | **Wrapper** | Kit element that still renders `af-*` (``) | A parallel look beside Airframe | Construction is Structure → Patterns → Blocks → Blueprints. Adoption is tokens → structure → patterns → wrappers. Those are two axes. Blocks and Blueprints are not an adoption step. A pattern is not a component. A block is a section. A blueprint is a screen. Guides, not gospel. ## Composition [Section titled “Composition”](#composition) When generating UI, pick the highest close match, then edit: 1. **Blueprint:** complete screen is close → [Blueprints](/blueprints) 2. **Block:** section is close → [Blocks](/blocks) or [`/llms-blocks.txt`](/llms-blocks.txt) 3. **Pattern:** catalog HTML/CSS. Look up. Do not invent `af-*` names 4. **Structure:** primitives and shells. Not Tailwind `flex flex-col gap-4` Look up on demand. Do not dump catalogs into the prompt. ## Documentation endpoints [Section titled “Documentation endpoints”](#documentation-endpoints) Crawlable HTML. No JS-dependent navigation required. | URL | What it is | | -------------------------------------------------------------------------------- | ---------------------------------------------------------- | | [This page](/docs/ai-agents) | Entity description for agents | | [`/llms.txt`](/llms.txt) | Curated docs index for LLMs | | [`/llms-small.txt`](/llms-small.txt) | Abridged docs. Best default context | | [`/_llms-txt/airframe-for-ai-agents.txt`](/_llms-txt/airframe-for-ai-agents.txt) | This page as a text dump | | [`/llms-blocks.txt`](/llms-blocks.txt) | Copy-ready section guides | | [`/blueprints`](/blueprints) | Complete screen guides | | [`/docs/patterns/{catalogId}`](/docs/patterns/button) | Short URL per catalog name. Redirects to the nested page | | `docsUrl` on catalog and MCP results | Canonical human docs for that pattern, block, or blueprint | Site: [airframeui.com](https://airframeui.com). Human introduction: [Introduction](/docs/introduction). ## Package resources [Section titled “Package resources”](#package-resources) After `npm install @airframeui/core`: | Export | What it is | | --------------------------------- | ------------------------------------------------------------------------------------------------- | | `@airframeui/core/catalog` | Pattern inventory JSON. `docsUrl`, `guidance`, `useWhen`, `avoidWhen`, `related`, `htmlSemantics` | | `@airframeui/core/rules` | Authoritative markup contract (`AIRFRAME_RULES.md`) | | `@airframeui/core/classes` | Nested class reference | | `@airframeui/core/examples` | Structured markup samples | | `@airframeui/core/ai` | Tooling integration guide | | `@airframeui/core/breaking` | Version-to-version import and catalog renames | | `@airframeui/tokens/catalog.json` | Every `--af-*` token | The catalog regenerates on `@airframeui/core` build. MCP, ESLint, and IntelliSense for Airframe read the same files. Do not invent `af-*` or `--af-*` names that are not in the catalog. ## Airframe MCP [Section titled “Airframe MCP”](#airframe-mcp) **Airframe MCP** (`@airframeui/mcp`) is an optional stdio server. Coding agents look up patterns, tokens, and validate markup on demand. It is not a second source of truth. It reads `@airframeui/core/catalog` and `@airframeui/tokens`. Loop: `search_patterns` → `get_pattern` → `get_example` → compose `af-*` → `validate_markup`. `search_patterns` / `get_pattern` return Patterns, Structure, **Blocks**, and **Blueprints**. Blocks and blueprints include `docsUrl`. Open that URL, then adapt the markup. There is no fixed pattern set for a guide. How to connect: [Airframe MCP](/docs/mcp). MCP does not put CSS on the page. Still install `@airframeui/core`. Without MCP, read the package resources above. Do not guess docs URLs. ## Agent bootstrap [Section titled “Agent bootstrap”](#agent-bootstrap) `npx af init --agents` (via `@airframeui/build`) writes standing orders (`AIRFRAME.md`, or a Cursor / Claude file) pinned to the installed core version. It will not replace a product `AGENTS.md`. Bootstrap is instructions. MCP is live lookup. Complementary. Bootstrap does not write `.cursor/mcp.json`. How to run: [AI Rules → Bootstrap](/docs/ai-rules#bootstrap-agent-docs-af-init---agents). ## How-to [Section titled “How-to”](#how-to) | Page | Use when | | -------------------------------------------------- | --------------------------------------- | | [AI Rules](/docs/ai-rules) | Generating or reviewing markup | | [Airframe MCP](/docs/mcp) | Connecting the server | | [Installation](/docs/installation) | Putting CSS in the app | | [Why Airframe](/docs/why-airframe) | Why the grammar exists | | [Use as much as you need](/docs/under-your-design) | Airframe as the system, or a kit on top | ## Related [Section titled “Related”](#related) * [Introduction](/docs/introduction) * [IntelliSense for Airframe](/docs/vscode-extension) * [ESLint plugin](/docs/eslint-plugin) * [Packages](/docs/packages)