CALMA-SEG WebMCP Demo

A bilingual, privacy-first WebMCP demo that lets people and browser agents discover safe psychoeducational exercises and human-support options without diagnosis or personal data.

Comment

Inspiration

CALMA-SEG was inspired by a simple question: how can a person quickly find clear, low-intensity psychoeducational support without navigating a complex interface or sharing personal information?

This question is especially relevant in demanding work and public-service environments, where stress can be common but asking for help may still involve uncertainty or stigma. I wanted to explore how people and browser agents could work together to make safe, prewritten information easier to discover while maintaining clear clinical, privacy, and emergency boundaries.

What it does

CALMA-SEG is a bilingual English-Spanish WebMCP demonstration. People can use its ordinary interface to:

  • Filter short psychoeducational exercises by category and duration.
  • View complete exercise instructions and safety notes.
  • Find general human-support options based on a self-selected urgency level.
  • Read the demo’s safety and privacy limitations.

A compatible browser agent can discover and invoke the same capabilities through four WebMCP tools:

  • list_wellbeing_exercises
  • show_wellbeing_exercise
  • find_human_support_options
  • explain_safety_limits

Every successful agent call produces a visible change in the human interface. The page updates its filters, displayed content, language, or Agent Activity panel so that the person can see what the agent did.

How I built it

I built CALMA-SEG as a static Vite application using semantic HTML, responsive CSS, and vanilla JavaScript.

The tools are registered with the WebMCP imperative API through document.modelContext.registerTool. Each tool has a name, description, JSON input schema, validated parameters, and a predictable text result.

All educational content is fixed, synthetic, and stored locally in the application. The project has no backend, database, authentication, analytics, cookies, local storage, or external AI API. It is deployed through Netlify from a public GitHub repository.

Why WebMCP

Without WebMCP, a browser agent would need to interpret headings, dropdowns, cards, and buttons from the DOM and infer their meaning. With WebMCP, the website declares its capabilities directly.

For example, an agent can request a Spanish exercise with a maximum duration of three minutes through validated parameters. The website then returns a structured result and synchronizes the visible human interface with that request.

This creates a more predictable and transparent collaboration between the person, the browser agent, and the website.

Challenges

The main challenge was designing tools that were useful without crossing clinical or privacy boundaries. CALMA-SEG does not diagnose, provide therapy, recommend medication, infer a person’s mental state, or function as an emergency service.

Another challenge was ensuring that agent actions were never silent. The exercise-listing tool originally returned information only to the agent. I revised it so that it also updates the visible filters, exercise list, language, and Agent Activity panel.

I also had to account for WebMCP’s experimental browser availability. When WebMCP is unavailable, the page reports this honestly while keeping the complete manual interface functional.

What I learned

I learned how WebMCP can turn an ordinary website into an explicit set of safe, typed capabilities for browser agents. I also learned that agent-friendly design requires more than returning data: actions should remain understandable and visible to the person using the page.

The project reinforced the importance of input validation, progressive enhancement, bilingual consistency, privacy by design, and careful safety language.

What’s next

Future work could include accessibility and usability testing, additional reviewed educational content, and evaluation of how clearly people understand agent actions and safety boundaries.

Any research or institutional pilot would require separate authorization, ethical and legal review, data-protection safeguards, informed consent, and professional supervision. This hackathon submission is an independent technical demonstration, not a clinical service or institutional implementation.

Built With

Share this project:

Updates

Submission history