mcpField
N
NeuralNg Angular UI Expert MCP

NeuralNg Angular UI Expert MCP

ローカル
neuralng.dev開発ツール114 週間前に更新

NeuralNg Angular UI Expert MCP について

NeuralNg Angular UI Expert MCPは、AngularプロジェクトでNeuralNgを扱うエージェント向けの読み取り専用サーバーです。コンポーネントやアイコンの検索、UI構成案、テンプレート契約の検証、プロジェクト調査を行い、ファイル変更やコマンド実行はしません。

主な機能

  1. 01コンポーネント検索と契約取得
  2. 02コンポーネントを使ったUI構成案
  3. 03コンポーネント契約に基づくテンプレート検証
  4. 04使用ガイド付きアイコン検索
  5. 05プロジェクト規約と診断の調査

活用シーン

  1. 01UIの要件に合うNeuralNgコンポーネントの検索
  2. 02テンプレートのバインディングと必須インポートの確認
  3. 03テーマ設定とCSSリスクの確認

MCP 対応

MCPサーバーは、NeuralNgのコンポーネント、アイコン、構成案、検証、プロジェクト調査のツールと、カタログや契約のリソースを提供します。読み取り専用で、AngularアプリにMCPランタイムを読み込みません。

設定

ローカルサーバーの設定はどのクライアントでも共通です。コピーしてクライアントの MCP 設定ファイルに貼り付けてください。

mcp.json · 共通設定
{
"mcpServers": {
"hasanaydin7-neuralng": {
"command": "npx",
"args": [
"-y",
"@neural-ng/mcp-server"
]
}
}
}
起動コマンドnpx -y @neural-ng/mcp-server

ローカルサーバーにはマシン上の実行環境(Node.js 18 以上など)が必要です。設定ファイルの場所はクライアントごとに異なります。

パッケージ
npm@neural-ng/mcp-server1.0.0

ツール

20

掲載時のツール一覧 · 2 週間前に更新

パラメーター型必須説明
limitintegerいいえ
querystringいいえ

詳細

@neural-ng/mcp-server

NeuralNg コンポーネントの検索、契約に基づく構成、使用方法の検証、プロジェクトに一貫したガイダンス、コンパクトなテーマのワークフローに対応する、読み取り専用の Angular UI エキスパートインターフェースです。

このサーバーは @neural-ng/core とは別です。Angular アプリケーションがブラウザーで MCP ランタイムを読み込むことはありません。テーマツールはレシピ、検証結果、差分、コンパイルの概要を返します。ファイルへの書き込みやシェルコマンドの実行は行いません。

実行

rc.4 以降、カタログには Editor が含まれ、テーマツールはネイティブオブジェクトを受け付け、空のクエリで範囲を限定した閲覧ができ、プロジェクト検査では CSS のリスクに関するヒントが報告されます。

現在のリリース:1.0.0(安定版の MCP インターフェース)。 Node.js 24.x が必要です。エージェント環境を再現可能にするには、バージョンを固定してください。@latest を指定すると、公開済みの最新リリースが選択されます。

npx -y @neural-ng/[email protected]

汎用 MCP クライアントの設定:

{
  "command": "npx",
  "args": ["-y", "@neural-ng/[email protected]"]
}

このプロセスは stdio を使用します。標準出力は MCP JSON-RPC メッセージ専用です。致命的な診断メッセージは標準エラー出力に書き込まれます。

ツール出力の契約

1.0.0-rc.3 以降、ツールは出力契約を公開します。バリデーターはネイティブ配列を受け付け、プロジェクト検査ではスキャン範囲と意味的な信頼度が別々に示されます。

20 個すべてのツールが tools/list で outputSchema を通知します。サーバーは、正常に処理された structuredContent を返す前に検証します。出力が無効な場合は、成功ではなくツールエラーになります。ツールハンドラーのエラーでは isError: true と、独立した {error: {schemaVersion: 1, message}} 契約が維持されます。これらは、通知された結果スキーマに準拠する正常な出力ではありません。

既存の結果エンベロープとスキーマバージョンは維持されます。新しいフィールドは追加のみであり、利用側は未知のフィールドを許容する必要があります。必須フィールドの削除や型の変更には、結果スキーマバージョンの明示的な変更が必要です。スナップショットテストでは、実際の出力テストと否定テストに加えて、公開されている JSON スキーマの形状を固定します。

リソース

エージェントの機能の検出:

  • neural://server/capabilities — バージョン管理されたツールグループ、結果スキーマ、検査の上限、安全性の保証、互換性に関するガイダンス

