WebMCP Active — Polyfill + Claude API

WebMCP Integration

This portfolio is a live MCP server. It exposes 5 structured tools via the W3C WebMCP API — powered by GPT-4o-mini for intelligent Q&A. AI agents, browser assistants, and assistive technologies can query projects, search skills, and interact with this site programmatically.

WebMCP Spec Chat with my portfolio

How it works

🌐

Portfolio loads

Remix SSR + React hydration

→

⚙️

Tools registered

navigator.modelContext.provideContext()

→

🤖

Agent calls tool

ask_about_shiva(question)

→

🧠

Claude responds

Portfolio context + Claude Sonnet

Portfolio AI — powered by GPT-4o-mini via WebMCP

0 messages

Hey! I'm the AI assistant powering Shiva's portfolio. This conversation is powered by GPT-4o-mini via the WebMCP `ask_about_shiva` tool. Ask me anything about Shiva's projects, skills, or experience!

Integration Code

WebMCP tools registered via the W3C spec, with GPT-4o-mini as the AI backend.

webmcp-tools.jsJavaScript

// Register tools via W3C WebMCP API
// Spec: https://webmachinelearning.github.io/webmcp/

navigator.modelContext.provideContext({
  tools: [
    {
      name: 'ask_about_shiva',
      description: 'Ask any question about Shiva Teja...',
      inputSchema: {
        type: 'object',
        properties: {
          question: { type: 'string' }
        },
        required: ['question']
      },
      async execute({ question }) {
        // Calls GPT-4o-mini with portfolio context
        const res = await fetch('/api/webmcp-chat', {
          method: 'POST',
          body: JSON.stringify({ question })
        });
        const { answer } = await res.json();
        return {
          content: [{ type: 'text', text: answer }]
        };
      },
      annotations: { readOnlyHint: true }
    },
    // ... filter_projects, get_skills, etc.
  ]
});