AI & MCP

Three ways to plug in

• MCP server — npx ng-blatui-mcp: tools to list, search and fetch full docs + code for any item. Works in any MCP client.
• llms.txt — the llms.txt standard index, auto-discovered by many tools: /llms.txt.
• registry.json — a machine-readable catalog of every component, block, chart and template: /registry.json.

Every docs page is server-prerendered, so an agent can also fetch /components/<slug> directly and read the live example, props and code as plain HTML.

1. Add the MCP server

Claude Code, in one command:

claude mcp add ng-blatui -- npx -y ng-blatui-mcp

Otherwise it runs over stdio as npx -y ng-blatui-mcp. Most clients use a mcpServers map — paste this into the config file from the table below:

{
  "mcpServers": {
    "ng-blatui": {
      "command": "npx",
      "args": ["-y", "ng-blatui-mcp"]
    }
  }
}

On Windows, some clients need "command": "cmd" with "args": ["/c", "npx", "-y", "ng-blatui-mcp"].

Clients with a different shape

VS Code (GitHub Copilot agent mode) — .vscode/mcp.json, the top-level key is servers:

{
  "servers": {
    "ng-blatui": {
      "type": "stdio",
      "command": "npx",
      "args": ["-y", "ng-blatui-mcp"]
    }
  }
}

Zed — settings.json, key is context_servers with a nested command:

{
  "context_servers": {
    "ng-blatui": {
      "command": { "path": "npx", "args": ["-y", "ng-blatui-mcp"] }
    }
  }
}

OpenAI Codex CLI — ~/.codex/config.toml (TOML):

[mcp_servers.ng-blatui]
command = "npx"
args = ["-y", "ng-blatui-mcp"]

Any other MCP-capable client works the same way — run npx -y ng-blatui-mcp over stdio and name it ng-blatui.

2. Tools the server exposes

• list_components — all components, optional category filter
• list_blocks · list_charts · list_templates
• search({ query }) — keyword search across the catalog
• get_docs({ name }) — full usage, props and copy-paste code for any slug

It reads the live registry and falls back to a copy bundled in the package when offline.

3. Editor rules (optional)

For tools that read a rules file, drop this into .cursor/rules/ng-blatui.md, .windsurfrules, .github/copilot-instructions.md or your AGENTS.md:

# ng-blatui usage
- UI library: ng-blatui (Angular 21 & 22, standalone, signals, zoneless, SSR-safe). Install: npm i ng-blatui.
- Import component classes from the "ng-blatui" barrel into a standalone component's imports[] (no NgModule).
- Selectors are prefixed "bui": <bui-avatar>, <button buiButton>, <input buiInput>, <span buiBadge tone="success">.
- Inputs/outputs are signals; form controls implement ControlValueAccessor (Reactive/Template/Signal forms).
- Theme with Tailwind v4 + oklch CSS tokens (--primary, --background, --border, --radius).
- Don't guess names/props: use the ng-blatui MCP server (get_docs), /registry.json, or /components/<slug>.

More

Full per-client guide: USING-WITH-AI.md. The MCP server is published as ng-blatui-mcp on npm.