コンポーネントおよびパッケージのリソース:

  • neural://catalog
  • neural://package/exports
  • neural://components/{id}/contract
  • neural://components/{id}/readme
  • neural://components/{id}/llms

アイコンのリソース:

  • neural://icons/catalog — パッケージの合計、カテゴリ、バージョン、ブランド検索ポリシーの概要。範囲を限定した検索結果には search_icons を使用してください

テーマのリソース:

  • neural://themes/catalog
  • neural://themes/schema
  • neural://themes/presets
  • neural://themes/presets/neutral
  • neural://themes/presets/glass
  • neural://themes/presets/mist
  • neural://themes/presets/futuristic
  • neural://themes/ai-guide

コンポーネントのリソースは固定 URI として登録されます。サーバーはファイルシステムのパスを受け付けず、任意のファイルを読み込みません。

コンポーネントツール

search_components

query を省略するか、空文字列または空白のみの文字列を渡すと、安定した ID 順で最大 limit 件の契約を閲覧できます(デフォルトは 10 件、最大 20 件)。空でないクエリでは、一致する結果を順位付けします。閲覧できるのは範囲を限定したプレビューであり、全件を網羅するページネーション付きの一覧ではありません。

公開セレクター、エントリーポイント、概要、README ファイル、llms.txt のガイダンスを検索します。

{
  "query": "date calendar localized",
  "limit": 5
}
get_component

コーディングエージェントが使用する、スキーマバージョン付きの Angular API 契約を返します。standard 詳細レベルでは、Signal 入力、モデル、出力、型付きテンプレートコンテキスト、必須プロバイダー、クラス契約名、利用可能なサンプル数を含みます。完全なドキュメントをコンテキストウィンドウに送る必要はありません。

{
  "component": "neural-select",
  "detail": "standard"
}

検索時は detail: "summary" を使用し、すべてのクラススロットと埋め込みサンプルが必要な場合に限って detail: "full" を使用してください。結果は MCP テキストコンテンツと structuredContent の両方で返されます。

get_component_examples

公開済みサンプルのうち、上限付きのリストを、ドキュメントの見出し、言語、コードとともに返します。

{
  "component": "neural-table",
  "limit": 3
}
get_component_contract

既存のクライアント向けに、従来の完全なコントラクトの検索機能を維持しています。新しい統合では、トークン効率のよい詳細レベルを選択できる get_component を使用してください。

{
  "component": "neural-tri-state-checkbox"
}
recommend_components

決定論的なインテントマッチングを使用します。別のモデルやネットワークサービスは呼び出しません。

{
  "goal": "nullable inherited permission checkbox",
  "limit": 3
}

アイコンインテリジェンス

search_icons

名前、カテゴリ、または一般的な UI インテントで、6,184 種類すべてのアウトラインおよび塗りつぶし Neural Icons のバリエーションを検索します。結果は上限付きで、正確な nt クラス、最小限の有効な CSS インポート、すぐに使えるマークアップ、サポートされている効果、アクセシビリティに関するガイダンスが含まれます。ブランドアイコンはデフォルトで除外されます。

{
  "query": "delete user",
  "style": "outline",
  "limit": 10,
  "include_brands": false
}

返されたアイコンが塗りつぶしスタイルをサポートしている場合に限り、style: "filled" を使用してください。カテゴリを指定すると、決定論的な検索範囲を絞り込めます。商標登録されたブランドのグリフが製品で明示的に必要な場合に限り、include_brands: true を設定してください。

コンポジションインテリジェンス

plan_ui

製品要件を、コントラクトに基づく NeuralNg のコンポジションに変換します。結果には、選択されたプリミティブとその理由、正確なスタンドアロンインポート、プロバイダーの要件、構造領域、状態の所有者、アクセシビリティチェック、実装順序、および get_component_examples に直接渡せるコンポーネント ID が含まれます。

{
  "goal": "Admin user management with search, role filter, table and detail drawer",
  "kind": "auto"
}

kind は auto、form、page、table を受け付けます。自動検出は決定論的で、別のモデルやネットワークサービスを呼び出しません。

構造別プランナー

外側のインタラクション形状がすでに決まっている場合は、suggest_form_structure、suggest_page_structure、または suggest_table_structure を使用してください。それぞれ、空でない goal を受け取り、対応する kind が固定された、plan_ui と同じバージョン付きプランコントラクトを返します。

コントラクトの正確性

validate_usage

