Why LLMs Write Better Code When Your UI Library Isn't in node_modules

If you’ve used Cursor, Claude Code, Windsurf, or GitHub Copilot on an Angular project with a traditional UI library, you’ve probably watched this happen:

1. You prompt the AI: "Build an account settings card with an avatar upload, name input, and role dropdown."
2. The AI writes clean-looking Angular code.
3. The app fails to compile because the AI hallucinated an @Input() [clearable]="true" that exists in PrimeNG v16 but was renamed in v18.
4. When you ask it to adjust the padding or border color, it writes three nested ::ng-deep selectors targeting internal DOM classes that don't exist in the current version.

The AI isn't stupid. It is blind.

A traditional component library packages its templates, styles, and internal behavior into pre-compiled bundles in node_modules. Your AI coding assistant only sees the exported TypeScript definition file (.d.ts) and whatever fuzzy memory it retained from its training cutoff. It cannot see the template. It cannot see the DOM structure. It cannot inspect the actual styles.

When you switch to a copy-in component architecture—supported by structured agent metadata (llms.txt) and a live Model Context Protocol (MCP) server—the AI coding experience fundamentally changes.

llms.txt is a proposed standard “to provide information to help language models use a website at inference time.” The Model Context Protocol “standardizes how applications provide context to LLMs.” Base UI (Angular) at base-ui.net publishes both: https://base-ui.net/llms.txt and npx -y base-ui-mcp. Agents already see npm kits everywhere — @angular/material had 2,443,745 weekly downloads for 16–22 Aug 2026 (npm) — so copy-in source in the repo is how a model can read the actual template. We do not claim a measured accuracy multiplier — the argument is architectural, not a benchmark.

---

1. The Context Gap: Black Boxes vs. Transparent Code

LLMs generate code by predicting tokens based on surrounding context. The richer and more accurate the context, the higher the code quality.

┌────────────────────────────────────────────────────────┐
│ Traditional npm Library (Closed Box)                   │
│                                                        │
│  node_modules/@vendor/ui/                              │
│   ├── index.d.ts       <── AI only sees signatures     │
│   └── bundle.mjs       <── Compiled, minified, opaque │
│                                                        │
│  Result: Hallucinated inputs, broken ::ng-deep hacks   │
└────────────────────────────────────────────────────────┘

┌────────────────────────────────────────────────────────┐
│ Base UI Copy-In Model (Full Context)                   │
│                                                        │
│  src/app/components/card/                              │
│   ├── card.component.ts   <── Standalone, signal inputs│
│   ├── card.component.html <── Standard Tailwind classes│
│   └── card.spec.ts        <── Real test examples       │
│                                                        │
│  Result: Editable source, Tailwind utilities as written│
└────────────────────────────────────────────────────────┘

When an agent needs to customize a Base UI component:

• It opens src/app/components/card/card.component.ts directly into its context window.
• It sees every modern Angular signal input (input<string>()), output (output<void>()), and boolean transform.
• It sees the exact Tailwind CSS 4 utility classes in the template.
• It can add an internal layout slot, tweak responsive spacing (sm:p-6 p-4), or inject a custom badge without guessing at vendor APIs or writing leaky CSS overrides.

---

2. No More ::ng-deep Hallucinations

The single biggest failure mode for AI in Angular styling is component encapsulation piercing. When an LLM wants to change how an npm component looks, it almost universally resorts to ::ng-deep:

/* What an AI generates when fighting node_modules */
::ng-deep .p-dropdown .p-dropdown-label {
  padding: 0.75rem 1rem !important;
  border-radius: 0.5rem !important;
}

This code is a maintenance nightmare: it leaks across route boundaries, defeats view encapsulation, and breaks silently on library updates.

With Base UI, components use pure Tailwind CSS 4. When an AI agent needs to modify a component's appearance, it simply adjusts the Tailwind utility string right in the template:

<!-- What an AI writes when it owns the component source -->
<div class="flex items-center justify-between p-6 border-b border-slate-200 dark:border-slate-800">
  <h3 class="text-lg font-semibold text-slate-950 dark:text-white">Profile Information</h3>
  <span class="text-xs font-medium text-slate-500">Auto-saves</span>
