Hi! If you're at this repo, you've probably seen one of my AI coding videos and want to try some of those techniques yourself. If you have no clue what I'm talking about, here's a good video to show you my approach and how to best use this repo: https://youtu.be/gXmakVsIbF0
You can also just use this with your own techniques, that's cool too.
You can follow the Getting Started instructions below to start using this stack right away. I've found that using a checklist of tasks in the agent-helpers/tasks folder is a great way to make a lot of quick and effective progress with AI Coding. I personally use Cursor in Composer Agent mode with GPT-5, but feel free to use your AI coding tool of choice.
If you need to create the checklist, here are some good prompts to use to go from a high-level idea to a full checklist of stories and tasks: https://chatgpt.com/share/67be0a59-e484-800d-a078-346b2c29d727
You can also use the template in agent-helpers/.cursor-template.xml to generate the task list for existing repos. I personally use my open-source project PasteMax to convert the files into a pastable string, but repomix.com is a good option as well.
A Next.js template that combines commonly used tools and libraries for building full-stack web applications. This stack is specifically designed to be optimized for AI coding assistants like Cursor.
This template includes Next.js 14 with the App Router, Supabase for the database, Resend for transactional emails, and optional integrations with various AI providers and AWS services.
⚠️ Note: This is my personal template with tools that I personally have experience with and think are solid options for building modern full-stack web application. Your preferences very likely differ, so feel free to fork and modify it for your own use. I won't be accepting pull requests for additional features, but I'll be happy to help you out if you have any questions.
- Next.js 14 - React framework with App Router
- TypeScript - Type safety throughout
- tRPC - End-to-end type-safe APIs
- Prisma - Database ORM and schema management
- NextAuth.js - Authentication with Prisma adapter
- Supabase - Postgres database with realtime and auth
- Tailwind CSS - Utility-first CSS framework
- Framer Motion - Animation library
- Lucide Icons - Icon set
- Dark mode with Tailwind CSS
- Storybook - Component development environment
- Geist Font - Typography by Vercel
- Multiple AI integrations available:
- OpenAI - GPT-4 and o-series models
- Anthropic - Sonnet-3.5
- Perplexity - Web search models
- Groq - Fast inference
- Inngest - Background jobs and scheduled tasks
- Resend - Email delivery
- AWS S3 - File storage
- Supabase - Primary database (Note that I don't directly use the supabase client in this template, so you can switch out supabase with other database providers via the DATABASE_URL and DIRECT_URL environment variables.)
- react-toastify - Toast notifications
- Utility functions for common operations
- TypeScript and ESLint configuration included
- Agent Helpers - A folder for agent-specific files and tools.
- Agent Instructions - Instructions for the agent.
- Agent Tasks - A checklist of tasks for the agent to complete.
- Agent Scratchpad - A place for the agent to write down its thoughts and ideas.
- Agent Logs - A place for the agent to write down its logs.
ℹ️ Add these lines to your
.gitignoreto avoid agent-helper conflicts (copy & paste):
# agent-helpers
agent-helpers/logs
agent-helpers/sample-code
agent-helpers/scratchpad.mdCursor has a feature that allows you to define custom slash commands for your AI agents. This is a great way to help your agents navigate the codebase and complete tasks efficiently.
Here are the commands that are available to you, just type / in the agent window to see the list of commands.
- start - Start working on a new task.
- continue - Queue these up to keep the agent working on the current task until all tasks are complete.
- review - Review the work that has been completed.
- document - Document the changes that have been made.
- refactor - Refactor the code to make it easier for AI agents to navigate in the future.
ℹ️ Tip: When starting a new task, you can queue these up to keep the agent working on the current task until all tasks are complete. For example:
/start
/continue
/continue
/continue
/continue
/continue
/review
/refactor
/review
/documentIf you want to add more commands, you can add them to the .cursor/commands folder, just start the file with # and the name of the command.
- Fork this repository
- Install dependencies:
npm install- Copy
.env.exampleto.envand configure your environment variables - Set up your database:
npx prisma migrate dev- Start the development server:
npm run devVisit http://localhost:3000 to see your app.
app/- Next.js app router pages and API routessrc/components/- UI componentslib/- Utilities and configurationsapi/- tRPC routersutils/- Shared utilities
stories/- Storybook files
prisma/- Database schema
This template is optimized for deployment on Vercel.
- Create a new Supabase project at supabase.com
- Get your database connection strings from Supabase:
- Project Settings → Database
- Copy both the URI (for
DATABASE_URL) and Direct Connection (forDIRECT_URL)
- Push your code to GitHub
- Go to vercel.com/new
- Import your repository
- Configure the following environment variables:
DATABASE_URL- Your Supabase database URLDIRECT_URL- Your Supabase direct connection URLNEXTAUTH_SECRET- Generate withopenssl rand -base64 32NEXTAUTH_URL- Your production URL (e.g., https://your-app.vercel.app)- Add any other variables from
.env.examplethat you're using
- Deploy!
- Run database migrations in the Vercel deployment:
npx vercel env pull .env.production.local # Pull production env vars
npx prisma migrate deploy # Deploy migrations to production- Set up your custom domain in Vercel (optional):
- Go to your project settings
- Navigate to Domains
- Add your domain and follow the DNS configuration instructions
MIT License