AI-First Workflow

ONE SOURCE OF TRUTH

Context is part of the public API

NeuralNg publishes human documentation, compact agent rules and machine-readable contracts together. An agent does not need to guess a class name, selector, model, Forms adapter or package entry point.

Connect the read-only MCP server

The MCP server runs over stdio and is separate from the Angular runtime. It cannot edit files, execute shell commands, access the network or read arbitrary paths; it only exposes committed NeuralNg contracts and theme tools.

npx -y @neural-ng/mcp-server

{
  "mcpServers": {
    "neural-ng": {
      "command": "npx",
      "args": ["-y", "@neural-ng/mcp-server"]
    }
  }
}

The reliable agent loop

Ask the agent to discover before generating. The returned contract is the boundary; project conventions and product requirements complete it.

1. 01

   Discover

   Search by UI goal instead of guessing a component name.

2. 02

   Inspect

   Resolve the exact selector, entry point, models and Forms support.

3. 03

   Generate

   Compose only documented APIs with your application requirements.

4. 04

   Verify

   Run formatting, typecheck, tests and accessibility checks.

1. search_components({
  "query": "button with loading state and badge",
  "limit": 5
})

2. get_component_contract({
  "component": "neural-button"
})

3. Read neural://components/button/llms
4. Generate from the returned entry point, selector and models
5. Run the project's typecheck and tests

Use the smallest useful context

Start with the package-level architecture, then load only the target component's context. Component llms.txt files are exported from the npm package beside their README files, so guidance stays aligned with the installed version.

@neural-ng/core/llms.txt
@neural-ng/core/button/llms.txt
@neural-ng/core/button/README.md
@neural-ng/mcp-server/llms.txt

Prefer MCP resources such as neural://components/button/llms when the client supports MCP. Use package files as the portable fallback.

Write prompts as acceptance criteria

Describe the user outcome, constraints and verification—not an imagined NeuralNg API. Let discovery provide the syntax.

Build a standalone Angular 22+ save action with NeuralNg.

Requirements:
- Discover the exact Button contract through the NeuralNg MCP server.
- Use only documented secondary entry points, selectors and inputs.
- Show a loading label while saving and block duplicate activation.
- Use the documented semantic output.
- Preserve SSR safety and native accessibility.
- Do not invent an NgModule, alias, input or output.
- After generating, run typecheck and the relevant tests.

A contract-grounded result

The Button contract yields the canonical class, granular entry point, native loading behavior and semantic clicked output.

import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
import { NeuralButton } from '@neural-ng/core/button';

@Component({
  selector: 'app-save-action',
  imports: [NeuralButton],
  template: `
    <neural-button
      label="Save changes"
      icon="nt nt-check"
      [loading]="saving()"
      loadingLabel="Saving changes"
      (clicked)="save()"
    />
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class SaveAction {
  readonly saving = signal(false);

  async save(): Promise<void> {
    if (this.saving()) return;
    this.saving.set(true);

    try {
      await this.persist();
    } finally {
      this.saving.set(false);
    }
  }

  private async persist(): Promise<void> {
    // Call the application data layer.
  }
}