MCP Server

What is WebMCP?

WebMCP (Web Model Context Protocol) enables AI agents to discover and call MCP tools directly from web pages via the document.modelContext API. When an AI agent browses this wedding website, it automatically detects available tools using getTools() and executes them with executeTool() to perform actions like fetching event details, generating personalized invitation links, or submitting RSVPs—all without leaving the browser.

How It Works

1. 1
   Script Injection:

   The wedding website includes a WebMCP registration script that exposes 10 tools to AI agents

2. 2
   Tool Discovery:

   When an AI agent browses the page, it detects document.modelContext and calls getTools() to retrieve an alphabetically ordered list of all available tools the agent is authorized to access

3. 3
   Tool Execution:

   The agent calls executeTool(toolName, argsJSON) with the tool name and arguments as a JSON string. Tools return wedding data immediately or interact with Firebase for RSVP submissions

4. 4
   Response Handling:

   Results are returned to the agent and presented to the user in natural language

Implementation

The wedding website uses the WebMCP document.modelContext API to register tools:

// WebMCP - Exposes wedding information tools to AI agents
if (typeof document !== 'undefined' && 
    document.modelContext && 
    typeof document.modelContext.registerTool === 'function') {
  
  // Register each tool individually
  document.modelContext.registerTool({
    name: 'get_wedding_details',
    description: 'Get comprehensive wedding information including date, location, and couple details',
    inputSchema: {
      type: 'object',
      properties: {},
      required: []
    },
    execute: async () => {
      return {
        bride: { name: 'Divya Mol', /* ... */ },
        groom: { name: 'Sreejith Sivaram', /* ... */ },
        date: '2026-08-23',
        location: [/* ... */],
        website: 'https://divyasreeni.com'
      };
    }
  });
  
  // Register 9 more tools: get_event_schedule, get_venue_info,
  // post_rsvp_wishes, add_to_calendar, get_countdown,
  // get_guest_responses, generate_share_url,
  // get_our_story, get_faq
  
  console.log('[WebMCP] Successfully registered 10 wedding invitation tools');
}

Tool Discovery API

AI agents use document.modelContext.getTools() to discover available tools:

// Discover all available tools (asynchronous)
const tools = await document.modelContext.getTools();

// Returns an alphabetically ordered array of tool objects:
[
  {
    name: "add_to_calendar",
    description: "Get calendar integration links to add wedding events...",
    inputSchema: { type: "object", properties: { ... } }
  },
  {
    name: "generate_share_url",
    description: "Generate personalized wedding invitation links...",
    inputSchema: { type: "object", properties: { ... } }
  },
  {
    name: "get_countdown",
    description: "Get the time remaining until the wedding date",
    inputSchema: { type: "object", properties: {} }
  },
  // ... 8 more tools (10 total)
]

Tool Execution API

AI agents execute tools using document.modelContext.executeTool() with input arguments as a JSON string:

// Execute a tool with no parameters
const weddingDetails = await document.modelContext.executeTool(
  'get_wedding_details',
  '{}'
);

// Execute a tool with parameters
const eventSchedule = await document.modelContext.executeTool(
  'get_event_schedule',
  JSON.stringify({ date: '2026-08-23' })
);

// Execute RSVP submission
const rsvpResult = await document.modelContext.executeTool(
  'post_rsvp_wishes',
  JSON.stringify({
    name: 'John Doe',
    message: 'Congratulations!',
    attending: 'yes',
    guestCount: 2
  })
);

// Generate personalized invitation link
const shareUrl = await document.modelContext.executeTool(
  'generate_share_url',
  JSON.stringify({
    guestName: 'Ranjith & Family',
    invitedBy: 'bride',
    eventType: 'wedding_and_reception'
  })
);

Sample Use Cases