In this section, you'll use Copilot Vision. You can share screenshots of errors and Copilot will interpret the image and resolve the issue. Or share mockups of new designs, and Vision will help you bring them to life. Let's update our design based on a photo our designer gave us.
-
[] Open a new Copilot Chat thread in Agent mode.
-
[] Click the + button in the chat, select upload image, and select the eshop.png image found in the root of the cloned repository.
-
[] Ask:
Update the Products.razor to display products in a grid layout similar to this image. Add nice hover effects and make it responsive. -
[] Review the suggested code changes and implement them. It should recommend changes to both the Products.razor and a new Products.razor.css
-
[] Run the application to see the updated product grid layout. You may have to clear the browser cache with CTRL+SHIFT+R if you don't see the CSS update.
Note
Continue to iterate with Copilot Agent if the result isn't to your liking.
Key Takeaway: Copilot Vision can understand UI designs from images and help you implement them in your application.
Back: Part 05 - Implementing Features with Copilot Agent | Next: Part 07 - Debugging with Copilot