open-index/open-npm huggingface dataset:
npm package: @ng-annotate/mcp-server
Description: MCP server for ng-annotate-mcp — exposes Angular browser annotations as MCP tools for AI agents
Latest version: 0.10.1

# @ng-annotate/mcp-server

MCP server for [ng-annotate-mcp](https://github.com/yngvebn/ngagentify) — a dev-only Angular toolchain addon that lets you annotate components in the browser and have an AI agent (Claude) act on those annotations in real time.

> Heavily inspired by [agentation.dev](https://agentation.dev/) — check it out for the original concept.

## What this server does

Exposes MCP tools that an AI agent uses to read and act on browser annotations:

| Tool | Description |
|---|---|
| `list_sessions` | List all browser sessions |
| `get_session` | Get a session and all its annotations |
| `get_all_pending` | All pending annotations (sorted oldest first) |
| `get_pending` | Pending annotations for one session |
| `acknowledge` | Mark annotation as acknowledged (before editing files) |
| `resolve` | Mark annotation as resolved with a summary |
| `dismiss` | Dismiss annotation with a reason |
| `reply` | Add a reply (for clarifications) |
| `watch_annotations` | Long-poll (25 s) for new pending annotations |

## Install

```bash
ng add @ng-annotate/angular
```

The schematic configures the MCP server automatically. For manual setup, add to `.mcp.json` (Claude Code):

```json
{
  "mcpServers": {
    "ng-annotate": {
      "command": "npx",
      "args": ["--yes", "--package=@ng-annotate/mcp-server", "ng-annotate-mcp"],
      "env": {
        "NG_ANNOTATE_PROJECT_ROOT": "/path/to/your/project"
      }
    }
  }
}
```

> **Windows users:** replace `"command": "npx"` with `"command": "cmd"` and prepend `"/c", "npx"` to the args array, because `npx` on Windows is a `.cmd` file and requires a shell to invoke.

Or `.vscode/mcp.json` (VS Code Copilot):

```json
{
  "servers": {
    "ng-annotate": {
      "type": "stdio",
      "command": "npx",
      "args": ["--yes", "--package=@ng-annotate/mcp-server", "ng-annotate-mcp"],
      "env": {
        "NG_ANNOTATE_PROJECT_ROOT": "/path/to/your/project"
      }
    }
  }
}
```

## Usage

Once the MCP server is connected, invoke the `start-polling` prompt in your AI editor:

```
/mcp ng-annotate start-polling
```

The agent will drain pending annotations, then enter a `watch_annotations` loop — processing browser annotations as they arrive and editing files automatically.

## Environment variables

| Variable | Description |
|---|---|
| `NG_ANNOTATE_PROJECT_ROOT` | Absolute path to the Angular project root. Used to locate the annotation store (`.ng-annotate/store.json`). |

## Related packages

| Package | Purpose |
|---|---|
| [`@ng-annotate/angular`](https://www.npmjs.com/package/@ng-annotate/angular) | Angular library (overlay UI, `provideNgAnnotate()`, custom dev-server builder) |

## License

MIT
npm package: @ng-annotate/vite-plugin
Description: Vite plugin for ng-annotate-mcp — WebSocket annotation bridge and component manifest for Angular dev tooling
Latest version: 0.10.1

# @ng-annotate/vite-plugin

Vite plugin for [ng-annotate-mcp](https://github.com/yngvebn/ngagentify) — a dev-only toolchain addon that lets you annotate components in the browser and have an AI agent act on those annotations in real time.

> Heavily inspired by [agentation.dev](https://agentation.dev/) — check it out for the original concept.

> **Angular CLI users:** you don't need this package. `@ng-annotate/angular` ships its own custom `dev-server` builder that handles everything. This plugin is for other Vite-based projects (Vue, Svelte, plain Vite, etc.).

## What this plugin does

- Injects a WebSocket handler at `/__annotate` that the overlay uses to send annotations to the store
- Injects `window.__NG_ANNOTATE_MANIFEST__` into the served HTML — a map of component selectors to their source file paths, enabling the AI agent to find the right file to edit

## Install

```bash
npm install @ng-annotate/vite-plugin --save-dev
```

```ts
// vite.config.ts
import { defineConfig } from 'vite';
import { ngAnnotateMcp } from '@ng-annotate/vite-plugin';

export default defineConfig({
  plugins: [...ngAnnotateMcp()],
});
```

## Related packages

| Package | Purpose |
|---|---|
| [`@ng-annotate/angular`](https://www.npmjs.com/package/@ng-annotate/angular) | Angular library (overlay UI, `provideNgAnnotate()`, custom dev-server builder) |
| [`@ng-annotate/mcp-server`](https://www.npmjs.com/package/@ng-annotate/mcp-server) | MCP server exposing tools to the AI agent |

## License

MIT