Generate Angular components that perfectly match your design system, using AI that understands your existing components.
Component Generator is a tool that helps you quickly create new Angular components that match your team's existing patterns and components. Instead of starting from scratch or copy-pasting, it analyzes your current components and generates new ones that follow the same patterns.
Perfect for:
- Frontend developers creating new features
- Teams wanting to maintain consistency
- Anyone learning your component system
# Generate a login form using your existing components
python cli.py generate "Create a login form with email, password fields and submit button"
# Find components similar to what you need
python cli.py find_similar "form with validation"Generated components automatically:
- Use your existing design system components
- Follow your team's patterns
- Include proper imports
- Maintain type safety
- Add necessary services
- Python 3.9 or higher
- An Anthropic API key (get one here)
- Your Angular components analysis file (instructions below)
- Clone the repository:
git clone https://github.com/your-username/component_generator.git
cd component_generator- Create a virtual environment and install dependencies:
python -m venv venv
source venv/bin/activate # On Windows: venv\Scripts\activate
pip install -r requirements.txt- Set up your environment:
cp .env.example .env
# Edit .env and add your Anthropic API key- Analyze your components:
# If you already have an analysis.json:
python cli.py load-analysis analysis.json- Generate your first component:
python cli.py generate "Create a user profile card component"The generated component will be in the generated/ directory.
The quality of generated components depends heavily on your component analysis. Better analysis leads to better components. For best results, you'll want to analyze:
- Component source code
- Storybook stories (if available)
- Real usage examples from your codebase
- Test cases
- Service interactions
# Load your component analysis
python cli.py load-analysis analysis.jsonSee our Analysis Guide for detailed information on creating effective component analysis.
Each generated component includes:
- All necessary imports
- Proper component setup
- Service integrations (if needed)
- Example usage
Example output:
import { Component } from '@angular/core';
import { FormFieldComponent } from '@shared/components/form-field';
// ... more imports
@Component({
// ... component configuration
})
export class UserProfileComponent {
// ... component logic
}Error: Failed to load analysis
- Check if your analysis.json follows the correct format
- Ensure all required fields are present
- See ARCHITECTURE.md for the expected format
Error: Unable to connect to API
- Verify your Anthropic API key in .env
- Check your internet connection
- Ensure you're not behind a restrictive proxy
You can analyze your own components by following our analysis format. See ARCHITECTURE.md for details on:
- Component analysis format
- Required fields
- Best practices
Component Generator can be integrated into your CI/CD pipeline. Example GitHub Actions workflow:
name: Generate Components
on:
pull_request:
paths:
- 'src/components/**'We welcome contributions! See our Contributing Guide for details on:
- Setting up the development environment
- Running tests
- Submitting pull requests
- Architecture Guide - Understand how it works
- CHANGELOG - What's new
- CONTRIBUTING - How to help
- Create an Issue
- Read our documentation
- Contact the maintainers
MIT License - see LICENSE for details
Built with ❤️ using Anthropic Claude, ChromaDB, and Typer