This project allows you to create advanced UI prototypes effortlessly using GitHub Copilot in VS Code's Agent mode. Built with shadcn, React, and Next.js, you can develop sophisticated interfaces without the need for complex prompts. Boilerplate project includes:
- Next.js application
- shadcn/ui component library
- Tailwind styling
- lucide-react icons
-
Clone this repository to get the template React project.
-
Install dependencies:
npm install- Run the development server:
npm run dev- Run an example prompt. Turn on "Agent mode" in Copilot Chat and prompt with an example:
Make a dashboard with mock data. it has 3 columns, with the middle one as the main one, left is nav, and right is for supplementary / smaller information. it should have various modules, and small charts showcasing some simulated scenario. it should be clear and have interactive elements.Optional: Enable 'auto approve' in Copilot settings to automatically apply agent-written changes to the codebase. You'll still be able to review and choose whether to keep or discard changes from the entire session. This setting can be found in VS Code settings > Chat > Tools > Auto Approve.
See the simple prompt in the GitHub Copilot chat, and the web preview that was generated.
