mycontext-cli 2.0.26 → 2.0.28

package/README.md

@@ -1,394 +1,75 @@
-# MyContext CLI + mycontext PM System
+# MyContext CLI + MyContext AI
 
-**🤖 AI-Powered Project Management + Component-First Development**
+**Open Source AI-Powered Component Generation**
 
 [![npm version](https://badge.fury.io/js/mycontext-cli.svg)](https://www.npmjs.com/package/mycontext-cli)
 [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
 [![Node Version](https://img.shields.io/badge/node-%3E%3D18.0.0-brightgreen)](https://nodejs.org)
 
-**Two powerful systems in one:**
-
-1. **🎯 mycontext PM** - Intelligent project planning, task decomposition, and real-time monitoring using Claude Agent SDK
-2. **🎨 MyContext CLI** - Component-first development with zero-error guarantees and production-ready code generation
-
-**Result:** From client requirements to production deployment - fully automated with AI oversight.
+Generate production-ready React components from natural language descriptions. Built with 11 specialized AI agents and our proprietary Intent Dictionary System for 95%+ accuracy.
 
 ## 🚀 Quick Start
 
-### **Option 1: Complete Guided Setup (⭐ Recommended for New Projects)**
-
-```bash
-# Install globally
-npm install -g mycontext-cli
-
-# Single command complete setup with AI guidance
-mycontext setup-complete --interactive
-
-# That's it! Project is ready for development.
-```
-
-### **Option 2: Step-by-Step Development**
-
 ```bash
 # Install globally
 npm install -g mycontext-cli
 
-# 1. Initialize project
+# Initialize a new project
 mycontext init my-app
+cd my-app
 
-# 2. Generate context files (PRD, features, etc.)
-mycontext generate-context-files --description "Your app idea"
-
-# 3. Compile PRD (requires approval)
-mycontext compile-prd
+# Configure your AI provider
+echo 'ANTHROPIC_API_KEY=your-key' > .mycontext/.env
 
-# 4. Generate individual components
-mycontext generate types
-mycontext generate brand
-mycontext generate components-list
-mycontext generate project-structure
-
-# 5. Generate components with validation
-mycontext generate-components all --with-tests
-
-# 6. Preview components visually
-mycontext preview components
-
-# 7. Build complete app when ready
-mycontext build-app --interactive
+# Generate your first component
+mycontext generate:component "Create a login form with email and password"
 ```
 
-### **Option 3: AI-Powered Workflow Analysis**
+## ✨ What You Get
 
-```bash
-# Install globally
-npm install -g mycontext-cli
-
-# 1. AI analyzes your project requirements
-
-# 2. AI generates contextual workflow and executes it
-mycontext workflow generate --description "E-commerce platform with payments"
+- **Production-Ready Components** - TypeScript + shadcn/ui + Tailwind CSS
+- **Zero Hallucination** - Intent Dictionary maps natural language to exact components
+- **Type Safety** - Complete TypeScript definitions with proper interfaces
+- **Accessibility First** - Built-in ARIA compliance and semantic HTML
+- **Design System** - Automatic shadcn/ui adherence with design tokens
 
-# 3. Or use interactive workflow planning
-mycontext workflow --interactive
+## 💰 Pricing
 
-# 4. AI creates complete project structure with components
-# 5. Continue development with AI-generated architecture
-```
-
-## 💡 Philosophy: Component-First Development
+- **MyContext CLI** - Free and open source (MIT License)
+- **MyContext AI API** - Coming soon - Fine-tuned model for 95%+ accuracy
 
-**Start Small, Scale Gradually:**
+Use the CLI with your own AI provider keys (Claude, OpenAI, XAI) for free, or upgrade to our hosted API for best-in-class quality.
 
-1. **Context Files** → Define your app (PRD, features, technical specs)
-2. **Component List** → AI automatically generates list of needed components
-3. **Build Strategy** → Choose how to approach development
-4. **Component Generation** → Build components one by one with validation
-5. **Visual Preview** → See components in browser before integration
-6. **Scale to App** → Assemble validated components into full application
+## 📚 Full Documentation
 
-**Result:** Production-ready apps with 0 errors, built incrementally.
+**Complete guides, tutorials, and API reference available on GitHub:**
 
-## 🏗️ System Architecture
+👉 **[View Full Documentation](https://github.com/farajabien/mycontext-cli/tree/main/docs)**
 
-```
-┌─────────────────┐    ┌─────────────────┐    ┌─────────────────┐
-│   Client Input  │───▶│  mycontext PM   │───▶│  MyContext CLI  │
-│                 │    │  (Next.js App)  │    │                 │
-│ • Requirements  │    │                 │    │ • Code Generation│
-│ • Budget        │    │ • Task Planning │    │ • Component      │
-│ • Timeline      │    │ • Progress Mgmt │    │   Creation      │
-└─────────────────┘    │ • Real-time     │    └─────────────────┘
-                       │   Monitoring    │
-                       └─────────────────┘
-                               │
-                               ▼
-                       ┌─────────────────┐
-                       │  Progress Sync  │
-                       │  (Webhooks)     │
-                       └─────────────────┘
-```
-
-### **Data Flow:**
-
-1. **Client Requirements** → mycontext PM analyzes and decomposes into structured JSON
-2. **mycontext PM Plan** → MyContext CLI imports and generates project structure
-3. **Code Generation** → MyContext builds production-ready components
-4. **Progress Updates** → Real-time sync back to mycontext PM dashboard
-5. **AI Oversight** → Continuous monitoring and intelligent suggestions
+- [Getting Started Guide](https://github.com/farajabien/mycontext-cli/blob/main/docs/01-getting-started/quick-start.md)
+- [AI Agents System](https://github.com/farajabien/mycontext-cli/blob/main/docs/02-core-features/ai-agents.md)
+- [Intent Dictionary](https://github.com/farajabien/mycontext-cli/blob/main/docs/02-core-features/intent-dictionary-system.md)
+- [Command Reference](https://github.com/farajabien/mycontext-cli/blob/main/docs/03-reference/commands.md)
+- [Architecture](https://github.com/farajabien/mycontext-cli/blob/main/docs/06-architecture/system-overview.md)
 
 ## 🎯 Key Features
 
-### 🤖 **mycontext PM (NEW)**
-
-- **Intelligent Project Planning** - AI decomposes requirements into epics, user stories, and tasks
-- **Real-time Progress Monitoring** - Hourly checks, blocker detection, timeline adjustments
-- **Client Brief Processing** - Parse contracts, budgets, and timelines into structured plans
-- **Task Assignment & Tracking** - Automated task management with priority and dependency handling
-- **Progress Synchronization** - Webhook integration for live dashboard updates
-
-### ✅ **MyContext CLI (Component-First Development)**
-
-- **Streamlined Workflow** - Single `generate architecture` command replaces 5 separate steps
-- **Smart Next Steps** - Context-aware suggestions guide you through the development process
-- **Zero-Error Guarantee** - TypeScript/ESLint/build validation on every component
-- **UI Specification System** - Plain-English specs with accessibility & responsive guidance
-- **Visual Preview** - Figma-like component board for testing
-- **BYOK Model** - Use your own Claude/X.AI/OpenAI API keys (~$20/month)
-
-### 🤖 **AI Workflow Analysis**
-
-- **Intelligent Project Analysis** - AI understands your requirements and suggests optimal workflows
-- **Contextual Workflow Generation** - Custom workflows tailored to your specific project needs
-- **Component Recommendations** - AI suggests appropriate components and features
-- **Architecture Guidance** - Recommends best tech stack and project structure
-
-## 📋 Commands
-
-### Complete Project Setup (⭐ NEW)
-
-```bash
-mycontext setup-complete --interactive       # Complete guided project setup
-mycontext setup-complete --name "MyApp"      # Direct setup with options
-```
-
-### AI Workflow Analysis (NEW)
-
-```bash
-mycontext workflow analyze                   # Analyze project with AI
-mycontext workflow generate                  # Generate and execute workflow
-mycontext workflow --interactive             # Interactive workflow planning
-```
-
-### Streamlined Workflow (Recommended)
-
-```bash
-mycontext init <project-name>              # Initialize project
-mycontext generate-context-files            # Generate PRD, features, specs
-mycontext generate architecture             # Generate complete architecture
-mycontext build-app                         # Build complete application
-```
-
-### Traditional Component-First Workflow
-
-```bash
-mycontext init <project-name>              # Initialize project
-mycontext generate-context-files            # Generate PRD, features, specs
-mycontext compile-prd                       # Compile context into PRD
-mycontext generate types                    # Generate TypeScript types
-mycontext generate brand                    # Generate brand guidelines
-mycontext generate components-list          # Generate component list
-mycontext generate project-structure        # Generate project structure
-mycontext generate-components <name|all>    # Generate components
-mycontext preview <type>                    # Preview components/app
-mycontext build-app                         # Build complete application
-```
-
-### UI Specification
-
-```bash
-mycontext refine spec <component> --desc "description"    # Generate UI spec from description
-mycontext refine spec <component> --json-file <path>      # Generate UI spec from JSON
-mycontext generate-components all --verbose                # Auto-generate specs with components
-```
-
-### Setup & Configuration
-
-```bash
-mycontext setup                             # Configure AI providers
-mycontext build-strategy                    # Choose build approach
-mycontext health-check                      # Verify installation
-```
-
-## ⚙️ Configuration
-
-### API Keys (Required)
-
-```bash
-# Create .mycontext/.env file
-echo 'MYCONTEXT_CLAUDE_API_KEY=sk-ant-xxx' > .mycontext/.env
-echo 'MYCONTEXT_XAI_API_KEY=xai-xxx' >> .mycontext/.env
-```
-
-**Recommended providers:**
-
-- **Claude** (best for complex reasoning)
-- **X.AI Grok** (best for code generation)
-- **OpenAI** (most versatile)
-- **Qwen3** (free via OpenRouter)
-
-## 📊 Project Structure
-
-```
-my-app/
-├── .mycontext/
-│   ├── 01-prd.md                 # Product Requirements
-│   ├── 02-a-features.md          # Features specification
-│   ├── 02-b-user-flows.md        # User flows
-│   ├── 02-c-edge-cases.md        # Edge cases
-│   ├── 02-d-technical-specs.md   # Technical specifications
-│   ├── 03-types.ts               # TypeScript types
-│   ├── 04-branding.md            # Branding & design system
-│   ├── 05-component-list.json    # Generated component list
-│   └── .env                      # API keys
-├── components/                    # Generated components
-│   └── dashboard/
-│       ├── RevenueCard.tsx       # Component file
-│       ├── RevenueCard.spec.md   # UI specification
-│       └── index.ts              # Export file
-├── actions/                       # Server actions (if full-stack)
-├── app/                          # Next.js routes (if full-stack)
-└── package.json
-```
-
-## 📋 UI Specification Example
-
-Generate detailed, plain-English specifications from simple descriptions:
-
-```bash
-mycontext refine spec RevenueCard --desc "A card showing total revenue prominently with percentage change"
-```
-
-**Output:**
-
-```
-📋 UI Specification for RevenueCard
-
-📝 Compact Specification:
-**RevenueCard Component - Compact Spec**
-
-**Visual Hierarchy:**
-- Primary: Total Revenue, $125,430
-- Secondary: +12.5% from last month
-
-**Layout:** vertical arrangement
-**Spacing:** medium spacing between elements
-**Colors:** primary, success theme
-
-📋 Detailed Specification:
-**RevenueCard Component - Detailed Implementation Spec**
-
-**Component Overview:**
-- Name: RevenueCard
-- Type: card
-- Description: A card component displaying revenue metrics...
-
-**Visual Hierarchy:**
-1. **title**: Total Revenue
-   - Prominence: medium (medium (~16px))
-2. **value**: $125,430
-   - Prominence: high (large (~32px))
-3. **subtitle**: +12.5% from last month
-   - Prominence: low (small (~12px))
-
-**Accessibility Requirements:**
-- All interactive elements must have aria-label or aria-labelledby
-- Focus management: tab order follows visual hierarchy
-- Color contrast: minimum 4.5:1 ratio for text
-
-**Responsive Adjustments:**
-- Mobile (< 768px): Reduce spacing to 12px, stack vertically
-- Desktop (> 768px): Standard spacing, maintain layout
-```
-
-## 🆚 MyContext + mycontext PM vs Others
-
-| Feature                   | MyContext + mycontext PM | Lovable    | v0.dev      | Bolt        |
-| ------------------------- | ------------------------ | ---------- | ----------- | ----------- |
-| **AI Project Management** | ✅ Full System           | ❌ None    | ❌ None     | ❌ None     |
-| **Code Location**         | Your machine             | Cloud      | Cloud       | Cloud       |
-| **End-to-End Automation** | ✅ Requirements→Deploy   | ❌ Manual  | ❌ Manual   | ❌ Manual   |
-| **Progress Monitoring**   | ✅ Real-time             | ❌ None    | ❌ None     | ❌ None     |
-| **Validation Gates**      | 12+ checkpoints          | None       | None        | None        |
-| **TypeScript Guarantee**  | 100%                     | No         | No          | No          |
-| **PM Integration**        | ✅ Native                | ❌ None    | ❌ None     | ❌ None     |
-| **Pricing**               | BYOK ($0-20/mo)          | $20-200/mo | Usage-based | Usage-based |
-
-## 🐛 Troubleshooting
-
-**"PRD Validation Failed"**
-
-```bash
-mycontext compile-prd --force
-```
-
-**"Component Build Failed"**
-
-```bash
-# Automatic retry with error context (max 3 attempts)
-# Check .mycontext/progress/07-components/<component>.json
-```
-
-**"API Key Issues"**
-
-```bash
-mycontext setup  # Reconfigure API keys
-mycontext health-check  # Verify setup
-```
-
-**"UI Spec Generation Failed"**
-
-```bash
-# Check if templates exist
-ls src/templates/ui-spec-templates.json
-
-# Generate spec with verbose output
-mycontext refine spec ComponentName --desc "description" --verbose
-
-# Use JSON input instead of description
-mycontext refine spec ComponentName --json-file component.json
-```
-
-**"PM Plan Import Failed"**
-
-```bash
-# Validate PM plan structure first
-mycontext import-project-plan ./pm-plan.json --validate
-
-# Check for required fields in PM plan
-# Required: project.name, project.description, breakdown.tasks, myContext.framework
-```
-
-**"Progress Export Issues"**
-
-```bash
-# Check if project has been initialized
-mycontext export-progress --format summary
-
-# Ensure .mycontext directory exists with todos.json
-ls -la .mycontext/
-```
-
-**"mycontext PM Synchronization Failed"**
-
-```bash
-# Test webhook connectivity
-curl -X POST https://mycontext-pm.example.com/webhook \
-  -H "Content-Type: application/json" \
-  -d '{"test": "connection"}'
-
-# Check webhook URL format
-mycontext export-progress --webhook https://mycontext-pm.example.com/webhook
-```
-
-## 📚 Documentation
-
-- [Getting Started](https://github.com/farajabien/mycontext-cli#quick-start)
-- [AI Workflow Analysis](https://github.com/farajabien/mycontext-cli#ai-workflow-analysis-new)
-- [Component Generation](https://github.com/farajabien/mycontext-cli#traditional-component-first-workflow)
-- [System Architecture](https://github.com/farajabien/mycontext-cli#system-architecture)
-- [Build Strategies](https://github.com/farajabien/mycontext-cli#philosophy-component-first-development)
+- **11 Specialized AI Agents** - Expert AI for design, validation, and generation
+- **Intent Dictionary** - 30+ UI patterns with type-safe natural language mapping
+- **Design Pipeline** - 8-phase design analysis for rich, contextual components
+- **Feature Assembly** - Combine components into working features with auth & permissions
+- **Zero-Error Guarantee** - 12+ validation checkpoints ensure production quality
 
 ## 🤝 Contributing
 
-Contributions are welcome! Please feel free to submit a Pull Request.
+Contributions welcome! See our [Contributing Guide](https://github.com/farajabien/mycontext-cli/blob/main/CONTRIBUTING.md).
 
 ## 📄 License
 
-MIT © MyContext
+MIT © MyContext - See [LICENSE](https://github.com/farajabien/mycontext-cli/blob/main/LICENSE) for details.
 
 ---
 
-**🤖 The future of AI-powered development: From requirements to production with mycontext PM oversight.**
-
 **Built by developers, for developers. Your code stays on your machine.** 🚀
+
+[Full Documentation](https://github.com/farajabien/mycontext-cli/tree/main/docs) • [GitHub](https://github.com/farajabien/mycontext-cli) • [Issues](https://github.com/farajabien/mycontext-cli/issues)

package/dist/agents/implementations/CodeGenSubAgent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CodeGenSubAgent.d.ts","sourceRoot":"","sources":["../../../src/agents/implementations/CodeGenSubAgent.ts"],"names":[],"mappings":"AAeA,OAAO,EACL,QAAQ,EACR,wBAAwB,EACxB,yBAAyB,EAC1B,MAAM,wBAAwB,CAAC;AA6FhC,qBAAa,eACX,YAAW,QAAQ,CAAC,wBAAwB,EAAE,yBAAyB,CAAC;IAExE,IAAI,SAAqB;IACzB,WAAW,SACkG;IAC7G,WAAW,EAAE,MAAM,CAAC;IACpB,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,EAAE,MAAM,EAAE,CAAC;IACpB,SAAS,EAAE,MAAM,CAAC;IAClB,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,EAAE,MAAM,CAAC;IAClB,YAAY,EAAE,MAAM,CAAC;;IAkBf,GAAG,CACP,KAAK,EAAE,wBAAwB,GAC9B,OAAO,CAAC,yBAAyB,CAAC;IAuC/B,QAAQ,CAAC,KAAK,EAAE,wBAAwB,GAAG,OAAO,CAAC,OAAO,CAAC;IAc3D,SAAS,IAAI,OAAO,CAAC;QACzB,IAAI,EAAE,MAAM,CAAC;QACb,MAAM,EAAE,MAAM,GAAG,SAAS,GAAG,WAAW,GAAG,OAAO,CAAC;QACnD,OAAO,CAAC,EAAE,IAAI,CAAC;QACf,aAAa,CAAC,EAAE,MAAM,CAAC;QACvB,UAAU,EAAE,MAAM,CAAC;QACnB,YAAY,EAAE,MAAM,CAAC;KACtB,CAAC;YASY,gCAAgC;IAiM9C;;OAEG;YACW,sBAAsB;IAgIpC;;OAEG;IACH,OAAO,CAAC,oBAAoB;IAiF5B;;OAEG;IACH,OAAO,CAAC,0BAA0B;IAuHlC;;OAEG;IACH,OAAO,CAAC,6BAA6B;IAyGrC,OAAO,CAAC,4BAA4B;IA4BpC,OAAO,CAAC,mBAAmB;IA2B3B,OAAO,CAAC,sBAAsB;IA0B9B,OAAO,CAAC,uBAAuB;IAoI/B,OAAO,CAAC,uBAAuB;IAqB/B,OAAO,CAAC,uBAAuB;IA2E/B,OAAO,CAAC,4BAA4B;IAmIpC,OAAO,CAAC,oBAAoB;IAqB5B,OAAO,CAAC,kCAAkC;IA4E1C,OAAO,CAAC,gCAAgC;IAwIxC,OAAO,CAAC,8BAA8B;IAyetC,OAAO,CAAC,iCAAiC;IA4QzC,OAAO,CAAC,mBAAmB;IA6B3B,OAAO,CAAC,uBAAuB;IAe/B,OAAO,CAAC,qBAAqB;IAoC7B,OAAO,CAAC,qBAAqB;YASf,oBAAoB;CAiCnC"}
+{"version":3,"file":"CodeGenSubAgent.d.ts","sourceRoot":"","sources":["../../../src/agents/implementations/CodeGenSubAgent.ts"],"names":[],"mappings":"AAeA,OAAO,EACL,QAAQ,EACR,wBAAwB,EACxB,yBAAyB,EAC1B,MAAM,wBAAwB,CAAC;AA6FhC,qBAAa,eACX,YAAW,QAAQ,CAAC,wBAAwB,EAAE,yBAAyB,CAAC;IAExE,IAAI,SAAqB;IACzB,WAAW,SAC+F;IAC1G,WAAW,EAAE,MAAM,CAAC;IACpB,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,EAAE,MAAM,EAAE,CAAC;IACpB,SAAS,EAAE,MAAM,CAAC;IAClB,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,EAAE,MAAM,CAAC;IAClB,YAAY,EAAE,MAAM,CAAC;;IAkBf,GAAG,CACP,KAAK,EAAE,wBAAwB,GAC9B,OAAO,CAAC,yBAAyB,CAAC;IAuC/B,QAAQ,CAAC,KAAK,EAAE,wBAAwB,GAAG,OAAO,CAAC,OAAO,CAAC;IAc3D,SAAS,IAAI,OAAO,CAAC;QACzB,IAAI,EAAE,MAAM,CAAC;QACb,MAAM,EAAE,MAAM,GAAG,SAAS,GAAG,WAAW,GAAG,OAAO,CAAC;QACnD,OAAO,CAAC,EAAE,IAAI,CAAC;QACf,aAAa,CAAC,EAAE,MAAM,CAAC;QACvB,UAAU,EAAE,MAAM,CAAC;QACnB,YAAY,EAAE,MAAM,CAAC;KACtB,CAAC;YASY,gCAAgC;IAqN9C;;OAEG;YACW,sBAAsB;IA2IpC;;OAEG;IACH,OAAO,CAAC,oBAAoB;IA8I5B;;OAEG;IACH,OAAO,CAAC,0BAA0B;IAuHlC;;OAEG;IACH,OAAO,CAAC,6BAA6B;IAyGrC,OAAO,CAAC,4BAA4B;IA4BpC,OAAO,CAAC,mBAAmB;IA2B3B,OAAO,CAAC,sBAAsB;IA0B9B,OAAO,CAAC,uBAAuB;IAoI/B,OAAO,CAAC,uBAAuB;IAqB/B,OAAO,CAAC,uBAAuB;IA2E/B,OAAO,CAAC,4BAA4B;IAmIpC,OAAO,CAAC,oBAAoB;IAqB5B,OAAO,CAAC,kCAAkC;IA4E1C,OAAO,CAAC,gCAAgC;IAwIxC,OAAO,CAAC,8BAA8B;IAyetC,OAAO,CAAC,iCAAiC;IA4QzC,OAAO,CAAC,mBAAmB;IA6B3B,OAAO,CAAC,uBAAuB;IAe/B,OAAO,CAAC,qBAAqB;IAoC7B,OAAO,CAAC,qBAAqB;YASf,oBAAoB;CAiCnC"}

package/dist/agents/implementations/CodeGenSubAgent.js

@@ -38,10 +38,10 @@ exports.CodeGenSubAgent = void 0;
  * CodeGenSubAgent Implementation
  *
  * Specialized sub-agent for generating production-ready React components and TypeScript code.
- * Uses Claude Code for optimal code generation capabilities.
+ * Uses MyContext AI (fine-tuned GPT-4o Mini) for 95%+ accurate component generation.
  * Enhanced with shadcn/ui primitives and modern React patterns for Next.js 14+.
  */
-const hybridAIClient_1 = require("../../utils/hybridAIClient");
+const ProviderChain_1 = require("../../clients/ProviderChain");
 const PromptConstructorAgent_1 = require("./PromptConstructorAgent");
 const fs = __importStar(require("fs"));
 const path = __importStar(require("path"));
@@ -137,7 +137,7 @@ const CANONICAL_SHADCN_LIST = [
 class CodeGenSubAgent {
     constructor() {
         this.name = "CodeGenSubAgent";
-        this.description = "Expert React/TypeScript developer specializing in production-ready Next.js 14+ components with shadcn/ui";
+        this.description = "Expert React/TypeScript developer using MyContext AI for 95%+ accurate shadcn/ui component generation";
         const personality = (0, subAgentPersonalities_1.getSubAgentPersonality)(this.name);
         if (!personality) {
             throw new Error(`Personality not found for ${this.name}`);
@@ -203,9 +203,9 @@ class CodeGenSubAgent {
         };
     }
     async generateProductionReadyComponent(component, group, options) {
-        // Try cloud-first via HybridAIClient (GitHub Models preferred), then fall back to local Ollama, then template
+        // Use MyContext AI (fine-tuned GPT-4o Mini) with fallbacks to Claude SDK and XAI
         try {
-            const ai = new hybridAIClient_1.HybridAIClient();
+            const ai = (0, ProviderChain_1.getProviderChain)();
             const compObj = typeof component === "string"
                 ? {
                     name: this.generateComponentName(component),
@@ -300,7 +300,14 @@ class CodeGenSubAgent {
                 console.log("❌ PromptConstructorAgent failed, trying LLM-based prompt construction...");
                 try {
                     // Option 2: Use LLM for prompt construction
-                    constructedPrompt = await this.constructPromptWithLLM(compObj, group, { prd, types, enhancedContext });
+                    constructedPrompt = await this.constructPromptWithLLM(compObj, group, {
+                        prd,
+                        types,
+                        enhancedContext,
+                        designSystem: options?.context?.designSystem,
+                        designIntent: options?.context?.designIntent,
+                        visualTokens: options?.context?.visualTokens,
+                    });
                     console.log(`✅ Intelligent prompt constructed via LLM: ${constructedPrompt.contextSummary}`);
                 }
                 catch (llmPromptError) {
@@ -316,7 +323,16 @@ class CodeGenSubAgent {
             }
             const prompt = `${constructedPrompt.systemPrompt}\n\n${constructedPrompt.userPrompt}`;
             console.log("🔍 DEBUG: About to call AI for component generation");
-            const { code } = await ai.generateComponent(prompt, {
+            const code = await ai.generateComponent(prompt, {
+                prd,
+                types,
+                brand: options?.context?.branding,
+                componentList: options?.context?.componentList,
+                projectStructure: options?.context?.projectStructure,
+                previousOutputs: options?.context?.previousOutputs,
+                userPrompt: prompt,
+                workingDirectory: options?.context?.workingDirectory,
+            }, {
                 temperature: this.temperature,
                 maxTokens: Math.max(this.maxTokens, 8000), // Ensure minimum 8000 tokens
             });
@@ -343,7 +359,7 @@ class CodeGenSubAgent {
      * Uses LLM to construct intelligent prompts for component generation
      */
     async constructPromptWithLLM(component, group, context) {
-        const ai = new hybridAIClient_1.HybridAIClient();
+        const ai = (0, ProviderChain_1.getProviderChain)();
         const promptConstructionRequest = `
 You are a specialist in creating optimal prompts for React/TypeScript component generation.
 
@@ -405,18 +421,18 @@ Focus on:
 - Modern React patterns (hooks, etc.)
 - Server Component architecture for page.tsx files
 `;
-        const response = await ai.generateComponent(promptConstructionRequest, {
+        const response = await ai.generateComponent(promptConstructionRequest, {}, {
             temperature: 0.3, // Lower temperature for more consistent prompt construction
             maxTokens: 2000,
         });
         try {
-            console.log("🔍 DEBUG: CodeGen prompt construction response length:", response.code.length);
-            console.log("🔍 DEBUG: CodeGen prompt construction response preview:", response.code.substring(0, 200));
+            console.log("🔍 DEBUG: CodeGen prompt construction response length:", response.length);
+            console.log("🔍 DEBUG: CodeGen prompt construction response preview:", response.substring(0, 200));
             // Extract JSON from the response
-            const jsonMatch = response.code.match(/\{[\s\S]*\}/);
+            const jsonMatch = response.match(/\{[\s\S]*\}/);
             if (!jsonMatch) {
                 console.warn("❌ DEBUG: No JSON found in LLM response, using fallback prompt construction");
-                console.log("❌ DEBUG: Full response:", response.code);
+                console.log("❌ DEBUG: Full response:", response);
                 return this.createFallbackPrompt(component, group, context);
             }
             console.log("✅ DEBUG: Found JSON match:", jsonMatch[0].substring(0, 100) + "...");
@@ -444,6 +460,43 @@ Focus on:
     createFallbackPrompt(component, group, context) {
         const componentName = component.name || "Component";
         const componentDescription = component.description || "A React component";
+        // Add design system context if available
+        let designSystemContext = "";
+        if (context.designSystem || context.designIntent || context.visualTokens) {
+            designSystemContext = "\n\n🎨 **DESIGN SYSTEM CONTEXT**:\n";
+            if (context.designSystem) {
+                designSystemContext += `\n**Visual Tokens:**
+- Primary Color: ${context.designSystem.colors?.primary || "Not specified"}
+- Secondary Color: ${context.designSystem.colors?.secondary || "Not specified"}
+- Typography: ${context.designSystem.typography?.heading || "Not specified"} (headings), ${context.designSystem.typography?.body || "Not specified"} (body)
+- Spacing Scale: ${context.designSystem.spacing?.base || "Not specified"}px base unit
+- Border Radius: ${context.designSystem.borderRadius?.base || "Not specified"}px
+- Shadows: ${context.designSystem.shadows?.base || "Not specified"}`;
+            }
+            if (context.designIntent) {
+                designSystemContext += `\n\n**Design Principles:**
+- Design Anchors: ${context.designIntent.design_anchors?.join(", ") || "Not specified"}
+- Key Principles: ${context.designIntent.key_principles?.join(", ") || "Not specified"}
+- User Experience Focus: ${context.designIntent.user_experience_focus || "Not specified"}`;
+            }
+            if (context.visualTokens) {
+                designSystemContext += `\n\n**Component Tokens:**
+- Button Styles: ${JSON.stringify(context.visualTokens.buttons || {})}
+- Input Styles: ${JSON.stringify(context.visualTokens.inputs || {})}
+- Card Styles: ${JSON.stringify(context.visualTokens.cards || {})}`;
+            }
+            designSystemContext += "\n\n**Design Implementation Requirements:**\n";
+            designSystemContext +=
+                "- Use the specified color palette for all UI elements\n";
+            designSystemContext +=
+                "- Apply consistent typography scale throughout the component\n";
+            designSystemContext +=
+                "- Follow the established spacing and border radius patterns\n";
+            designSystemContext +=
+                "- Implement component tokens for buttons, inputs, and cards\n";
+            designSystemContext +=
+                "- Ensure visual consistency with the overall design system";
+        }
         const systemPrompt = `You are an expert React/TypeScript developer specializing in production-ready Next.js 14+ components with shadcn/ui.
 
 📱 **MOBILE-FIRST DESIGN REQUIREMENTS**:
@@ -479,7 +532,7 @@ CRITICAL REQUIREMENTS:
 - Server Components for page.tsx files (no "use client")
 - Client Components for interactive functionality
 
-Generate production-ready, maintainable code that follows industry best practices.`;
+Generate production-ready, maintainable code that follows industry best practices.${designSystemContext}`;
         const userPrompt = `Create a React component: ${componentName}
 
 Description: ${componentDescription}