ng-blatui — Claude Code MCP server: what it does, how to install
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.
claude mcp add --transport http ng-blatui https://ngblatui.remix-it.com/mcpWhat ng-blatui 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.
What it helps with
- find a ready-made Angular component or block by task description
- check which
input()andoutput()a component accepts - choose between a batteries-included
BuiInputFieldand a barebuiInput+buiFieldprimitive - understand how to localize date formatting and built-in strings
- see which page templates the library includes (dashboard, pricing, CRM)
Example prompts for the agent
- 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
How to install ng-blatui
Platform CLI: remote server
claude mcp add --transport http ng-blatui https://ngblatui.remix-it.com/mcpPlatform CLI: remote server
codex mcp add ng-blatui --url https://ngblatui.remix-it.com/mcpConfig file
{
"mcpServers": {
"ng-blatui": {
"url": "https://ngblatui.remix-it.com/mcp"
}
}
}Config file
{
"servers": {
"ng-blatui": {
"type": "http",
"url": "https://ngblatui.remix-it.com/mcp"
}
}
}Platform CLI: remote server
gemini mcp add -t http ng-blatui https://ngblatui.remix-it.com/mcpStep by step, with commands for each platform: How to add an MCP server to Claude Code, Codex, Cursor, VS Code, Gemini CLI and more
Questions about ng-blatui
How to install ng-blatui in Claude Code?
Run claude mcp add --transport http ng-blatui https://ngblatui.remix-it.com/mcp. The server connects over HTTP and requires no local dependencies.
What does the ng-blatui MCP server do?
It 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 elements by description and gets their typed API: input() and output() signatures, usage examples and setup requirements.
Which Angular versions does ng-blatui support?
Angular 21 and 22. Components are standalone, built on signals (input(), model(), output()), work under zoneless mode and SSR. They require @angular/core, @angular/common, @angular/forms, @angular/cdk and @angular/aria.
