Apptome

Inspiration

The open web is incredibly powerful, but deeply siloed. Today, if you want your CRM to talk to your invoicing tool, you have to rely on third-party automation servers, manage complex webhooks, and hand over highly sensitive, long-lived API keys. I was inspired by the WebMCP draft specification because it flips this model upside down. I wanted to explore a future where integration happens securely on the client side—where humans and AI agents can collaborate directly in the browser to move data between apps safely, transparently, and without ever exposing a backend API key.

What it does

Apptome (via the Connectome Hub) is a zero-configuration, secure interoperability layer for the we. It automatically discovers WebMCP capabilities exposed by your open we apps and unifies them into a personal graph.

When you want to execute a workflow—like taking a client from your CRM and generating a bill in your Invoicing app—you initiate it in our sidebar. Our Cloudflare Workers AI agent kicks in to semantically map the data from the source app to the destination app's required JSON schema on the fly. Finally, it presents you with the exact payload for human-in-the-loop confirmation. The agent does the heavy lifting, but the human remains in total control.

How I built it

Our architecture is split into three main layers:

1. The Spoke Apps: I built sample single-page applications that natively expose their local functionality using document.modelContext.registerTool().
2. The Bridge: A lightIight client-side script that monitors toolchange events and securely relays the available WebMCP capabilities to our central Hub via WebSockets.
3. The Hub & AI Mapper: Deployed entirely on Cloudflare Workers, the Hub maintains the user's persistent tool graph. I use Cloudflare Workers AI (@cf/meta/llama-3.3-70b-instruct-fp8-fast) to perform the semantic mapping between differing tool schemas. The user interface is a secure, cross-origin iframe (the "Surface") injected over the host app.

Challenges I ran into

Browser security is notoriously unforgiving! Because I am committed to maintaining the web's Same-Origin Policy (SOP) without bypassing it, managing cross-origin iframes, strict Content-Security-Policies (CSP), and secure weSocket transports was a massive challenge. I also ran into real-world anti-tracking hurdles (like Brave browser's Shields aggressively blocking our Cloudflare Turnstile human-verification checks) which forced us to deeply understand third-party iframe behaviors. Finally, tuning the LLM to output deterministic, strictly-typed JSON schemas without hallucinating required careful prompt engineering.

Accomplishments

It is gratifying to have demonstrated true N-to-N interoperability entirely on the client side. The "magic" moment of watching the AI seamlessly map fields from one app's schema to another app's schema—without requiring the user to manually drag-and-drop fields—is something I're very proud of. Furthermore, I built a highly secure architecture that enforces human consent for every action, proving that AI agents can be both immensely powerful and completely safe.

What I learned

I gained a deep understanding of the WebMCP draft specification and the paradigms of client-side tool discovery. I also leveled up our skills in edge computing with Cloudflare Workers, handling WebSockets at the edge, and seamlessly integrating serverless AI models into real-time we applications. Most importantly, I learned that the future of agentic we workflows depends on strict, transparent security boundaries.

What's next for Apptome

Our immediate next step is expanding our prototype from "stub" apps to real-world SaaS products. I plan to build a browser extension that can act as the WebMCP bridge, bringing Apptome's capabilities to legacy we apps that don't yet support WebMCP natively. I also want to explore integrating local, on-device SLMs (Small Language Models) so the semantic mapping can happen entirely locally for ultimate privacy.

Built With

• antigravity
• grok
• kimi
• opus