CodePath

CodePath is an agent-native coding school where WebMCP lets AI tutors understand a learner’s live lesson, code, errors, progress, and tutor mode to guide them in real time.

Comment

Inspiration

Learning programming with AI assistants is powerful, but the experience is still fragmented.

Today, learners often use two separate tools:

  • a learning platform that provides lessons and exercises
  • an AI assistant that helps them when they are stuck

The problem is that the AI assistant usually does not know the learner's real context. The learner has to copy the lesson, their code, their errors, and their progress into the chat every time.

We wanted to explore a different approach:

What if the learning platform itself could give an AI agent the exact context it needs to become a real programming tutor?

This idea inspired CodePath, an agent-native coding school where humans and AI agents can learn together through WebMCP.

What it does

CodePath is a programming learning platform that teaches coding from scratch while allowing WebMCP-compatible AI agents to understand and interact with the learning environment.

The current MVP provides a beginner JavaScript learning path with:

  • structured lessons
  • visual explanations
  • interactive code editor
  • coding exercises
  • deterministic tests
  • quizzes
  • progressive unlocking
  • AI Tutor Modes

The key difference is that the AI agent does not need the learner to manually explain their situation.

Through WebMCP tools, the agent can understand:

  • the current course and lesson
  • the learner's active step
  • whether they are reading, practicing, editing code, or reviewing feedback
  • the exact live code currently written in the editor
  • runtime output
  • test results
  • mistakes and progress
  • the learner's preferred Tutor Mode

For example, when a learner writes incorrect code, the agent can see the actual code, the real execution result, and the failed test instead of giving a generic explanation.

CodePath also includes three Tutor Modes:

  • Guide: helps learners discover the solution through hints without revealing the final answer.
  • Balanced: provides stronger guidance while keeping the learner involved.
  • Explain: gives direct explanations and complete solutions when requested.

How we built it

CodePath was built as a React + TypeScript web application using Vite.

The learning system is built around structured course data, allowing new programming languages and lessons to be added without rebuilding the interface.

Main technologies used:

  • React
  • TypeScript
  • Vite
  • CodeMirror
  • Zustand
  • JavaScript sandbox execution
  • deterministic exercise validators
  • browser-native WebMCP registration
  • MCP-compatible tooling

The application exposes seven WebMCP tools:

  • get_course_progress
  • get_current_lesson
  • get_current_exercise
  • get_learning_context
  • open_lesson
  • run_code
  • submit_solution

A major part of the implementation was creating a reliable learning context system.

The platform tracks:

  • active learning step
  • learner activity
  • live editor content
  • code execution results
  • exercise submissions
  • progress
  • tutor preferences

This allows an AI agent to understand not only what page the learner opened, but what they are actually doing.

Challenges we ran into

The biggest challenge was deciding what information an AI tutor actually needs.

Our first implementation exposed basic course information and exercises, but we discovered that this was not enough.

An AI tutor needs to know:

  • Is the learner reading or coding?
  • What exact code are they currently editing?
  • Did they already run the code?
  • What happened when they ran it?
  • What mistake are they making?
  • How much help should the tutor provide?

We created an active learning cursor and live editor state system to solve this problem.

Another challenge was avoiding AI replacing learning.

A simple chatbot can immediately provide the correct answer, but that is not always useful for education.

We created Tutor Policies so the learner controls how the AI should teach them.

The website provides the agent with the learner's preferred tutoring behavior instead of forcing one style.

Accomplishments that we're proud of

We are proud that CodePath demonstrates a complete agent-native learning workflow.

The agent can:

  • discover the available WebMCP tools
  • understand the learner's current state
  • navigate lessons
  • read live code changes
  • access real execution results
  • understand failed tests
  • adapt its tutoring style based on Tutor Mode

One important achievement was solving the live-code context problem.

The AI does not receive a copied or outdated version of the learner's code. It receives the actual current editor draft.

Another achievement is the separation between:

  • deterministic evaluation: deciding if code is correct
  • AI tutoring: explaining and guiding the learner

This prevents the AI from guessing correctness and allows it to focus on teaching.

What we learned

Building CodePath changed our view of AI-powered websites.

Adding a chatbot is not enough to create a useful AI experience.

For an agent to truly help users, websites need to expose meaningful context and actions.

WebMCP provides a bridge between traditional websites and AI agents by allowing websites to describe their capabilities and share structured information.

We learned that the most important part of an AI application is not only the model itself, but the quality of the context provided to it.

What's next for CodePath

The current MVP proves the concept with JavaScript.

The next steps are:

  • adding complete programming paths for Python, HTML/CSS, SQL, and more
  • creating larger project-based courses
  • adding more interactive visual explanations
  • improving personalized learning recommendations
  • adapting exercises based on learner mistakes
  • expanding accessibility features

The long-term vision is to create a programming school where:

the course provides structure, the learner writes the code, and their preferred AI agent always understands how to help.

Built With

Share this project:

Updates

Submission history