{"repo":"adiasg/prompt-canvas","free":true,"listed":false,"github":"https://github.com/adiasg/prompt-canvas","clone":"git clone https://github.com/adiasg/prompt-canvas.git","description":"Visual prompts for coding agents directly from your frontend.","language":"TypeScript","stars":23,"topics":["coding-agent","nextjs","react","reactjs","vibe-coding"],"license":"MIT","category":"saas-starters-boilerplates","readme_excerpt":"prompt-canvas Visual prompts for coding agents directly from your frontend. A React component for annotating changes & sending them to coding agents. Quickstart Installation prompt: Install Add to NextJS App Router Place the component in app/layout.tsx with: Usage - Run the dev server ( npm run dev ) and open the web app in the browser. Supported browsers: Chrome, Firefox. - Draw changes, then copy screenshot (⌘C) to paste in your coding agent. Tips - It helps to have design guidelines for the coding agent ( AGENTS.md , .cursor/rules , etc.). Here's a great starter from OpenAI's cookbook. Keyboard Shortcuts Shortcut Tool ------------------ ------------------- P Pen B Box T Text E Eraser ⌘C Copy screenshot ⌘Z / ⌘⇧Z Undo / Redo","default_branch":null,"files":null,"tree":[],"storefront":"/r/adiasg","claimed":false,"request_supported":{"post":"https://gitbuyer.com/r/adiasg/prompt-canvas/request-supported","requests":0},"note":"indexed from public GitHub; nothing is for sale on this page. Clone it from GitHub. Paid listings live at /search."}