An AI-powered web development tool that transforms natural language prompts into interactive web pages. Create visualizations, games, and complex web applications through simple text descriptions.

Note: This is a development tool and proof-of-concept. Not intended for production use.

• AI-powered code generation from natural language
• Real-time code editing with separate HTML, CSS, and JavaScript editors
• Data visualization support with CSV import
• Live preview with instant updates
• Pre-loaded libraries (D3.js, Chart.js, Three.js)
• Automatic error recovery and retry mechanisms

1. Clone and setup environment:

   git clone https://github.com/philwilliammee/web-developer
   cd ai-web-design-assistant
   cp example.env .env

2. Configure AWS credentials in .env:

   VITE_AWS_REGION=your-aws-region
   VITE_BEDROCK_MODEL_ID=your-model-id
   VITE_AWS_ACCESS_KEY=your-aws-access-key
   VITE_AWS_SECRET_KEY=your-aws-secret-key

3. Install and run:

   npm install
   npm run dev

4. Open http://localhost:5173 in your browser

Currently, this project uses AWS Bedrock as its AI provider, specifically designed to work with Amazon's Large Language Models through the Bedrock API. However, the project is structured to potentially support other AI providers.

• AWS Bedrock API

• OpenAI API
• Ollama (local inference)
• Google Vertex AI
• Anthropic Claude API
• Other Open Source Models

Contributing Integrations: Pull requests for additional AI provider integrations are welcome! The project's architecture is designed to be extensible. Ollama integration would be particularly valuable as it would allow users to run models locally without cloud API costs.

1. Implement the core API service interface
2. Add appropriate environment configuration
3. Provide documentation for API setup
4. Include example prompts optimized for the new model

Check the src/bedrock/bedrock.service.ts file for an example of how API integration is currently implemented.

The application supports CSV data import for creating data-driven visualizations. To get started, you can use the example data provided in public/example_product_data.csv.

Header fields:

date,region,product_category,product_name,sales_amount,units_sold,customer_satisfaction,in_stock,profit_margin,customer_age,customer_type,promotion_active

Sample record:

2024-01-01,North,Electronics,Smart Watch Pro,299.99,12,4.8,true,0.35,28,New,false

1. Click the "Upload CSV" button in the interface
2. Select your CSV file or use the provided example data
3. The data structure will be passed to the AI attached to each user prompt

Create an interactive dashboard showing:
1. A line chart showing daily sales trends with toggles for different product categories
2. A donut chart showing sales distribution by region
3. Key metrics displayed as cards (total sales, avg satisfaction, total units)
4. A bar chart comparing performance by customer type
Add tooltips, hover effects, and make it responsive.

Visualize customer behavior patterns:
1. Group data by customer_type (New, Returning, Loyal)
2. Show average purchase amounts
3. Compare satisfaction scores by product category
4. Include promotion effectiveness analysis
Use animations for transitions and make it interactive.

Create a product analysis dashboard showing:
1. Scatter plot of sales_amount vs customer_satisfaction
2. Color points by product_category
3. Size points by profit_margin
4. Add tooltips showing product details on hover
Make it visually appealing with a clean, modern design.

Beyond data visualization, you can create interactive games, simulations, and 3D graphics:

Create a classic Snake game with:
- WASD controls
- Score tracking
- Increasing difficulty
- Game over screen

Create a particle system with:
- Gravity effects
- Collision detection
- User interaction
- Color transitions

Generate a rotating 3D scene with:
- Textured cube
- Orbit controls
- Ambient lighting
- Responsive canvas

• Built with TypeScript and Vite
• Uses Monaco Editor for code editing
• AWS Bedrock integration for AI capabilities
• Component-based architecture
• Signal-based state management
• CSS-in-JS with style encapsulation

• Chat Interface: Handles user prompts and AI responses
• Code Editor: Multiple editor views (HTML, CSS, JS, Combined)
• Preview: Sandboxed iframe for code execution
• Data Management: CSV parsing and data store
• Error Handling: Automatic retry mechanism for API failures

• Development tool only, not production-ready
• Requires AWS Bedrock access
• Limited to client-side code generation
• Maximum token limitations apply
• No server-side functionality

1. Fork the repository
2. Create a feature branch
3. Commit your changes
4. Push to the branch
5. Create a Pull Request

• Improved error handling and validation
• Additional library integrations
• Enhanced data visualization templates
• Code snippet library
• Custom theme support
• Offline capability
• Pass the rendered html back to the AI model for feedback

1. COMPLETE: git checkout -b feature/simplified-components

   • Remove base Component class
   • Move HTML structure to index.html
   • Update components to work with DOM directly
   • Test functionality
   • Create PR for review

2. COMPLETE: git checkout -b feature/store-consolidation

   • Review and consolidate AppStore usage
   • Ensure consistent state management
   • Remove unnecessary signals
   • Clean up data flow
   • Create PR for review

3. git checkout -b feature/error-handling

   • Implement standardized error handling
   • Add error reporting to store
   • Improve error UI feedback
   • Test error scenarios
   • Create PR for review

4. COMPLETE: git checkout -b feature/css-modernization

   • Move styles to scoped CSS files
   • Remove CSS-in-JS where possible
   • Implement better style organization
   • Test styling across components
   • Create PR for review

5. git checkout -b feature/code-cleanup

   • Clean up remaining technical debt
   • Improve documentation
   • Add test coverage
   • Optimize performance
   • Create PR for review

More examples: show me something interesting about this data.

Interactive weather dashboard showing temperature and humidity trends over time with key statistics including average temperature, maximum wind speed, and humidity range

Available data structure: { time: string, temperature_2m: number, relative_humidity_2m: number, wind_speed_10m: number }. Data has 168 records. also chart wind speed

Comprehensive weather dashboard featuring a multi-axis line chart showing temperature, humidity, and wind speed trends over time, along with statistical cards displaying averages and ranges for each metric

Available data structure: { time: string, temperature_2m: number, relative_humidity_2m: number, wind_speed_10m: number }. Data has 168 records. can we make some correlation between the temperature and the windspeed and humidity?

Correlation analysis dashboard showing scatter plots of temperature vs wind speed and temperature vs humidity, with calculated correlation coefficients and interpretation of correlation strength

Available data structure: { time: string, temperature_2m: number, relative_humidity_2m: number, wind_speed_10m: number }. Data has 168 records. What insights does this give us? Correlation Analysis Temperature-Wind Correlation: -0.427 Moderate negative correlation

Temperature-Humidity Correlation: 0.406 Moderate positive correlation Comprehensive analysis of weather patterns showing relationships between temperature, wind speed, and humidity, with detailed insights about correlations and their practical implications