Welcome to the AI-Assisted app development workshop! 🚀
In this session, we’ll explore AI coding tools and use Cursor AI to build a simple web application quickly.
- Learn about AI-powered coding tools
- Use Cursor AI to assist in building an application
- Hands-on experience with AI-assisted development
You can see this template project running here: https://demo-2uxj32rii-scottjs-projects-82fb406a.vercel.app
Before we begin, please ensure you have the following installed:
- Git Fork (Makes reviewing changes and reverting a bit easier)
- Replit (Web-based alternative to Cursor, useful if there's setup problems during the session)
Replit is a useful alternative if for some reason you're having problems with setting up Cursor.
To use Replit in the workshop, create an account, go to "Templates", find Next.js in the list, click "Use Template".
Follow these steps to set up your development environment.
Mac:
- Download Cursor AI from cursor.com
- Open the
.dmgfile and drag Cursor into theApplicationsfolder - Open Cursor AI and sign in (if required)
Windows:
- Download Cursor AI from cursor.com
- Run the
.exeinstaller and follow the setup instructions - Open Cursor AI and sign in (if required)
Mac (Using Homebrew):
brew install nodeWindows:
- Download Node.js from nodejs.org
- Run the installer and follow the setup instructions
- Verify installation:
node -v
npm -v
A template project has been created to make setup a bit easier, you can use one of the options below.
Option 1: Clone using Git (Recommended)
git clone git@github.com:KomodoHQ/ai-app-development-workshop.git
cd ai-app-development-workshop
Option 2: Download as ZIP
- Open this repo
- Click "Download ZIP"
- Extract the folder to a convenient location on your computer
- Launch Cursor AI
- Click "Open Folder" and select the project directory
- Open
README.mdin Cursor AI and follow the next steps
Inside Cursor AI, open a Terminal and run:
npm install
npm run dev
Your app should now be running at http://localhost:3000 and you should be able to visit this in your browser.
Below are some example projects you can try building using Cursor AI, feel free to try your own ideas!
Add tasks, mark them as complete, delete tasks.
Create a simple Todo List in Next.js with Tailwind CSS.
- Use React state to manage todos
- Each todo should have a "Mark as Done" button
- Display completed todos with a strikethrough effect
- Style it using Tailwind CSS
Add meals, ingredients, and randomly pick a meal.
Create a Recipe Manager app in Next.js with TypeScript.
- Users should be able to add a new recipe with a name, ingredients, and description
- Display a list of all recipes
- Add a "Pick a Random Recipe" button
- Style it using Tailwind CSS
A simple timer for productivity with 25-minute work sessions.
Create a Pomodoro Timer in Next.js with React state.
- Display a countdown timer starting from 25 minutes
- Include "Start", "Pause", and "Reset" buttons
- When time is up, play a sound or show an alert
- Style it using Tailwind CSS
- Instead of “Create a todo app,” try “Create a todo app with add, complete and delete functionality.”
- If an output isn’t perfect, refine your prompt rather than expecting a full app in one go.
- If something breaks, ask Cursor “Why isn’t this working?”
- Copy/paste errors into Cursor to help debug the issue.
- Break large tasks into smaller prompts, for example, first ask for a form, then ask for state management, then ask for styling.
If you want to share your app online, you can use Vercel for free hosting.
npm install -g vercel
Run:
vercel
- Keyboard Shortcuts: https://docs.cursor.com/kbd
- An idiots guide to big projects with Cursor: https://forum.cursor.com/t/an-idiots-guide-to-bigger-projects/23646
- Mastering big codebases: https://forum.cursor.com/t/mastering-long-codebases-with-cursor-gemini-and-claude-a-practical-guide/38240
By the end of this workshop, you’ll have:
- Installed AI-powered coding tools
- Built a functional web app
- Learned how to guide AI for development
- (Optional) Deployed your app online
Enjoy! 🏆