Miaunolog

• 

  WebMCP available with Milo as the active cat profile

• 

  Miaunolog exposes three WebMCP tools to the browser agent

• 

  WebMCP executes the existing decoder and saves the observation to the shared journal

• 

  The agent-written observation appears immediately in the same local journal

Inspiration

Miaunolog started as a cat-behavior interpretation app designed to combine vocalizations, body language, context, and cat-specific profile information.

For the WebMCP Challenge, I wanted to see whether a browser agent could use the same application state and logic as the human user, rather than relying on a separate demo or agent-only backend.

I was already working on Miaunolog when I received OpenAI's notification about the WebMCP Challenge on X. I thought the app was a natural fit to extend with WebMCP and submit to the challenge.

What it does

Miaunolog lets a user create a cat profile, interpret observed behavior, and save observations to a local journal.

Through WebMCP, a browser agent can access that same workflow using three tools:

• get_cat_profile
• interpret_cat_behavior
• add_behavior_observation

The agent reads the real active profile, uses the existing Miaunolog decoder, and writes the result into the same local journal shown in the human-facing interface.

How I built it

The project was developed with AI-assisted workflows using Grok and ChatGPT for implementation, review, debugging, and iteration.

The app is built with React, TypeScript, Vite, TanStack Router, and Tailwind CSS.

The WebMCP integration uses document.modelContext.registerTool(...). The WebMCP layer is intentionally thin: it maps structured agent inputs to Miaunolog's existing internal domain model and reuses the existing decoder and persistence functions.

Profiles and journal entries remain in localStorage, while audio clips use IndexedDB. No separate backend is required for the challenge workflow.

Challenges

The main challenge was making WebMCP functional rather than decorative.

The agent needed to use the real application state, reuse the same interpretation logic as the human interface, and produce a write that immediately appeared in the existing journal.

Another challenge was preserving the behavior of the original decoder while creating an agent-facing English schema without changing internal IDs or stored data structures.

What I learned

WebMCP makes it possible to expose application capabilities directly to browser agents without duplicating the application's logic.

The most useful pattern in Miaunolog was not giving the agent a second implementation, but letting both human and agent operate on one shared state and one decoder.

What's next

Future work could expand the set of agent-visible observations, improve longitudinal behavior tracking, and explore richer workflows across cat profiles, audio observations, and journal history.tion

Built With

• ai-assisted
• chatgpt
• css
• development
• grok
• indexeddb
• localstorage
• openai
• react
• router
• tailwind
• tanstack
• typescript
• vercel
• vite
• webmcp