{"id":30155269,"url":"https://github.com/pglevy/prototype-iteration-agent","last_synced_at":"2025-08-11T12:19:59.893Z","repository":{"id":301239945,"uuid":"1008598400","full_name":"pglevy/prototype-iteration-agent","owner":"pglevy","description":"An agentic prototype-test-iterate experiment","archived":false,"fork":false,"pushed_at":"2025-06-25T20:58:42.000Z","size":111,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-06-25T21:36:39.698Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/pglevy.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-06-25T19:48:38.000Z","updated_at":"2025-06-25T20:58:46.000Z","dependencies_parsed_at":"2025-06-25T21:36:41.942Z","dependency_job_id":"cc28f6dd-ff55-4cc4-8581-dc4ea7d650b0","html_url":"https://github.com/pglevy/prototype-iteration-agent","commit_stats":null,"previous_names":["pglevy/prototype-iteration-agent"],"tags_count":0,"template":false,"template_full_name":"pglevy/vibe-coding-boilerplate","purl":"pkg:github/pglevy/prototype-iteration-agent","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pglevy%2Fprototype-iteration-agent","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pglevy%2Fprototype-iteration-agent/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pglevy%2Fprototype-iteration-agent/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pglevy%2Fprototype-iteration-agent/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/pglevy","download_url":"https://codeload.github.com/pglevy/prototype-iteration-agent/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pglevy%2Fprototype-iteration-agent/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":269886032,"owners_count":24490829,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-11T02:00:10.019Z","response_time":75,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-08-11T12:19:58.936Z","updated_at":"2025-08-11T12:19:59.870Z","avatar_url":"https://github.com/pglevy.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Agentic Prototype Testing Setup Guide\n\n## 1. Initial Setup\n\n### Create the orchestrator directory\n```bash\nmkdir prototype-orchestrator\ncd prototype-orchestrator\nnpm init -y\n```\n\n### Install dependencies\n```bash\nnpm install openai playwright dotenv\nnpx playwright install chromium\n```\n\n### Update package.json to use ES modules\nAdd this to your `package.json`:\n```json\n{\n  \"type\": \"module\",\n  \"scripts\": {\n    \"start\": \"node orchestrator.js\",\n    \"test\": \"node orchestrator.js\"\n  }\n}\n```\n\n## 2. Environment Setup\n\n### Create `.env` file\n```bash\n# .env\nOPENAI_API_KEY=your_openai_api_key_here\n```\n\n### Update the orchestrator configuration\nIn `orchestrator.js`, update the `CONFIG` object:\n```javascript\nconst CONFIG = {\n  viteProjectPath: '../your-actual-vite-project-name', // Update this path!\n  viteUrl: 'http://localhost:5173', // Update if your Vite runs on different port\n  openaiApiKey: process.env.OPENAI_API_KEY,\n  maxIterations: 5,\n  feedbackThreshold: 0.8\n};\n```\n\n## 3. Vite Project Setup\n\n### Make sure your Vite project has the route\nUpdate your `App.jsx` to include the generated prototype:\n```jsx\nimport GeneratedPrototype from './components/GeneratedPrototype'\n\nfunction App() {\n  return (\n    \u003cdiv className=\"App\"\u003e\n      \u003cGeneratedPrototype /\u003e\n    \u003c/div\u003e\n  )\n}\n```\n\n### Create placeholder component\nCreate `src/components/GeneratedPrototype.tsx`:\n```tsx\nexport default function GeneratedPrototype() {\n  return (\n    \u003cdiv className=\"p-8\"\u003e\n      \u003ch1\u003eGenerated Prototype Will Appear Here\u003c/h1\u003e\n      \u003cp\u003eRun the orchestrator to generate your first prototype!\u003c/p\u003e\n    \u003c/div\u003e\n  )\n}\n```\n\n## 4. Directory Structure\n```\nyour-workspace/\n├── your-vite-project/          # Your existing Vite project\n│   ├── src/\n│   │   ├── components/\n│   │   │   └── GeneratedPrototype.tsx\n│   │   └── App.jsx\n│   └── package.json\n└── prototype-orchestrator/     # New orchestrator\n    ├── orchestrator.js\n    ├── package.json\n    ├── .env\n    └── screenshots/           # Will be created automatically\n```\n\n## 5. Running the Workflow\n\n### Start your Vite dev server\n```bash\ncd your-vite-project\nnpm run dev\n```\n\n### In another terminal, run the orchestrator\n```bash\ncd prototype-orchestrator\nnpm start\n```\n\n### Or with a custom prompt\n```bash\nnode orchestrator.js \"Create a user profile card with avatar, name, bio, and social links\"\n```\n\n### Skip prototype generation (use existing component)\n```bash\n# Use existing GeneratedPrototype.tsx and run only testing/feedback\nnode orchestrator.js \"Your design prompt here\" --skip-generation\n# or\nnode orchestrator.js \"Your design prompt here\" -s\n```\n\n**When to use `--skip-generation`:**\n- Testing workflow fixes when prototype generation works but other steps fail\n- Using your own custom prototype (paste code into `GeneratedPrototype.tsx`)\n- Iterative development after initial generation\n- The design prompt is still used for visual feedback analysis\n\n## 6. What Happens During Execution\n\n1. **Generation**: LLM creates React component → saves to your Vite project (unless skipped)\n2. **Auto-reload**: Vite hot-reloads the new component\n3. **Testing**: Playwright opens browser → interacts with your localhost → captures screenshots\n4. **Visual Analysis**: GPT-4 Vision analyzes screenshots for design quality\n5. **Feedback**: Testing LLM combines functional and visual feedback → provides scored feedback\n6. **Iteration**: If score \u003c threshold, LLM improves the component based on both UX and visual feedback\n7. **Repeat**: Until threshold met or max iterations reached\n\n## 7. Outputs\n\n- **Screenshots**: `screenshots/` folder with visual progression\n- **Final Report**: `final-report.json` with complete iteration history including visual feedback\n- **Updated Component**: Your Vite project will have the final version\n- **Console Output**: Shows both functional scores and visual design scores for each iteration\n\n## 8. Customization Options\n\n### Adjust feedback threshold\n```javascript\nfeedbackThreshold: 0.7 // Lower = easier to satisfy\n```\n\n### Change max iterations\n```javascript\nmaxIterations: 3 // Fewer iterations for faster testing\n```\n\n### Run in headless mode\n```javascript\n// In runPlaywrightTests method\nconst browser = await chromium.launch({ headless: true });\n```\n\n### Add custom test scenarios\nModify the `generateTestPlan` method to include domain-specific tests.\n\n### Disable visual feedback\nTo run without GPT-4 Vision analysis, comment out the visual feedback line:\n```javascript\n// const visualFeedback = await this.getVisualDesignFeedback(testResults.screenshot, designPrompt);\nconst visualFeedback = null;\n```\n\n## 9. Troubleshooting\n\n### Common Issues:\n- **Port conflicts**: Make sure Vite is running on the expected port\n- **File path errors**: Double-check the `viteProjectPath` in CONFIG\n- **OpenAI API**: Ensure your API key is valid and has sufficient credits\n- **Playwright**: If browser doesn't launch, try `npx playwright install`\n- **Visual feedback errors**: GPT-4 Vision requires sufficient API credits and may have rate limits\n- **Skip generation**: If using `--skip-generation`, ensure `GeneratedPrototype.tsx` exists\n\n### Debug Mode:\nSet `headless: false` in Playwright config to watch the browser interactions in real-time.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpglevy%2Fprototype-iteration-agent","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpglevy%2Fprototype-iteration-agent","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpglevy%2Fprototype-iteration-agent/lists"}