Angular Ninja 🥷

AI-Powered Angular Agent System

Production-ready Angular AI Agent System with a central orchestrator controlling multiple specialized agents for intelligent code generation, review, and testing.

✨ NEW: MCP (Model Context Protocol) Support - Use with GitHub Copilot, Claude, Cursor, and other AI assistants!

🎯 Features

• Intelligent Workflow Orchestrator - Central brain that coordinates multiple agents
• Code Review Agent - Enforces Angular best practices and detects duplication
• Unit Test Writer Agent - Generates comprehensive test cases (Jasmine/Jest)
• Frontend Developer Agent - Creates Angular components from requirements or Figma designs
• Project Analyzer - Scans existing code to maximize reusability
• Figma MCP Integration - Generate pixel-perfect UI from Figma designs
• MCP Support - Works with GitHub Copilot, Claude, Cursor, and other AI assistants
• CLI Support - Easy command-line interface
• Extensible Architecture - Plugin-based system for custom agents

📦 Installation

npm install angular-ai-agents

🚀 Quick Start

Installation triggers an interactive setup wizard:

npm install angular-ai-agents

Setup prompts you for optional Figma integration:

• Press n to skip Figma (use agents for code review & testing only)
• Press y to configure Figma MCP integration

After installation, use with your AI assistant:

@orchestrator build a login page with tests
@frontend create a reusable button component
@code-review check this component for best practices
@unit-test generate tests for LoginComponent

Works with:

• ✅ GitHub Copilot
• ✅ Claude Desktop
• ✅ Cursor
• ✅ Any MCP-compatible AI assistant

🧠 Architecture

Core Components

┌─────────────────────────────────────┐
│   Workflow Orchestrator (Brain)    │
│  - Task Planning                    │
│  - Agent Coordination               │
│  - Dependency Resolution            │
│  - Retry Logic                      │
└────────────┬────────────────────────┘
             │
    ┌────────┴────────┐
    │                 │
┌───▼────┐  ┌────────▼───┐  ┌─────────▼─────┐
│ Code   │  │  Unit Test │  │   Frontend    │
│ Review │  │   Writer   │  │   Developer   │
│ Agent  │  │   Agent    │  │    Agent      │
└───┬────┘  └────────┬───┘  └─────────┬─────┘
    │                │                 │
    └────────┬───────┴─────────────────┘
             │
    ┌────────▼────────┐
    │ Project Analyzer│
    │ - Components    │
    │ - Services      │
    │ - Directives    │
    │ - Pipes         │
    │ - Styles        │
    │ - Utilities     │
    └─────────────────┘

Agent Types

🧠 Orchestrator Agent

Coordinates multiple agents for complex workflows. Breaks down tasks, manages dependencies, and ensures quality.

🔍 Code Review Agent

Scans code for Angular best practices, naming conventions, duplicate logic, and reusability opportunities.

🧪 Unit Test Writer Agent

Generates comprehensive Jasmine/Jest test cases with edge cases, mocks, and 80%+ coverage.

🎨 Frontend Developer Agent

Generates Angular components from requirements or Figma designs with responsive SCSS and proper validation.

💡 Usage Examples

Example 1: Build Complete Feature

@orchestrator create a user dashboard with profile card and settings

Example 2: Generate Component

@frontend create a reusable button component with variants

Example 3: Review Existing Code

@code-review analyze src/app/components/header.component.ts

Example 4: Generate Tests

@unit-test create tests for UserService with full coverage

⚙️ Configuration

After installation, customize your setup in .angular-ai-agents/config.json:

{
  "figma": {
    "enabled": false,
    "apiToken": ""
  },
  "angular": {
    "componentPrefix": "app",
    "styleFormat": "scss",
    "standalone": true,
    "changeDetection": "OnPush",
    "generateTests": true
  }
}

Re-run setup anytime:

npm run setup

📚 Documentation

• Quick Start Guide - Get started in 5 minutes
• Agent Documentation - Complete guide to all agents
• Figma Setup Guide - Configure Figma MCP integration
• Configuration Examples - Sample configurations

📄 License

📄 License

MIT © Angular Ninja

🙏 Acknowledgments

• Angular Team for the amazing framework
• OpenAI, Anthropic, and the AI community
• The open-source community

📞 Support

• 🐛 Issues: GitHub Issues
• 💬 Discussions: GitHub Discussions
• 📚 Documentation: ./docs/

Made with ❤️ by Dheeraj Singh 🥷

Code smarter, not harder

Documentation • Quick Start • Figma Setup