Entorno Camaleón Inspiration Many students do not struggle because they lack knowledge. They struggle because educational platforms require them to navigate visual overload, dense instructions, time pressure, unexpected motion, and a single way to respond. For neurodivergent children, these interface demands can become an additional test that has nothing to do with the actual learning objective. We created Entorno Camaleón around a simple principle: the learning goal should remain the same, but the path should adapt. Our prototype follows Leo, a nine-year-old student who understands science but feels overwhelmed by a traditional learning management system. Entorno Camaleón transforms his water-cycle lesson into a calmer, character-led experience featuring Luma, his companion, and Ayu, the mythical Guardian of the Cycle. What it does Entorno Camaleón is a WebMCP-powered neuroinclusive learning experience that allows a browser agent to adapt an educational interface in real time. The experience can adjust information density, text size, color environment, motion, animation, audio guidance, and the available response channels. Students can participate through voice, text, or visual interaction. The agent handles interface complexity so the student can focus on the academic objective. WebMCP also provides an important safety boundary. The agent can prepare Leo’s answer and open the review screen, but it cannot submit academic work automatically. Leo or an authorized adult must explicitly confirm the final action. How we built it We built the proof of concept as a client-side HTML, CSS, and JavaScript experience and deployed it on Vercel. The application registers five imperative WebMCP tools through document.modelContext.registerTool(): get_lesson_context start_accessible_audio_guide adapt_learning_experience start_water_cycle_mission prepare_science_answer Each tool uses a constrained JSON Schema and connects directly to the same state used by the visible interface. These tools allow an agent to understand the current lesson without scraping the page, start an accessible Spanish audio guide, apply reversible interface adaptations, open the correct learning activity, and prepare a spoken or typed answer for human review. The prototype also uses the browser’s Speech Recognition API for real microphone input and the Speech Synthesis API for audio guidance. A typed response remains available whenever voice recognition is unsupported or microphone permission is denied. The visual system combines Atkinson Hyperlegible for reading with Geist for interface hierarchy. The experience includes responsive layouts, keyboard navigation, reduced-motion support, high-contrast focus indicators, accessible dialogs, and multiple ways to complete every important interaction. Challenges we faced One of our biggest challenges was determining the correct boundary between agent assistance and student agency. An agent should be able to remove interface friction, but it should not make academic decisions or submit work without meaningful consent. We therefore separated answer preparation from final submission. The WebMCP tool reports submitted: false and opens a visible confirmation dialog. Another challenge was balancing sensory calm with engagement. We wanted to avoid overstimulation without producing a cold or purely functional interface. The narrative involving Leo, Luma, and Ayu gives the lesson continuity, emotional context, and a clear sense of progress. Voice interaction also required careful attention. We designed microphone controls for press-and-hold interaction, keyboard activation, permission errors, and typed fallback. Audio guidance and microphone recording are mutually exclusive so the guide cannot accidentally be transcribed as Leo’s answer. What we learned We learned that WebMCP is more powerful when it represents meaningful product capabilities instead of reproducing individual button clicks. Rather than giving the agent unrestricted control over the page, Entorno Camaleón exposes a small set of understandable and governed actions. This makes agent behavior more reliable, visible, and safer for students. We also learned that accessibility should not be treated as a final compliance step. In this project, accessibility became part of the product concept itself. Multiple response channels, adjustable presentation, predictable navigation, audio guidance, and explicit confirmation improve the experience for a much broader group of learners. What we are proud of We are proud that Entorno Camaleón is both a functional WebMCP demonstration and a complete product story. The deployed prototype includes five working WebMCP tools, real voice input with a typed fallback, accessible audio guidance, a responsive five-chapter learning journey, student-controlled presentation preferences, keyboard and reduced-motion support, an explicit human-confirmation boundary, and a complete manual fallback when WebMCP is unavailable. What is next The next step is to replace the simulated school receipt with an authenticated LMS sandbox and add durable consent and audit records. We would also co-design future versions with neurodivergent students, families, teachers, accessibility specialists, and school administrators. Entorno Camaleón is currently a proof of concept, not a clinical intervention or production LMS integration. Its purpose is to demonstrate how agentic technology can make educational interfaces more flexible without taking control away from the learner. Entorno Camaleón: The learning goal stays the same. The experience finally adapts.
Built With
- accessibility
- ai-agents
- atkinson
- browser-apis
- css3
- geist
- html5
- human-in-the-loop-ai
- javascript
- json-schema
- localstorage
- responsive-design
- speech-recognition-api
- speech-synthesis-api
- vanilla-javascript
- vercel
- voice-interfaces
- wcag
- web-speech-api
- webmcp
Log in or sign up for Devpost to join the conversation.