Table of Contents
Try It Now →

VibeCodingTutor

An Intelligent Tutoring System for AI-Assisted Programming

Learn the art of "vibe coding" - effectively collaborating with AI to create software

28
Lessons
3
Skill Levels
4
Scaffolding Modes
2
AI Agents
Skip to App

What is "Vibe Coding"?

"Vibe coding is not about writing code yourself - it's about effectively communicating your intent to an AI and verifying the results."

- The VibeCodingTutor Philosophy
đŸ’Ŧ

Prompt Engineering

Craft clear, effective prompts that guide AI to generate the code you need

🔍

Code Verification

Develop skills to review, test, and validate AI-generated code

🔄

Iterative Refinement

Master the art of refining and improving code through dialogue with AI

Dual-Agent Architecture

VibeCodingTutor uses two intelligent agents working together to support your learning

🎓 Tutor Agent
Server-side AI
↓
📊 Student Model
Competency Tracking
↔
📋 Competency Rules
Diagnostic Engine
↓
🔗 Tutor Bridge
VS Code Extension
↓
👨‍đŸ’ģ You
Learning in Code-Server

The Competency Model

28 carefully designed lessons across 3 progressive levels

🌱

Core (C1-C6)

Foundation skills: basic prompting, code reading, simple modifications, running and testing

6 lessons
đŸŒŋ

Extended (E1-E10)

Intermediate skills: multi-file projects, debugging, API integration, refactoring

10 lessons
đŸŒŗ

Ultimate (U1-U12)

Advanced skills: architecture design, optimization, security, deployment strategies

12 lessons

Adaptive Scaffolding

The tutor adapts its teaching style based on your demonstrated competency

đŸŖ

Full Scaffold

Novice Level

High intervention, direct hints and step-by-step guidance

🐤

Guided

Developing

Medium intervention, Socratic questions

đŸĻ…

Collaborative

Proficient

Low intervention, peer-level suggestions

đŸĻ‰

Expert

Mastered

Minimal intervention, autonomous work

How Learning Works

A continuous feedback loop between you, the AI, and the tutor

1. Action

You write a prompt or modify code

2. Capture

Tutor Bridge captures your activity

3. Diagnose

Tutor Agent analyzes your behavior

4. Update

Student Model updates competencies

5. Intervene

Appropriate feedback is generated

Your Learning Environment

A fully integrated IDE experience powered by VS Code in the browser

đŸ’ģ

Code-Server Integration

Full VS Code experience in your browser with syntax highlighting, IntelliSense, and extensions

🤖

AI Chat Interface

Multiple AI providers (Claude, GPT-4, Gemini) to practice your prompting skills

📚

Tutor Panel

Real-time feedback, competency tracking, and personalized hints

📁

Project System

Pre-configured projects for each lesson with starter code and clear objectives

Core Lessons (C1-C6)

Build your foundation with these essential skills

C1 Writing Effective Prompts →
C2 Reading & Understanding AI-Generated Code →
C3 Making Simple Modifications →
C4 Running & Testing Code →
C5 Identifying & Reporting Errors →
C6 Iterative Prompt Refinement →

See It In Action

A typical learning interaction in VibeCodingTutor

Your Prompt

// Student types:
"Create a function to calculate fibonacci"

Tutor Feedback

💡 Hint

Good start! To improve this prompt, consider specifying:

  • The programming language
  • Input/output expectations
  • Performance requirements

Refined Prompt

// After guidance:
"Write a JavaScript function that calculates the nth Fibonacci number. It should handle n=0 returning 0, n=1 returning 1. Use memoization for efficiency. Include JSDoc comments."

Result

✓ Competency Updated

C1 (Prompt Writing): 65% → 72%

C6 (Iterative Refinement): 40% → 48%

For Educators

Powerful tools to monitor and guide your students

📊

Class Dashboard

Real-time view of all students' progress, struggles, and achievements

📝

Lesson Management

Assign specific lessons, set due dates, and track completion

📈

xAPI Analytics

Learning analytics compatible with LRS for institutional integration

Under the Hood

Built with modern, production-ready technologies

⚡

Node.js + Express

Fast, scalable server

🔌

Socket.IO

Real-time communication

â˜ī¸

Google Cloud

GCS + Cloud Run

🧠

Multi-LLM

Claude, GPT-4, Gemini

// Data Flow
StudentAction → TutorBridge → POST /api/events
→ TutorAgent.diagnose() → CompetencyRules
→ StudentModel.update() → LLM Intervention
→ Socket.IO → Client UI

Ready to Start Vibe Coding?

Begin your journey to mastering AI-assisted programming

Demo Accounts

Teacher: demoteacher@vibecode.org
Student: demostudent@vibecode.org

Quick Start

1. Log in with demo account
2. Select a lesson
3. Start coding with AI!

Need Help?

Check the tutor panel for hints and guidance as you learn

đŸŽ¯ Meta Note: The entire app itself is completed using vibe coding. This is a testimonial of the power of vibe coding. Click to learn more.
← → to navigate  |  Esc to close modals