@angular/compiler で Angular テンプレートを解析し、生成された AST を NeuralNg の公開コントラクトと照合します。Angular の制御フロー、構造ディレクティブ、補間、プロパティ/イベント/双方向バインディング、カスタム要素、ネイティブ要素上の NeuralNg 属性セレクターを理解します。Angular の構文エラー、不明なセレクターやバインディング、必須入力の欠落、無効なリテラルユニオン(エクスポートされた型エイリアスを含む)、アクセスできないアイコンのみのボタン、スタンドアロンインポートの欠落、必須プロバイダー、Toast チャネルの重複について、ソース位置を含む安定した診断コードを報告します。

明示的な ng-template ディレクティブ(neuralTableCell など)と、その中にネストされたコンポーネントもチェックします。イベントリスナーは必須入力を満たしません。モデル出力には、生成された Change サフィックスが使用されます。文字列リテラルのプロパティバインディングは入力ユニオンに照らしてチェックされ、空の静的ラベルや文字列リテラルのアクセシブルラベルは、アイコンのみのボタンのチェックを満たしません。

これはテンプレートコントラクトチェッカーであり、Angular アプリケーション全体のコンパイラーではありません。動的な式の型、実行時のラベル値、テンプレートコンテキストの型、アプリケーションの動作については、引き続き Angular のコンパイルとアプリケーションテストが必要です。

{
  "template": "<neural-button icon=\"trash\"></neural-button>",
  "imports": ["NeuralButton"],
  "providers": []
}

宣言名/プロバイダー名には、空でない名前のネイティブ配列を使用してください。従来の imports_json および providers_json の JSON 文字列も引き続きサポートされます。インポートマップは渡さないでください。両方の形式が送信された場合、トリムおよび重複排除後の名前セットが一致している必要があります。値に矛盾があるか、形式が不正な場合は、明示的なツールエラーが返されます。省略されたフィールドには、従来どおり空配列のデフォルト値が適用されます。

schema-v2 の結果には、valid、パーサーの識別情報とバージョン、構文ステータス、診断、エントリーポイント別にまとめられた正確な推奨インポート、およびプロバイダー要件が含まれます。NNG000 は、コントラクト検証前の Angular 解析エラーを示します。情報提供を目的としたインポート不足の診断ではテンプレートは無効になりませんが、エラー診断では無効になります。

プロジェクトを認識するツール

生成されるカタログには、Core と、独立したバージョン管理が行われる @neural-ng/editor が含まれます。これには、Editor のテンプレートディレクティブ、入力、出力、 型付きクラスが含まれます。コントラクトでは packageName と packageVersion が公開されます。 neural://package/exports は Core のフィールドを保持し、companionPackages を追加します。 installedEditorVersion は、ローカルで解決された Editor のメタデータを報告します。Editor とそのカタログのバージョンが異なる場合、NNP010 は警告を出します。Core のバージョンだけが一致していても、Editor の API が検証されたことにはなりません。認識できないセレクターについても、引き続き診断が行われます。

CSS チェックは実行時の判定ではなく、警告を出します。NNP011 は、hidden を使用する静的に識別可能な要素に一致する、フラットな CSS の display ルールを検出します。NNP012 は、ルートの NeuralNg トークン宣言にある !important を検出します。後続の保護ルールによって、NNP011 の警告が実害のないものになる場合があります。このチェックでは、カスケードの計算、インポートの解決、Sass、インラインのコンポーネントスタイル、 動的セレクター、テーマの相互作用の評価は行いません。:where(:root, ...) だけであれば不具合ではありません。実際のブラウザーで Appearance の切り替えと非表示オーバーレイを確認してください。 ヒント処理は、非表示要素 1000 個、ルール 2000 個、警告 100 件を上限とし、 NNP013 がこれらの制限を報告します。この上限は、ファイルのスキャン範囲とは独立しています。

inspect_project

MCP プロセスの作業ディレクトリとして使用されている Angular ワークスペースを検査し、 宣言された Angular/NeuralNg パッケージのバージョン、ワークスペースの種類、概要の件数、使用されているセレクターと出現箇所、 アイコンクラスとスタイルシート、エントリーポイントごとにまとめたインポート、設定済みプロバイダー、 テーマと Appearance の設定、推定される規約、実行可能な診断結果を返します。外部テンプレート、 インラインのコンポーネントテンプレート、属性ディレクティブは @angular/compiler で解析されるため、存在しない API やアクセシビリティの問題にも、validate_usage と同じ診断が適用されます。

