A modular, agent-based system that automates frontend testing, log analysis, and code repair using Playwright for UI automation, Function Calling for controlled file operations, and LLMs for intelligent debugging. This tool creates a closed loop of "Test → Analyze → Debug → Repeat" to streamline frontend development workflows.

• Project Overview
• Core Features
• System Architecture
• Prerequisites
• Installation
• Quick Start
• Usage Guide
  • 1. Basic Command Execution
  • 2. Natural Language Testing
  • 3. Log Analysis & Debugging
  • 4. Code Repair Workflow
• Configuration
• Directory Structure
• Troubleshooting
• Extending the System

This AI Coding Assistant automates the tedious cycle of frontend testing and debugging by:

1. Executing user-specified UI interactions (via Playwright) on a target frontend URL.
2. Collecting frontend console logs and backend server logs for comprehensive error detection.
3. Using an AI agent to identify relevant project files (via keyword search and file scanning).
4. Extracting code snippets (with size/keyword filters to avoid information overload).
5. Generating context-aware code fixes and applying them safely (with backups).
6. Repeating the loop until tests pass or maximum iterations are reached.

The system is organized into 4 core layers, with clear separation of concerns:

1. Interface Layer: Handles user input (natural language) and output (test results, fixes).
2. Agent Layer: Coordinates workflow (test → log → analyze → repair) and manages context.
3. Function Layer: Implements specialized tasks (Playwright testing, log parsing, file I/O).
4. Utility Layer: Provides shared tools (config loading, logging, code diffing).

Before running the system, ensure you have the following installed:

• Python 3.9+: Required for all core functionality.
• Playwright: For frontend UI automation (installs with dependencies below).
• Backend Log Access: The target backend must output logs to a file (configurable in config/config.ini).
• LLM API Key (Optional): For advanced NLP parsing and code generation (e.g., OpenAI, Anthropic). Add your key to config/secrets.json (not tracked in version control).

If you used the set_proj.sh script:

# Run the setup script (if not already done)
chmod +x set_proj.sh
./set_proj.sh

# Enter the project directory
cd ai_coding_assistant

Create a virtual environment and install required packages:

# Create a virtual environment
python -m venv venv

# Activate the environment
# Linux/macOS:
source venv/bin/activate
# Windows (PowerShell):
.\venv\Scripts\Activate.ps1

# Install Python dependencies
pip install -r requirements.txt

# Install Playwright browsers (Chromium, Firefox, WebKit)
playwright install

The project requires these dependencies. Create a requirements.txt file in the root directory:

playwright==1.40.0
python-dotenv==1.0.0
configparser==5.3.0
diff-match-patch==20230430
requests==2.31.0

