AI-assisted development | Neural Native

Choose a skill, then add MCP if useful

Neural AI helps coding agents work with Neural's published APIs. The neural-native skill supplies task-specific guidance, references and examples. Install it on its own to get started.

The optional local MCP server lets a compatible agent discover components, inspect contracts, retrieve examples and check common usage errors. It serves separate Web and Native catalogues; the skill does not depend on this server.

Use the matching versions

This guide uses neural-native 0.1.0 with @neural-ui/native 0.1.0-beta.2 and Angular 22.2.2. Its Angular Native baseline is 0.18.2.

MCP 0.2.1 contains Web Core 2.0.3 and Native 0.1.0-beta.2. It requires Node 22.22.3 or later. Select library native and version 0.1.0-beta.2 explicitly in tool calls.

Inspect package.json and the lockfile in your application first. For Core 2.0.1, keep Web skill 0.1.0 and MCP 0.2.0 until you intentionally upgrade the application. A version mismatch is reported, not silently converted.

Terminal

node --version
npm ls @neural-ui/native @ng-native/core @ng-native/components

Release and compatibility details

Install the skill in Codex

From your application directory, run the command below with Node and npm available. It installs the complete skill from a pinned GitHub release into .agents/skills/neural-native; it does not install the Neural component package.

Keep the references and examples alongside SKILL.md. Start a new Codex session if the skill is not listed, then invoke $neural-native. Review an existing installation before replacing it.

Terminal · Codex

npx --yes skills@1.7.2 add https://github.com/PedroMorenoTrujillo/neural-ai/tree/neural-native-v0.1.0/skills/neural-native --skill neural-native --agent codex --copy --yes

Codex skill documentation

Install the skill in Claude Code

For Claude Code, choose the command below instead. The skill is copied to .claude/skills/neural-native. Invoke /neural-native with your request. You can install for both agents if you use both.

The skills are MIT licensed and require no Neural account or API key. Your coding agent has its own installation, access and usage requirements.

Terminal · Claude Code

npx --yes skills@1.7.2 add https://github.com/PedroMorenoTrujillo/neural-ai/tree/neural-native-v0.1.0/skills/neural-native --skill neural-native --agent claude-code --copy --yes

Claude Code skill documentation

Give the agent a concrete task

Include the library, installed version, desired interaction and expected result. Ask the agent to consult the installed public contracts before writing bindings. The example below uses Codex; in Claude Code, replace $neural-native with /neural-native.

The skill guides the work but does not apply changes by itself. Review the agent's proposed changes and let it compile and test the application.

Prompt

Use $neural-native with @neural-ui/native@0.1.0-beta.2.
Create a standalone Angular component with a Save button and a signal
that shows confirmation after activation. Inspect NeuButtonComponent's
public import and output first. Use Native controls and (pressed), not Web DOM buttons.
Compile the component and test the interaction.

Connect the optional MCP server

Choose the line for your agent. Codex's configuration is per user by default; Claude Code's command below explicitly uses project scope and creates or updates .mcp.json. Review the existing configuration before adding a server with the same name. Your client starts the local stdio process when it connects.

The first download needs npm access. During execution, this server uses bundled references, makes no network requests, does not read your project files and does not write them. A compatible MCP client is required; this is not an HTTP endpoint or a ChatGPT web connector.

Terminal · MCP

codex mcp add neural-ui -- npx --yes neural-ui-mcp@0.2.1
claude mcp add --transport stdio --scope project neural-ui -- npx --yes neural-ui-mcp@0.2.1

Inspect the actual Button contract

Ask your agent to call get_api with the arguments below. They are tool arguments, not a terminal command. The response contains the public selector, inputs and outputs of NeuButtonComponent.

Native Button uses label and emits pressed. Do not reuse the Web selector button[neu-button] or its neuClick output. Use list_components to discover another component, search_documentation for guidance and get_example for a complete bundled example.

get_api · arguments.json

{
  "library": "native",
  "version": "0.1.0-beta.2",
  "entrypoint": "@neural-ui/native/button",
  "symbol": "NeuButtonComponent"
}

Detect an incorrect binding

This example intentionally uses the wrong output. Ask your agent to send the complete source as source to validate_usage, with library native, version 0.1.0-beta.2 and filename ai-example.ts. It should return valid: false and report the unknown output click.

The server does not change the code. Ask the agent to apply the documented output from get_api, then run validate_usage again.

ai-example.ts

import { Component, signal } from '@angular/core';
import { View, Text } from '@ng-native/components';
import { NeuButtonComponent } from '@neural-ui/native/button';

@Component({
  selector: 'app-ai-example',
  imports: [View, Text, NeuButtonComponent],
  template: `
    <view [style]="{ padding: 24, gap: 16 }">
      <neu-button label="Save" (click)="save()" />
      <text>{{ status() }}</text>
    </view>
  `,
})
export class AiExample {
  readonly status = signal('No changes saved');

  save(): void {
    this.status.set('Changes saved in this example');
  }
}

Apply the correction and test it

The corrected standalone component below updates its confirmation signal when Save is activated. This example changes local state only. Validate its complete source again; valid: true means that the static validator found no errors within its supported scope.

Mount it in your Angular Native application, compile it and exercise the button on iOS and Android. Use the testing guide for platform checks.

ai-example.ts

import { Component, signal } from '@angular/core';
import { View, Text } from '@ng-native/components';
import { NeuButtonComponent } from '@neural-ui/native/button';

@Component({
  selector: 'app-ai-example',
  imports: [View, Text, NeuButtonComponent],
  template: `
    <view [style]="{ padding: 24, gap: 16 }">
      <neu-button label="Save" (pressed)="save()" />
      <text>{{ status() }}</text>
    </view>
  `,
})
export class AiExample {
  readonly status = signal('No changes saved');

  save(): void {
    this.status.set('Changes saved in this example');
  }
}

Understand what is checked

validate_usage checks imports, public symbols, literal inline templates, known inputs and outputs, required inputs and conflicting form ownership. It does not execute the source or resolve the full Angular application.

It does not type-check expression values, external templates or component scopes, and it does not verify layout, accessibility or device behavior. compilationChecked is always false. Keep Angular compilation, application tests and interaction checks in your workflow.

Resolve common setup issues

Skill not listed: check that the whole neural-native folder is in your agent's skills directory, avoid duplicate installations and start a new session.

MCP does not start: check node --version, npm access on the first run and the client's MCP status. Running npx alone waits for protocol input; connect through the client instead.

Version mismatch: compare your installed package with this guide's baseline and choose the matching skill and MCP release. Do not change application dependencies just to suppress the error.

Neural AI source and releases