スキャンは読み取り専用で、ファイルシステムのパスは受け付けません。依存関係、 ビルド出力、VCS データ、テスト、宣言ファイル、シンボリックリンクはスキップします。処理はソースファイル 400 個、 ファイルあたり 256 KiB、合計 5 MiB、ディレクトリエントリ 10,000 件までに制限されます。 サイズ超過のファイルは、内容を読み取る前に除外されます。結果では、切り詰めの有無と分析の信頼度を明示します。 analysis.scanCoverage は、制限内での列挙が完了したかどうかだけを報告します。analysis.semanticConfidence は heuristic または insufficient であり、コンパイラレベルの正確性を示すことはありません。 テンプレートには Angular AST 解析を使用し、インポート/プロバイダー/テーマのメタデータには静的ヒューリスティックを使用します。 compilationVerified は常に false です。従来の confidence フィールドは、意味上の確実性ではなく、スキャンの完全性を表す非推奨の別名として維持されます。絶対パスは返されず、 コンポーネント/アイコンの各項目で返される相対パスは最大 25 件です。省略された件数は filesOmitted に保持されます。angularVersion と neuralPackages には、ワークスペースの package.json に宣言された内容が含まれます。オプションの installedCoreVersion と installedAngularVersion は、それぞれ対応するローカルの node_modules パッケージマニフェストから読み取った正確なバージョンを個別に報告します。 読み取るのはワークスペース内の制限されたメタデータのみで、依存関係のソースコードは読み取りません。 Core の互換性判定では、利用可能な場合はインストール済みのメタデータを優先します。その情報がない場合は、依存関係のバージョン範囲を確認する必要があります。独立してリリースされる Core、Icons、Theme、MCP パッケージで、バージョンを統一する必要はありません。 診断では、生成された MCP カタログに存在するセレクターと API を検証します。別のパッケージに由来する不明なセレクターは、有効なものとして暗黙に扱われるのではなく、表示されたままになります。

inspect_neuralng_project は互換性エイリアスとして引き続き利用でき、同じ schema-v2 の結果を返します。新しいエージェントは inspect_project を呼び出してください。

suggest_consistent_ui

inspect_project とコンポジションエンジンを組み合わせます。計画したプリミティブのうち、プロジェクトの規約がすでに適用されているもの、新しいものを特定し、検出したテーマ、スタイル未適用の所有関係、インポートスタイルを維持する方法を示します。schema-v2 の結果には、コンポーネントごとの相対パスの根拠、正確なインポートの再利用・追加の区分、必須プロバイダーの差分、宣言済み Core とカタログのバージョン整合性、範囲を限定したプロジェクトリスク、および get_component_examples と validate_usage への明示的な次の呼び出しが含まれます。inspect_project の結果全体を重複して返すことなく、要点を絞ったプロジェクトコンテキストを返します。

compatibility.evidenceSource は、インストール済みのメタデータと宣言を区別します。contractUsability は、インストール済みの Core とカタログが完全に一致する場合のみ verified-version、宣言または不一致がある場合は review-required、Core がない場合は unavailable になります。verified-version が確認するのはバージョンの整合性のみであり、実行時の正しさではありません。unverifiedAspects は、まだ信頼できない API と動作を示し、requiredActions はバージョンの解決、厳密なコンパイル、ブラウザーでの検証について説明します。従来の status フィールドは互換性のために保持されています。

{
  "goal": "Add a searchable project table with a detail drawer",
  "kind": "table"
}

コンパクトなテーマツール

rc.4 以降は、ネイティブオブジェクトが推奨されます。作成時は options、検証・コンパイル時は recipe、編集時は recipe と patch、差分取得時は left と right を使用してください。既存の *_json 文字列も引き続きサポートされます。両方を指定する場合、構造的に同一である必要があります(オブジェクトのキー順は無視されますが、配列の順序は考慮されます)。必須オブジェクトの欠落、オブジェクト以外の値、不正または競合するレガシー入力はエラーになります。

テーマのワークフローでは、解決済みの 1,348 個のトークンを含む Core と Editor のグラフではなく、小さなレシピを対象とします。

create_theme_recipe
{
  "name": "violet-workspace",
  "options": { "preset": "glass", "primary": "#7c3aed", "radius": "large" }
}
validate_theme_recipe
{
  "recipe": { "schemaVersion": 1, "name": "violet-workspace", "extends": "neutral" }
}
edit_theme_recipe

範囲を限定したプロトタイプセーフなスパースパッチを適用し、結果を検証します。テーマ検証では、宣言のインジェクション、外部 CSS URL、不正なエイリアス、コンパイル前の不明なコンポーネントトークンを拒否します。

{
  "recipe": { "schemaVersion": 1, "name": "violet-workspace", "extends": "neutral" },
  "patch": { "set": { "color.primary": "#7c3aed", "shape.radius": "large" } }
}
diff_theme_recipes