Test the system with a sample frontend (e.g., a local login page at http://localhost:3000/login):

1. Start Your Backend
   Ensure your backend server is running and logging to a file (e.g., ../my-frontend-project/backend.log).

2. Configure Backend Log Path
   Update config/config.ini to point to your backend log file:

   [logging]
   backend_log_path = ../my-frontend-project/backend.log

3. Run the Assistant

   python main.py --project ../my-frontend-project --url http://localhost:3000/login

4. Enter a Natural Language Command
   When prompted with > , type:

   Test the login form: enter username "test@example.com" and password "test123", then click the submit button.
   

The system will:

• Convert your command to a Playwright test.
• Execute the test and collect logs.
• Analyze logs for errors.
• Ask to retrieve relevant files (e.g., login.js, AuthForm.jsx).
• Generate fixes (if errors are found) and ask for confirmation to apply.

The assistant accepts 4 core command types (you can use natural language or explicit keywords):

The NLP parser converts plain text into structured Playwright actions. For example:

• Input: Test the signup form: enter name "John Doe", email "john@test.com", click "Create Account", and check for a success message.
• Output Actions:
  1. input to #name with value "John Doe"
  2. input to #email with value "john@test.com"
  3. click on #create-account-btn
  4. Verify #success-message is visible

When a test fails, the system:

1. Collects frontend logs (console errors, network failures) and backend logs (500 errors, database issues).
2. Highlights critical errors (e.g., ReferenceError: "apiClient" is not defined).
3. Suggests relevant files to inspect (e.g., src/utils/apiClient.js).

Example log analysis output:

[FRONTEND] Console: Uncaught ReferenceError: apiClient is not defined at Login.jsx:45:10
[BACKEND] ERROR: POST /api/login 401 Unauthorized (invalid token)
---
Error Summary:
- 1 frontend ReferenceError (Login.jsx:45)
- 1 backend 401 Error (auth endpoint)
Relevant Files to Check:
1. src/components/Login.jsx
2. src/utils/apiClient.js
3. backend/auth/routes.py

When errors are detected:

1. The agent asks to retrieve code snippets for relevant files (e.g., Login.jsx lines 40-50).
2. It generates a fix (e.g., adding an import for apiClient).
3. It shows a diff of the proposed change:

   --- original/src/components/Login.jsx
   +++ modified/src/components/Login.jsx
   @@ -38,6 +38,7 @@
   import { useState } from 'react';
   import Button from './Button';
   +import apiClient from '../utils/apiClient';
   
   const Login = () => {
     const [email, setEmail] = useState('');
   @@ -43,7 +44,7 @@
     const handleSubmit = async () => {
   -  const response = await fetch('/api/login', {
   +  const response = await apiClient.post('/api/login', {
         method: 'POST',
         body: { email, password }
       });

4. You confirm to apply the fix (files are backed up to backups/ first).
5. The system re-runs the test to verify the fix.

All configuration files are stored in the config/ directory:

Example config.ini customization:

[playwright]
headless = false  # Set to true for CI/automation
slow_mo = 500     # Slow down actions by 500ms for debugging

[repair_loop]
max_iterations = 5  # Stop after 5 test-fix cycles

[logging]
level = DEBUG  # Show detailed logs (INFO/DEBUG/WARNING/ERROR)
backend_log_path = ../my-project/backend.log

ai_coding_assistant/
├── core/                  # Agent & workflow coordination
│   ├── agent.py           # AI agent (orchestrates modules)
│   ├── context.py         # Manages test logs, code snippets, and state
│   └── loop.py            # Controls test-debug-repair cycles
├── modules/               # Specialized功能 modules
│   ├── nlp/               # Natural language processing
│   │   ├── parser.py      # Convert text to test actions
│   │   └── intent.py      # Detect user intent (test/fix/find)
│   ├── testing/           # Playwright automation
│   │   ├── playwright_wrapper.py # UI interaction logic
│   │   └── test_generator.py # Generate Playwright scripts
│   ├── logging/           # Log collection & analysis
│   │   ├── log_collector.py # Capture frontend/backend logs
│   │   └── log_analyzer.py # Extract errors and locations
│   └── code/              # Code manipulation
│       ├── file_finder.py # Search project files
│       ├── code_extractor.py # Get filtered code snippets
│       ├── code_generator.py # Generate fixes
│       └── code_applier.py # Apply fixes (with backups)
├── utils/                 # Shared tools
│   ├── file_operations.py # Safe read/write/backup
│   ├── config_loader.py   # Load config files
│   ├── logger.py          # System logging
│   └── helpers.py         # Utility functions (diff, timers)
├── config/                # Configuration files
│   ├── config.ini         # Main settings
│   ├── file_types.json    # File category mappings
│   └── secrets.json       # (Optional) API keys
├── logs/                  # System logs (auto-generated)
├── backups/               # File backups (auto-generated)
├── tests/                 # Tests for the assistant itself
├── examples/              # Sample projects for testing
├── main.py                # Entry point
├── requirements.txt       # Python dependencies
└── README.md              # This file

1. Playwright Browser Not Found
   Run playwright install to install required browsers (Chromium, Firefox, WebKit).

2. Backend Logs Not Collected

   • Verify backend_log_path in config.ini is correct.
   • Ensure the backend log file is readable by your user.

3. Large Files Not Displayed
   The system truncates files >500 lines by default. Use keyword filters (e.g., "show src/App.jsx containing 'render'") to view specific sections.

4. Fixes Not Applied

   • Check the backups/ directory to confirm backups were created.
   • Verify file permissions (the script needs write access to the target project).

• Enable DEBUG logging in config.ini to see detailed module interactions.
• Use slow_mo = 500 in the [playwright] section to watch UI actions step-by-step.
• Check logs/ai_coding_assistant_YYYYMMDD.log for historical errors.

The modular design makes it easy to add new features:

• Create a new file in modules/testing/ (e.g., cypress_wrapper.py).
• Implement the same interface as playwright_wrapper.py (e.g., setup(), execute_test(), teardown()).
• Update core/agent.py to use the new framework (add a config flag in config.ini).

• Modify modules/nlp/parser.py to use your LLM API (e.g., Anthropic Claude) instead of the rule-based parser.
• Add your API key to config/secrets.json and load it via utils/config_loader.py.

• Update config/file_types.json to include the new extension (e.g., .svelte under frontend).
• Add parsing logic to modules/code/code_extractor.py (if the file type has unique syntax).

1. Fork the repository.
2. Create a feature branch (git checkout -b feature/new-module).
3. Commit your changes (git commit -m "Add Cypress support").
4. Push to the branch (git push origin feature/new-module).
5. Open a Pull Request.

All contributions are welcome—whether bug fixes, new modules, or documentation improvements!