Multi-Framework WebMCP Integration: Vanilla JS, Vue 3, and SvelteKit

While many guides focus exclusively on React, WebMCP is a web platform standard that works natively across plain HTML/JS and any frontend framework including Vue 3 and SvelteKit.

1. Vanilla JavaScript Implementation

In plain Vanilla JS, verify navigator.modelContext is present and register tools when the DOM loads:

document.addEventListener('DOMContentLoaded', () => {
  if (typeof navigator === 'undefined' || !navigator.modelContext) return;

  const searchTool = navigator.modelContext.registerTool({
    name: 'searchDocs',
    description: 'Search documentation entries by query string',
    inputSchema: {
      type: 'object',
      properties: { query: { type: 'string' } },
      required: ['query']
    },
    execute: async ({ query }) => {
      const res = await fetch(`/api/search?q=${encodeURIComponent(query)}`);
      return await res.json();
    }
  });
});

2. Vue 3 Composition API Implementation

In Vue 3, perform tool registration inside the onMounted lifecycle hook and clean up in onUnmounted:

<script setup lang="ts">
import { onMounted, onUnmounted } from 'vue';

let activeTool: any = null;

onMounted(() => {
  if (typeof navigator !== 'undefined' && 'modelContext' in navigator) {
    activeTool = (navigator as any).modelContext.registerTool({
      name: 'filterCatalog',
      description: 'Filter catalog items by category and maximum price',
      inputSchema: {
        type: 'object',
        properties: {
          category: { type: 'string' },
          maxPrice: { type: 'number' }
        }
      },
      execute: async ({ category, maxPrice }) => {
        // Update Vue reactive store state
        return { success: true };
      }
    });
  }
});

onUnmounted(() => {
  activeTool?.unregister?.();
});
</script>

3. SvelteKit Implementation

In SvelteKit, place WebMCP registrations inside Svelte's onMount function to ensure code executes exclusively client-side:

<script lang="ts">
  import { onMount } from 'svelte';

  onMount(() => {
    if (typeof navigator !== 'undefined' && (navigator as any).modelContext) {
      const tool = (navigator as any).modelContext.registerTool({
        name: 'submitFeedback',
        description: 'Submit user feedback rating and comments',
        inputSchema: {
          type: 'object',
          properties: {
            rating: { type: 'number', minimum: 1, maximum: 5 },
            comment: { type: 'string' }
          },
          required: ['rating']
        },
        execute: async (data) => {
          return { status: 'submitted' };
        }
      });

      return () => tool?.unregister?.();
    }
  });
</script>

Testing Your Implementation

Once registered, test your tools across frameworks using the Chrome Model Context Tool Inspector or scan your site on AgentReady.