両方のレシピを繰り返し出力する代わりに、変更されたドット区切りのレシピパスのみを返します。

get_component_theme_contract

1 つのコンポーネントでサポートされるテーマプロパティを返します。デフォルトでは detail: "names" を使用し、現在のモード値が必要な場合にのみ detail: "defaults" を指定してください。

{
  "component": "toast",
  "detail": "names"
}
レシピのバージョンと品質メタデータ

Theme MCP ツールが作成するスキーマのバージョンは 1 です。初期プレビュー版のレシピは、まず neural-theme migrate または @neural-ng/theme の migrateThemeRecipe() で移行してください。MCP は読み取り専用のままで、ユーザーファイルを書き換えません。プリセットリソースには安定性と品質ガバナンスのメタデータが含まれており、ユーザーが明示的にプレビュー版のスタイルを求めない限り、エージェントは release のベースラインを優先できます。

compile_theme_recipe

実際の @neural-ng/theme コンパイラーを実行し、検証診断、概要データ、成果物のバイトサイズ、統合手順を返します。モデルコンテキストを通じて CSS やトークンの成果物全体を送信することは意図的に行いません。次のコマンドでファイルを生成してください。

npx neural-theme build

カタログのソース

コミット済みコンポーネントカタログは、次の情報から生成されます。

  • tsconfig.base.json の公開 @neural-ng/core/* パス。
  • 公開 @neural-ng/editor エントリーポイントと、独立したバージョン管理のマニフェスト。
  • 各公開セカンダリエントリーポイントの index.ts。
  • 公開 Angular コンポーネントおよびディレクティブのセレクター。
  • パッケージのエクスポート、README ファイル、llms.txt ファイル。

次のコマンドで再生成し、検証してください。

npx nx run neural-mcp:catalog
npx nx run neural-mcp:catalog-check

品質コマンド

V1 のサポート範囲
  • ランタイム:Node 24。各ツールから返される Core および Editor のバージョンに対応するコントラクトを生成します。MCP サーバーが安定版になっても、独立してバージョン管理される Editor はベータ版のままです。
  • プロジェクトの検査では、設定された作業ディレクトリから Angular CLI、Nx、Angular のパッケージレイアウトを認識します。レイアウトの受け入れテスト用フィクスチャでは、メタデータとテンプレートの検査を実施しますが、すべてのワークスペースタイプを個別にビルドするわけではありません。ワークスペースのルートから開始してください。ネストされたパッケージの解決、パスエイリアス、アプリケーションをまたぐプロバイダーのスコープは、TypeScript コンパイラーの解決処理には含まれません。
  • テンプレートの検証は、Angular の型チェックでもアクセシビリティ監査でもありません。生成した画面に対して、厳格な Angular コンパイルとブラウザーテストを実行してください。
  • CSS の診断は、範囲を限定した静的なヒントであり、計算済みスタイルやカスケードの分析ではありません。外観の切り替えは延期されており、v1 では保証されません。
  • 実際のエージェントによる再試行、成果物の同一性、ブラウザーチェックについては、RC4_ACCEPTANCE.md を参照してください。1 つのシナリオに合格しても、任意の生成 UI が保証されるわけではありません。
npx nx lint neural-mcp
npx nx test neural-mcp
npm run mcp:eval
npx nx build neural-mcp
npx nx run neural-mcp:package-test
npx nx run neural-mcp:mcp-smoke

mcp:eval は、evals/manifest.json にあるバージョン管理されたマニフェストを読み込みます。検査、一貫性の計画、正確なコントラクト、有効なテンプレートの受け入れ、アクセシビリティ、プロバイダーの要件、架空の API の拒否にわたる、10 件の合成に関するリグレッションと、ベータ版終了に向けた既存プロジェクトのユーザー管理シナリオをゲートします。CI では、通常のユニットテストスイートとは独立して実行されます。

mcp-smoke は、@neural-ng/theme と MCP サーバーの両方をパッケージ化し、隔離された一時的なコンシューマーにインストールします。その後、stdio MCP を初期化し、コンポーネントとテーマのリソースを読み込み、コンポーネント検出ツールとコンパクトなテーマコンパイラーツールを呼び出します。

コメント

MCP は初めてですか?

プロトコルの概要から最初のサーバーの導入まで、よくある疑問にまとめて答えます。

AI アプリケーションが外部のツールやデータソースに統一的な方法で接続するためのオープンなプロトコルです。クライアントはモデルとの対話を担い、MCP サーバーはツール・リソース・プロンプトテンプレートを提供します。標準メッセージでやり取りするため、1 つのサーバーを複数のクライアントで再利用できます。