</div>

Tailwind utility classes are standard tokens that models already know well. There are no proprietary CSS custom properties to memorize and no selector specificity wars.

---

3. Grounding Agents with llms.txt

Training data goes stale. An AI trained six months ago doesn't know about the newest components, the latest signal form patterns in Angular 22, or the updated Tailwind 4 syntax.

Base UI publishes machine-readable documentation at the root of the domain:

• base-ui.net/llms.txt: A curated index of components, architecture rules, and conventions for AI assistants.
• base-ui.net/llms-full.txt: The comprehensive API reference and code examples for all 208 components and blocks.

When you configure Cursor or Claude with @https://base-ui.net/llms.txt, the model is instantly grounded with:

• The exact base- prefix naming convention (<base-card>, [base-button]).
• Rules for boolean input coercion ({ transform: booleanAttribute }).
• Best practices for standalone components, @if / @for control flow, and zoneless reactivity.

Instead of guessing how a component might work in Angular 21+, the model reads the authoritative schema before writing a single character.

---

4. Active Agent Tooling with Model Context Protocol (MCP)

Grounding via text files is great; giving agents executable tools is transformative.

Base UI provides a dedicated MCP server: base-ui-mcp. It connects to Cursor, Claude Code / Desktop, VS Code (GitHub Copilot), Windsurf, and other MCP hosts via stdio JSON-RPC. Put this in .cursor/mcp.json (or the equivalent MCP settings file):

{
  "mcpServers": {
    "base-ui": {
      "command": "npx",
      "args": ["-y", "base-ui-mcp"],
      "env": {
        "BASE_UI_CWD": "${workspaceFolder}"
      }
    }
  }
}

Point BASE_UI_CWD at the consumer app root (where base-ui.json lives), not at this monorepo. Setup for each host: Getting started — AI agents (MCP).

With MCP active, your AI assistant isn't just generating snippets—it can interact with the Base UI registry in real time. V1 tools (free tier only; Pro installs still use the CLI with a license key):

1. list_components: Discovers available primitives, form blocks, and layouts in the registry.
2. search_components: Finds relevant components based on natural language requirements ("I need a tag picker with autocomplete" → returns combobox + badge).
3. get_component: Inspects metadata (and free source when includeSource is set) without guessing props.
4. add_components: Runs the CLI under the hood (npx base-ui-cli add --yes) to copy free components into your workspace. Pro names are rejected.

You: "Build an account settings card with a name field and a role dropdown."

Agent:
  1. Calls MCP: search_components("card, select, button")
  2. Calls MCP: add_components({ "names": ["card", "select", "button"] })
  3. Inspects the copied files in src/app/components/.
  4. Wires the card layout and signal state in your view.

Need a Pro widget such as data-table? Use npx base-ui-cli add data-table with BASE_UI_LICENSE_KEY — MCP will not install it.

---

5. Better Test Generation and Self-Correction

Every Base UI component comes with a pre-written, passing test spec (.spec.ts).

When an AI coding agent creates a new feature using copied-in Base UI components, it doesn't have to invent testing harnesses from scratch. It reads card.spec.ts or dialog.spec.ts, understands how the component is tested with TestBed and Angular's native testing utilities, and writes realistic unit tests for the screen it just assembled.

If a test fails during an automated run, the AI can read the test failure, inspect the local component implementation, and fix the bug in place—a workflow that is impossible when the broken logic is locked inside node_modules.

---

Summary: The AI-Native Angular Stack

The era of struggling with closed component libraries in AI workflows is over. When your UI code lives in your project, your AI tools can see the templates, follow llms.txt, and call real MCP tools instead of guessing at vendor APIs.

---

Try it with your AI Agent

Ready to turn your AI assistant into an expert Angular UI engineer?

1. Initialize Base UI:

   npx base-ui-cli init --yes
   

2. Add MCP — save the .cursor/mcp.json snippet above (same mcpServers shape for VS Code, Windsurf, and Claude Desktop). Reload the window and confirm the base-ui server is connected.
3. Point your agent to the index: Add https://base-ui.net/llms.txt to your editor's project rules or context.

Browse the full catalog of 208 components, blocks, and templates at base-ui.net.