Tutorial 7: AI-Assisted Programming & MCP Setup

Reading time: ~20 minutes | Hands-on setup: ~10 minutes

This tutorial teaches you how to use AI tools at three different levels and how to set up MCP so AI can actually test your running application.

---

Part 1: How to Use AI for Programming

The 3 Levels of AI-Assisted Coding

Level 1: AI in the Browser (Everyone can do this)

Open ChatGPT, Claude, or Gemini in your browser and ask questions.

Good prompts for Laravel:

Create a Laravel migration for a students table with name, email, 
student_number, and class_group columns

Write a Laravel controller method that stores a new student from 
a form submission and redirects back to the list

I'm getting this error: SQLSTATE[HY000]: General error: 1 table 
students has no column named class_group. What's wrong?

Better Prompts = Better Results

• Be specific: "Create a Laravel 11 migration" not just "create a table"
• Include the error message when debugging
• Ask "explain this code" not just "write this code" — you'll learn more
• Ask for alternatives: "Show me 2 different ways to do this"

---

Level 2: AI in Your Editor (Recommended)

Install an AI extension in VS Code so AI can read your files directly.

Options:

• GitHub Copilot — autocompletes code as you type (free for students)
• Claude for VS Code — chat with Claude, it can read and edit your files
• Cursor — VS Code fork with AI built in (free tier available)

Why this is better than Level 1:

• AI sees all your files — it understands your project structure
• AI can edit files directly — no copy-paste needed
• AI can run php artisan test and read the results
• You stay in your editor — faster workflow

Example workflow:

1. Open your Laravel project in VS Code/Cursor
2. Ask AI: "Look at my Student model and create the missing migration"
3. AI reads your model file, sees the fields, writes the migration
4. Ask AI: "Run php artisan migrate and tell me if it works"
5. AI runs it, sees an error, fixes it automatically

---

Level 3: AI with MCP (Most Powerful)

Give AI access to external tools so it can test your running app. This is covered in Part 2 below.

---

Do's and Don'ts with AI

Do ✅	Don't ❌
Ask AI to explain code	Blindly copy-paste without reading
Give AI your error messages	Say "it doesn't work" without details
Ask for alternatives	Accept the first answer always
Verify AI output works	Trust that AI is always correct
Ask "why does this work?"	Only ask "write this for me"
Use AI to debug	Skip testing because "AI wrote it"

---

How AI Can Help with Laravel

Task	What to ask AI
Create migration	"Create a migration for a grades table with student_id foreign key, subject_id foreign key, score decimal, date, and notes nullable"
Set up relationships	"Add a hasMany relationship for grades in my Student model"
Build a form	"Create a Blade form to add a new student with name, email, student_number, and class_group fields"
Create routes	"Add resource routes for StudentController"
Debug errors	Copy the full error from browser or terminal and ask "Why am I getting this error?"
Run tests	"Run php artisan test --filter=Level1 and explain which tests fail and why"
Style the page	"Add Tailwind CSS classes to make this table look professional"

---

Part 2: MCP Setup — Give AI Superpowers

What is MCP?

MCP (Model Context Protocol) lets your AI tool connect to external tools. Without MCP, AI can only read your code. With MCP, AI can:

• 🌐 Open your browser and see your running app
• 🖱️ Click buttons, fill forms, and test your UI
• 🗄️ Query your database and check your data
• 📸 Take screenshots and spot visual bugs

Think of it like giving AI eyes and hands, not just a brain.

---

Setup: Puppeteer MCP (AI controls Chrome)

What you need

Node.js v18 or higher. Check with node --version

If not installed, download from nodejs.org

Step 1: Install Puppeteer MCP

npm install -g @anthropic/mcp-puppeteer

Step 2: Configure your editor

VS Code + Claude

1. Open Command Palette: Ctrl+Shift+P
2. Type: Claude: Open Settings
3. Find MCP Servers section and add:

{
  "puppeteer": {
    "command": "npx",
    "args": ["-y", "@anthropic/mcp-puppeteer"]
  }
}

4. Restart VS Code

Cursor

Create file .cursor/mcp.json in your project root:

{
  "mcpServers": {
    "puppeteer": {
      "command": "npx",
      "args": ["-y", "@anthropic/mcp-puppeteer"]
    }
  }
}

Restart Cursor.

Step 3: Test it!

1. Start your Laravel app: php artisan serve
2. Ask AI: "Open Chrome and navigate to http://localhost:8000"
3. If Chrome opens and shows your Laravel page — you're ready!

---

Using Puppeteer MCP During the Hackathon

Testing your pages:

Open localhost:8000/students and take a screenshot. 
Does the page show a table of students?

Testing your forms:

Go to localhost:8000/students/create, fill in the form with 
name 'Jan Test', email 'jan@test.nl', student number 'STU001', 
class group '2A', and click submit. Did it work?

Finding bugs:

Open localhost:8000/dashboard and check if it shows the total 
number of students. Take a screenshot and tell me what's wrong.

Full end-to-end test:

Test my app: 
1. Go to /students/create and add a student
2. Go to /students and check the student appears
3. Click on the student to see their profile
4. Add a grade for that student
5. Check if the grade shows on their profile
Tell me what works and what doesn't.

---

Optional: SQLite MCP (AI reads your database)

npm install -g @anthropic/mcp-sqlite

Add to your MCP config (next to puppeteer):

{
  "sqlite": {
    "command": "npx",
    "args": ["-y", "@anthropic/mcp-sqlite", "--db", "./database/database.sqlite"]
  }
}

Then ask AI:

• "Show me all records in the students table"
• "Check if the grades table has the correct foreign keys"
• "Count how many attendance records are marked as absent"

---

Troubleshooting

Problem	Fix
npx: command not found	Install Node.js from nodejs.org
MCP server won't connect	Restart your editor completely (not just reload)
Chrome doesn't open	Install Chrome; on Windows try npm install -g puppeteer first
database.sqlite not found	Run php artisan migrate first
"Permission denied" on Windows	Run terminal as Administrator
Cursor doesn't see MCP config	Make sure .cursor/mcp.json is in the project root

---

Summary: Your AI Toolkit

Tool	What it does	Setup time
ChatGPT/Claude in browser	Ask questions, generate code	None
AI in editor (Copilot/Claude/Cursor)	Read files, edit code, run commands	5 min
Puppeteer MCP	AI opens browser, tests your app	5 min
SQLite MCP	AI queries your database	2 min
php artisan test	Automated test suite (pre-installed)	None

Set Up Before Hackathon Day

Install and configure everything before the hackathon. During the sprint, you want to code — not troubleshoot installations.

---

Need help? Contact d.radic@roc-nijmegen.nl