Merge pull request #96 from AmadeusITGroup/ai-feat-integration

Ai feat integration

Author: adxdits

CONTRIBUTING.md

@@ -88,11 +88,11 @@ npm run lint:fix      # Auto-fix lint errors
 ### Branch Naming
 
 Use descriptive branch names:
-- `feat/description` — for new features
-- `fix/description` — for bug fixes
-- `docs/description` — for documentation changes
-- `refactor/description` — for code refactoring
-- `test/description` — for adding or updating tests
+- `feat/description` - for new features
+- `fix/description` - for bug fixes
+- `docs/description` - for documentation changes
+- `refactor/description` - for code refactoring
+- `test/description` - for adding or updating tests
 
 ### Commit Messages
 
@@ -117,14 +117,14 @@ test(store): add unit tests for meta reducer
 3. Ensure all tests pass: `npm test`
 4. Ensure linting passes: `npm run lint`
 5. Push your branch and open a pull request against `master`
-6. CI will automatically run lint and tests — both must pass before merging
+6. CI will automatically run lint and tests. Both must pass before merging
 
 ### Code Quality Requirements
 
 - All new code must include unit tests
 - Existing tests must continue to pass
 - Code must pass linting without errors
-- Keep pull requests focused — one feature or fix per PR
+- Keep pull requests focused: one feature or fix per PR
 
 ---
 

README.md

@@ -13,7 +13,7 @@
 
 <p align="center">
   A development tool for visualizing and debugging NgRx state management in Angular applications.<br>
-  Real-time action monitoring, effect tracking, state visualization, diff viewer, and performance metrics no browser extensions needed.
+  Real-time action monitoring, effect tracking, state visualization, diff viewer, and performance metrics. No browser extensions needed.
 </p>
 
 <p align="center">
@@ -67,8 +67,6 @@ npx ngrx-devtool
 
 Open **http://localhost:3000** and start your Angular app.
 
----
-
 For full documentation, configuration options, troubleshooting, and more, visit the **[documentation site](https://amadeusitgroup.github.io/ngrx-devtool/)**.
 
 ## Contributing

docs/docs/features/debug-with-ai.md

@@ -0,0 +1,65 @@
+---
+sidebar_position: 6
+title: Debug with AI
+---
+
+# Debug with AI
+
+Turn your live NgRx DevTool session into AI-ready debugging context with no API key, subscription, or extra install required.
+
+## Copy a debugging prompt
+
+Click **Debug with AI** in the toolbar. The DevTool assembles a focused prompt from the current session:
+
+- Recent actions
+- Effect errors with stack traces
+- Slowest renders
+- Latest state diff
+
+Paste the prompt into GitHub Copilot Chat, Claude, ChatGPT, or another assistant. Pick a focus such as health check, debug errors, why slow, or explain flow, and the prompt adapts.
+
+## Run locally with Ollama
+
+If you have [Ollama](https://ollama.com) running, the dialog detects it automatically and lets you ask a local model right inside the DevTool. Answers stream in, and nothing leaves your machine.
+
+```bash
+ollama pull llama3
+```
+
+## Connect via MCP
+
+The server exposes a [Model Context Protocol](https://modelcontextprotocol.io) endpoint at `http://localhost:3000/mcp`, so AI assistants can query your running NgRx session directly.
+
+Add this to `.vscode/mcp.json` in your project:
+
+```json
+{
+  "servers": {
+    "ngrx-devtool": {
+      "type": "http",
+      "url": "http://localhost:3000/mcp"
+    }
+  }
+}
+```
+
+Then ask Copilot Chat things like:
+
+```text
+Why is my loadBooks$ effect failing?
+```
+
+## MCP tools
+
+| Tool | What it returns |
+|---|---|
+| `get_debug_summary` | Recent actions, effect errors and performance at a glance |
+| `get_action_timeline` | Recent actions with source, render time and warnings |
+| `get_effects` / `get_effect_errors` | Effect executions, plus errors with stack traces |
+| `get_state_diff` | What changed in the store for a given action |
+| `get_current_state` | The latest store snapshot |
+| `get_performance_stats` | Average/max render time and the slowest actions |
+
+:::info
+The MCP server captures traffic in memory on the DevTool server and adds no new dependencies to the published package.
+:::

docs/sidebars.ts

@@ -24,6 +24,7 @@ const sidebars: SidebarsConfig = {
         'features/performance',
         'features/state-visualization',
         'features/diff-viewer',
+        'features/debug-with-ai',
       ],
     },
     {

index.ts

@@ -3,6 +3,7 @@ import { WebSocket, WebSocketServer } from 'ws';
 import * as path from 'path';
 import * as express from 'express';
 import { createServer } from 'http';
+import { createStore, captureMessage, registerMcpEndpoint } from './mcp-server';
 const chalk = require('chalk');
 
 const PORT_WS = 4000;
@@ -11,6 +12,8 @@ const wss = new WebSocketServer({ port: PORT_WS });
 
 let clients = [];
 
+const store = createStore();
+
 const logo = `
                                     ***@  +**
                                   **         ******%
@@ -63,6 +66,7 @@ console.log(chalk.dim('─'.repeat(60)));
 wss.on('connection', (socket) => {
   clients.push(socket);
   socket.on('message', (message) => {
+    captureMessage(store, message.toString());
     clients.forEach((client) => {
       if (client !== socket && client.readyState === WebSocket.OPEN) {
         client.send(message);
@@ -71,6 +75,7 @@ wss.on('connection', (socket) => {
   });
 });
 const app = express();
+registerMcpEndpoint(app, express, store);
 app.use(express.static(path.resolve(__dirname, 'ngrx-devtool-ui/browser')));
 app.get('*', (_req, res) => {
   res.sendFile(path.resolve(__dirname, 'ngrx-devtool-ui/browser/index.html'));
@@ -94,6 +99,11 @@ process.on('SIGINT', () => {
 console.log('');
 console.log(chalk.green(`  ✓ WebSocket`), chalk.dim(`ws://localhost:${PORT_WS}`));
 console.log(chalk.green(`  ✓ UI Server`), chalk.dim(`http://localhost:${PORT_UI}`));
+console.log(chalk.green(`  ✓ AI / MCP `), chalk.dim(`http://localhost:${PORT_UI}/mcp`));
+console.log('');
+console.log(chalk.dim('  Connect Copilot / Claude / Cursor by adding to .vscode/mcp.json:'));
+console.log(chalk.dim('    { "servers": { "ngrx-devtool": { "type": "http",'));
+console.log(chalk.dim(`      "url": "http://localhost:${PORT_UI}/mcp" } } }`));
 console.log('');
 console.log(chalk.dim('─'.repeat(60)));
 console.log(chalk.dim('  Press'), chalk.white('Ctrl+C'), chalk.dim('to stop all servers'));