Samrakshaka

Samrakshaka - A WebMCP-enabled personal portfolio website

Comment

Inspiration

I saw on X, that Open AI has initiated WebMCP Challenge. Before this I had heard MCP, but WebMCP was the first time I heard this word. Previously I had built my website using AI, and when I checked this competition, I thought I could make my application aligned with WebMCP standard and in the process would learn something new.

What it does

Samrakshaka is my personal portfolio website. Earlier it was for humans to check out my work experience along with my substack post listed here. Further I now aligned it with WebMCP protocol to allow agents to interact with tools I have added. In demo video i recorded, it's don't have my voice as requested in submission guidelines but i have shown navigation to my website, and then to my GitHub repository which has commands of to get tools listed from chrome devtools and further execution of some tools utilizing WebMCP protocol

How we built it

Well I told Gemini what I want, and what agents want under this new WebMCP protocol. I shared my website code which consists of html, css and js script and asked it to align with WebMCP guidelines and gemini did it's magic  


┌────────────────────────────────────────────────────────────────────────┐
│                             BROWSER RUNTIME                            │
│                                                                        │
│   ┌───────────────────────┐             ┌──────────────────────────┐   │
│   │   WebMCP Controller   │────────────►│  navigator.modelContext  │   │
│   │       (app.js)        │             │   (Agent Tool Registry)  │   │
│   └───────────┬───────────┘             └─────────────┬────────────┘   │
│               │                                       │                │
│               ▼                                       ▼                │
│   ┌───────────────────────┐             ┌──────────────────────────┐   │
│   │ Dynamic UI & Feeds    │             │  Inspector / Copilot     │   │
│   │ (DOM, RSS, Config)    │             │  (DevTools / Chrome AI)  │   │
│   └───────────────────────┘             └─────────────┬────────────┘   │
└───────────────────────────────────────────────────────┼────────────────┘
│
┌───────────────────────────────────────────────────────▼────────────────┐
│                           EDGE INFRASTRUCTURE                          │
│                                                                        │
│   ┌────────────────────────────────────────────────────────────────┐   │
│   │  Cloudflare Pages Automated CI/CD (samrakshaka.org)            │   │
│   └────────────────────────────────────────────────────────────────┘   │
└────────────────────────────────────────────────────────────────────────┘

Challenges we ran into

I started with GrokAI first for this Hackathon submission, the context window keeps failing. Switched to Gemini for my application code upgrade for WebMCP support. No challenges considering my website is minimalistic.

Accomplishments that we're proud of

Learned something new: Learned about WebMCP at a high level. In future, this current hackathon submission will help me remember that next application i build if it is following standards which helps agents to interact faster with my website

What we learned

Well to be honest, it was an AI model which worked. I was telling it what to do.

What's next for Samrakshaka

Below is what AI suggested, I can add additionally to my website. 

  • Interactive Agent Sandbox: Expand the registered WebMCP toolkit to support interactive Q&A capabilities directly over substack blog posts.
  • Multi-Modal Tool Actions: Implement WebMCP tools capable of accepting complex parameter payloads, such as dynamic content filtering and theme switching.
  • Open Source WebMCP Starter Kit: Abstract the app.js protocol layer into a standalone boilerplate to help developers quickly add WebMCP capabilities to personal sites and static apps.
Share this project:

Updates

Submission history