---
title: AI & Agent Tooling
description: Point Cursor, Claude Code, GitHub Copilot, and any LLM at WireKit — a local MCP server, machine-readable manifests (components.json, llms.txt), project-side schema exports, the .md raw-source trick, and a ready-made Cursor rules file.
visibility: guest
draft: false
related:
  - /cli-reference
  - /extending/component-registry
  - /getting-started
---

# AI & Agent Tooling

WireKit is designed to be **legible to large language models and AI coding agents**. Every component shares one predictable `<x-wirekit::*>` namespace, every prop and slot is published in a machine-readable schema, and every documentation page is downloadable as raw Markdown — so whatever assistant you work with can discover the full component library, suggest the right tag, and write correct Blade the first time.

This page is the single reference for that surface: the public manifests served from `docs.wirekit.app`, the project-side Artisan exports you run inside your own app, and the editor and agent integrations that tie them together. Everything here is additive — none of it changes how your app builds or ships.

## Quick start: onboard your assistant

Paste this into your AI assistant (Cursor, Claude Code, ChatGPT, GitHub Copilot Chat, or any other) to point it at WireKit's full surface in one shot:

```text
WireKit is a free, MIT-licensed UI component library for Laravel Livewire.
Every component is a Blade tag of the form <x-wirekit::name>.

- Machine-readable component index (every component, prop, slot, category):
  https://docs.wirekit.app/components.json
- Concise LLM overview:
  https://docs.wirekit.app/llms.txt
- Raw Markdown for any page: append .md to its URL, e.g.
  https://docs.wirekit.app/components/modal.md

Use these to write correct WireKit Blade. Prefer composing existing
WireKit components over hand-rolling raw HTML.
```

The assistant now knows where to look up any component instead of guessing prop names — the single biggest win for accuracy.

## Why WireKit works well with AI

- **One namespace, zero guesswork.** Every component is `<x-wirekit::*>`. An assistant that learns the pattern once can compose the entire library — no per-component import lines, no ambiguous class names to disambiguate.
- **A machine-readable schema.** `components.json` lists every component with its exact prop names, types, defaults, and slots — so an agent reads the contract instead of hallucinating it.
- **Raw Markdown per page.** Append `.md` to any docs URL to get the original source, ready to drop into a context window. The examples are guaranteed to match what a developer sees because it is the same source that renders the page.
- **Project-side exports.** Artisan commands emit the same schema from inside your app, so an agent working in your repository understands WireKit with no network access at all.
- **A ready-made rules file.** `php artisan wirekit:cursor-rules` drops a Cursor rules file into your project so the editor's assistant follows WireKit conventions automatically.
- **A live MCP server.** `php artisan wirekit:mcp-serve` lets an MCP-capable editor query the component catalog as live tools while you author — so it reads the real props and design tokens instead of recalling them.

## Machine-readable manifests

Two manifests are published at the root of `docs.wirekit.app` and regenerated on every docs deploy, so they always describe the current release. Fetch them directly — no authentication, no rate limit.

