Fashion Learning Studio

A fashion eSchool where WebMCP agents guide the user's learning experience interactively using quizzes and essays.

Comment

Inspiration

Fashion education is practical, visual, and highly dependent on guidance. A learner may watch a sewing demonstration and still need someone to identify the important control point, connect it to an exercise, review their understanding, and show them what to do next. Instructor-led delivery does not scale easily, especially for adult and working learners who cannot attend scheduled classes.

Conventional online courses provide content, but learners must navigate long course structures and interpret practical activities largely on their own. Browser agents normally have to guess their way through changing page markup.

I built Fashion Learning Studio to explore a more trustworthy collaboration: the school supplies the curriculum, demonstrations, assessments, and rules, while the learner's chosen browser agent supplies patient, contextual support. WebMCP lets the agent understand and interact with the same visible learning interface without replacing the learner or taking credit for the learner's work.

What it does

Fashion Learning Studio is a standalone WordPress learning experience for fashion design and sewing. It combines accessible course pages, practical video lessons, layered assessments, authentication, persistent learner progress, and five browser-native WebMCP tools.

The demo includes three learning paths:

Fashion Foundations: Fabric to Silhouette introduces fabric behaviour and an A-line skirt exercise.

Fashion Design Studio: Concept to Collection has six ordered layers covering design signals, colour, silhouette, materials, mood-board editing, and a final rationale.

Sewing Skills: Machine Control to Finishing provides 19 ordered video-led topics, practice reflections, and a final essay.

The agent can inspect the signed-in learner's state, open the appropriate lesson, begin an available exercise, explain what to observe or practice, stage a proposed response in the visible form, and recommend the next step. Passed layers unlock the next task, and every learner has separate course progress.

The agent cannot claim a video was watched, submit or grade an answer, or silently change progress. It stages assistance in the shared interface; the learner reviews, edits, and personally clicks Submit my answer. Without WebMCP, the school remains fully usable through its ordinary interface.

What people and agents can do together

A learner can ask, “What should I learn next?” Instead of guessing from the layout, the agent reads authoritative course state, opens the correct lesson, starts the available exercise, and helps stage a concise response in the visible form. The learner reviews or edits it and personally submits it.

WebMCP gives the agent a reliable vocabulary for the course while preserving learner authorship and school authority. It turns static self-paced content into guided learning without requiring an instructor to repeat every basic explanation.

How we built it

We built the project as a lightweight WordPress plugin using PHP, the WordPress REST API, user metadata, semantic HTML, accessible CSS, and framework-free JavaScript. A companion WordPress block theme keeps the learning experience focused and responsive.

After capability detection, the page registers five contextual tools through document.modelContext.registerTool():

The five WebMCP tools are:

  1. get_learning_state Reads the active course, progress, current assessment, choices, and available actions.
  2. open_next_lesson Opens the learner’s available lesson visibly.
  3. start_exercise Starts the assessment after the lesson prerequisite is satisfied.
  4. review_current_answer Reviews the learner-written answer, identifies weaknesses, and displays improvement advice without submitting or saving it.
  5. get_progress_and_next_step Reports the accurate completion percentage and recommends the next action.

The tools use bounded JSON Schemas, enums, length limits, additionalProperties: false, structured errors, appropriate read-only annotations, same-origin exposure, and lifecycle cleanup with AbortController. Protected REST routes require an authenticated WordPress session and valid REST nonce. WordPress remains authoritative for state transitions, grading, and persistence.

The design uses progressive enhancement: the human interface remains primary and WebMCP adds collaboration only when supported. Assessment and progress are deterministic. No external AI API or API key is required by the website; the learner's browser agent supplies the intelligence and invokes the site’s structured tools.

Codex helped refine the product scope, translate the educational workflow into tool contracts, implement and review the plugin, improve the learner experience, define security and confirmation boundaries, create deterministic tests, and diagnose hosting and browser-support issues.

Challenges we ran into

The first challenge was understanding that WebMCP is not an embedded chatbot. It is a browser-native bridge through which an agent discovers capabilities supplied by the current page. That changed the design from “add an AI teacher” to “make the school understandable and operable by the learner's chosen agent.”

The hardest product decision was where autonomy should stop. Automatically submitting an educational answer might look impressive, but it would undermine learner agency and academic integrity. We separated assistance from commitment: the agent explains and stages work, but only the learner can submit, grade, or save it.

Browser support is still experimental, so we needed a complete standard interface and graceful fallback. We also had to create a public demonstration without exposing learner records, proprietary course data, or private video configuration.

Hosting anti-bot protection challenged some automated requests. This revealed a broader deployment issue: agent-ready applications need authentication and hosting security that recognise legitimate, user-authorised agent activity without weakening protection.

Accomplishments that we're proud of

Built a coherent fashion-learning experience rather than a tool-registration proof of concept.

Connected five task-specific WebMCP tools to authenticated learning state.

Connected agent assistance to visible lessons, exercises, feedback, and progress.

Preserved learner authorship through a clear human-confirmation boundary.

Created three course structures, including layered design work and 19 video topics.

Kept video configuration and learner information outside the public release.

Built deterministic assessment without paid model calls from the website.

Preserved full functionality when WebMCP is unavailable.

Added structured evaluation journeys and deterministic client and server tests.

What we learned

WebMCP is most valuable when it communicates application intent and trust boundaries, not merely when it replaces clicks. Tool names, schemas, allowed actions, state responses, and visible effects must agree.

We learned to distinguish between reading information, changing the visible interface, staging a proposed change, and performing a confirmed consequential action. In education, preserving a meaningful learner action can be more valuable than maximising automation.

The website must remain authoritative for authentication, access, assessment, progress, and completion. The agent provides explanation and assistance but does not replace the school's rules or the learner's responsibility.

Agent-ready education can reduce the instructor bottleneck. Educators encode the course sequence, demonstrations, rubrics, common mistakes, and escalation rules once, while agents help individual learners move through that trusted structure at their own pace.

What's next for Fashion Learning Studio

Next, we will integrate this interaction model into the full Unikon eSchool LMS, where it can work with real courses, sections, lessons, quizzes, projects, submissions, portfolios, progress records, and certificates.

We plan to expose tools dynamically according to the learner's page and state, evaluate tool selection with more natural requests, add instructor-authored rubrics and feedback, and provide accessible transcripts and captions.

We also plan to add personalised study timetables, evidence-based participation tracking, missed-session catch-up plans, and escalation to a human instructor. Future activities could accept photographs, pattern files, and CAD exercises so an agent guides the process while an instructor evaluates fit, construction quality, and final competence.

Our long-term vision is an agent-guided, instructor-supervised mobile fashion school that serves learners continuously without requiring an instructor to repeat every basic lesson.

Built With

Share this project:

Updates

Submission history