# ng-blatui

The ng-blatui MCP server gives the agent access to a catalog of 157 components, 16 blocks, 70 charts and 35 page templates from the Angular UI library. The agent searches for elements and reads their typed API.

- MCP server · `type=mcp` · Claude Code, Codex, Cursor, GitHub Copilot, Windsurf (Devin Desktop), Cline, Zed, Gemini CLI · ★ 17
- Author: anousss007
- License: MIT · policy=link-only · description only; the file stays with the author
- Source: https://github.com/anousss007/ng-blatui
- Updated: 2026-09-07
- HTML: https://affpapa.org/en/nevibecode/mcp/ng-blatui

## What it does

The server connects over HTTP and returns descriptions of components, blocks, charts and page templates from ng-blatui, a BlatUI port for Angular. Components are built on `@angular/aria` and CDK, work with Angular 21 and 22, support SSR and zoneless mode. Every form control implements `ControlValueAccessor`; styling is Tailwind CSS v4 with oklch tokens.

The agent calls search tools and gets signatures for `input()`, `output()`, `model()` plus usage examples: how to import the class, which selector to use (`bui` or an attribute like `buiButton`), how to pass a theme (`tone="success"`), locale or icon. Without the `@source '../node_modules/ng-blatui'` line in `styles.css`, Tailwind will not scan the library templates and components will render unstyled.

## Requirements
- Remote server: `https://ngblatui.remix-it.com/mcp`

## Install

### Claude Code (native platform)

**Platform CLI: remote server**
```bash
claude mcp add --transport http ng-blatui https://ngblatui.remix-it.com/mcp
```

### Codex

**Platform CLI: remote server**
```bash
codex mcp add ng-blatui --url https://ngblatui.remix-it.com/mcp
```

### Cursor

**Config file**
File `.cursor/mcp.json`:
```json
{
    "mcpServers": {
        "ng-blatui": {
            "url": "https://ngblatui.remix-it.com/mcp"
        }
    }
}
```

### GitHub Copilot

**Config file**
File `.vscode/mcp.json`:
```json
{
    "servers": {
        "ng-blatui": {
            "type": "http",
            "url": "https://ngblatui.remix-it.com/mcp"
        }
    }
}
```

### Gemini CLI

**Platform CLI: remote server**
```bash
gemini mcp add -t http ng-blatui https://ngblatui.remix-it.com/mcp
```

## When to use it
- find a ready-made Angular component or block by task description
- check which `input()` and `output()` a component accepts
- choose between a batteries-included `BuiInputField` and a bare `buiInput` + `buiField` primitive
- understand how to localize date formatting and built-in strings
- see which page templates the library includes (dashboard, pricing, CRM)

## Example prompts
- Find an ng-blatui component for a date range picker and show an example with `formControl`
- How do I add ng-blatui to an Angular 22 project with Tailwind v4?
- List all ng-blatui blocks suitable for a landing page

## Similar
- [Front-End Checklist](https://affpapa.org/en/nevibecode/mcp/front-end-checklist.md) — MCP server · ★ 74559
- [tldraw](https://affpapa.org/en/nevibecode/mcp/tldraw.md) — MCP server · ★ 51091
- [Figma-Context-MCP](https://affpapa.org/en/nevibecode/mcp/figma-context-mcp.md) — MCP server · ★ 16062
- [mcp-server-chart](https://affpapa.org/en/nevibecode/mcp/mcp-server-chart.md) — MCP server · ★ 4402
- [Dembrandt](https://affpapa.org/en/nevibecode/mcp/dembrandt.md) — MCP server · ★ 3821
- [RevoGrid DataGrid MCP Pro](https://affpapa.org/en/nevibecode/mcp/revogrid-datagrid-mcp-pro.md) — MCP server · ★ 3450

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md