| Manifest | URL | What it contains |
|----------|-----|------------------|
| **Component index** | [`components.json`](https://docs.wirekit.app/components.json) | Every component with its props, slots, category, and docs URL |
| **LLM overview** | [`llms.txt`](https://docs.wirekit.app/llms.txt) | A concise, plain-text overview written for language models |

### components.json — the component index

The canonical machine-readable description of the library. Each entry carries the component's tag name, its category, every prop with its type and default, its slots, and a link to the human docs page. An agent fetches it once and writes against the real contract:

```bash
# 1. Pull the full component index (props, slots, categories for every component).
curl -s https://docs.wirekit.app/components.json

# 2. Or pipe it through jq to list just the tag names.
curl -s https://docs.wirekit.app/components.json | jq -r '.components[].name'
```

### llms.txt — the LLM overview

A short, plain-text orientation file describing what WireKit is, the `<x-wirekit::*>` namespace, and where to find the deeper manifests. It follows the emerging `llms.txt` convention for exposing a site to language models, and it is the smallest possible file to seed an assistant's context before it dives into `components.json`.

## Raw Markdown for any page

Every documentation page is available as raw Markdown — append `.md` to its URL:

```text
https://docs.wirekit.app/components/button       → the rendered page
https://docs.wirekit.app/components/button.md    → the raw Markdown source
```

Drop the Markdown straight into a chat context window or a retrieval index. Because it is the exact source that renders the page, the code examples an assistant reads are the same ones a developer sees — no drift between what the model learns and what actually ships.

## Project-side exports

Prefer to keep everything local? Three Artisan commands emit the same machine-readable data from inside your own app — ideal for an agent working in your repository without network access, or for committing a schema snapshot your whole team shares. Full flag documentation lives in the [CLI Reference](/cli-reference).

### `wirekit:export-json` — the schema manifest

Emits the same component schema as `components.json`, generated from the package installed in your app:

```bash
# 1. Print the schema to stdout (machine-minified JSON).
php artisan wirekit:export-json

# 2. Add --pretty for a human-readable, diff-friendly file you can commit.
php artisan wirekit:export-json --pretty > .wirekit-schema.json
```

::: tip
`php artisan wirekit:install` already writes a `.wirekit-schema.json` to your project root for exactly this purpose — a zero-configuration feeder file for IDE extensions and AI tools. Commit it for stable autocomplete across your team, or add it to `.gitignore` to keep it fresh on every install. It is regenerated on every `wirekit:install` run.
:::

### `wirekit:export-api-map` — an AI-friendly sitemap

Emits a hierarchical, machine-readable sitemap of every WireKit surface — components, Alpine plugins, and docs routes. It is built specifically for MCP servers, Claude Code, ChatGPT Codex, Cursor, Aider, and other AI tooling that wants to know which surfaces exist and where to read more:

```bash
# 1. Emit the AI-friendly sitemap of every WireKit surface.
php artisan wirekit:export-api-map
```

## Editor & agent integration

### Cursor

`wirekit:cursor-rules` publishes WireKit's Cursor rules file to `.cursor/rules/wirekit.mdc` in your project. The file teaches Cursor's assistant the `<x-wirekit::*>` namespace, the composition conventions, and the house rules — so completions follow WireKit patterns from the start:

```bash
# 1. Publish the WireKit rules file into .cursor/rules/wirekit.mdc.
php artisan wirekit:cursor-rules

# 2. Re-run with --force to overwrite an existing copy after an upgrade.
php artisan wirekit:cursor-rules --force
```

Commit `.cursor/rules/wirekit.mdc` so every teammate's editor shares the same rules.

### MCP server (live, local)

`php artisan wirekit:mcp-serve` runs a local **Model Context Protocol** server over stdio (JSON-RPC 2.0). An MCP-capable editor spawns it as a child process and queries the component catalog **live** while you author — so the assistant reads real prop signatures and design tokens instead of recalling them. It is local and read-only: no port, no daemon, no network, and always version-matched to the WireKit installed in your app. It exposes four tools:

- `search_components` — find components by name or description
- `list_components` — every component, grouped by category
- `get_component` — one component's props, slots, sub-components, and docs URL
- `get_tokens` — the design-token reference (colors, spacing, radii, and the rest)

Point your editor's MCP settings at the command. The universal stdio form (works in a project-local `.cursor/mcp.json` and most MCP clients):

```json
{
  "mcpServers": {
    "wirekit": {
      "command": "php",
      "args": ["artisan", "wirekit:mcp-serve"]
    }
  }
}
```

The server must run from your Laravel project root (where `artisan` lives) — a project-local `.cursor/mcp.json` does this automatically. For Claude Code, register it from the project root:

```bash
# 1. Register the WireKit MCP server (run from your project root).
claude mcp add wirekit -- php artisan wirekit:mcp-serve
```

It is not meant to be run by hand — the editor manages its lifecycle.

**No MCP client?** Any agent that runs in your repository works just as well against the project-side exports: point it at the committed `.wirekit-schema.json` (or run `wirekit:export-api-map`) so it resolves component names and props locally, with no network round-trip. The api-map's hierarchical shape lets a tool suggest the right surface and then fetch the matching docs page on demand.

### GitHub Copilot and other assistants

Any assistant that reads your workspace benefits from a committed `.wirekit-schema.json` at the project root — it surfaces every component and prop as the model indexes your repository. Pair it with the published `components.json` for the always-current release schema.

## CLI introspection

For an agent that can run shell commands, two read-only commands expose the library without leaving the terminal:

```bash
# 1. List every component — optionally filtered by category.
php artisan wirekit:list
php artisan wirekit:list --category=Forms

# 2. Reveal one component's props, slots, and usage.
php artisan wirekit:show button
```

## Prompting tips

- **Anchor the assistant first.** Give it the quick-start block above before asking for components, so it looks up `components.json` instead of guessing prop names.
- **Ask for composition, not raw HTML.** WireKit's value is in composing `<x-wirekit::row>`, `<x-wirekit::card>`, `<x-wirekit::stat>`, and friends — prompt for those rather than `<div>` scaffolding.
- **Pin the version.** If you committed `.wirekit-schema.json`, tell the assistant to treat it as the source of truth so it matches your installed release exactly.

## See also

- [CLI Reference](/cli-reference) — every flag for `wirekit:export-json`, `wirekit:export-api-map`, and `wirekit:cursor-rules`
- [ComponentRegistry — Programmatic Discovery](/extending/component-registry) — the PHP API behind the manifests
- [Getting Started](/getting-started) — install WireKit and render your first component