# copilot-nextjs-shadcn-lab
Experimental laboratory for testing Next.js + GitHub Copilot + shadcn MCP integration for UI development with AI.
## 🚀 Tech Stack
- **[Next.js 16](https://nextjs.org)** - React framework with App Router
- **[TypeScript](https://www.typescriptlang.org/)** - Static typing
- **[Tailwind CSS 4](https://tailwindcss.com/)** - Utility-first CSS framework
- **[shadcn/ui](https://ui.shadcn.com/)** - UI components via MCP server
- **** - AI-assisted development
- **[MCP Server](https://modelcontextprotocol.io/)** - Model Context Protocol for shadcn
- **[ESLint](https://eslint.org/)** - Linting
## 🎯 Project Purpose
This laboratory project where i tested how to use:
- **GitHub Copilot** with custom instructions for intelligent page/section generation
- **shadcn MCP server** for seamless component integration
- **shadcn/ui components** components to build features
- **AI-driven workflow** for building Next.js applications
The setup enables generating complete pages and sections through natural language prompts to Copilot, which intelligently selects and assembles components from shadcn/ui.
## 🛠️ Available Commands
Start development server
npm run dev
Build project for production
npm run build
Start production server
npm run start
Linting with ESLint
npm run lint
## 🚀 Quick Start to test
1. Clone repo from github
git clone LINK cd copilot-nextjs-shadcn-lab
2. Install dependencies
npm i
3. Try to generate page or section by copilot, make prompt for example "Create page by description: [detailed about page or secion]"
4. **Start the development server:**
npm run dev
5. **Open your browser:**
Go to [http://localhost:3001](http://localhost:3001)
## 🔍 System Requirements
- **Node.js** 22.11.0
- **npm** 10.9.0
The project includes `.nvmrc` file with Node.js version - use `nvm use` to switch to the correct version.
## 🚢 Deploy
The easiest way to deploy is using [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme).
Check out [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.