Svelte & SvelteKit Integration

git clone https://github.com/WebMCP-org/examples.git
cd examples/svelte && pnpm install && pnpm dev

<script lang="ts">
  import { onMount, onDestroy } from 'svelte';
  import '@mcp-b/global';

  let count = $state(0);
  let reg: { unregister: () => void } | null = null;

  onMount(() => {
    reg = navigator.modelContext.registerTool({
      name: 'increment',
      description: 'Increment the counter',
      inputSchema: {
        type: 'object',
        properties: { amount: { type: 'number' } }
      },
      async execute({ amount = 1 }) {
        count += amount as number;
        return { content: [{ type: 'text', text: `Count: ${count}` }] };
      }
    });
  });

  onDestroy(() => reg?.unregister());
</script>

<p>Count: {count}</p>

<script lang="ts">
  import { browser } from '$app/environment';
  import { onMount, onDestroy } from 'svelte';
  import '@mcp-b/global';

  let reg: { unregister: () => void } | null = null;

  onMount(() => {
    if (!browser) return;
    reg = navigator.modelContext.registerTool({ /* ... */ });
  });

  onDestroy(() => reg?.unregister());
</script>

import '@mcp-b/global';

export function webmcp(node: HTMLElement, tool: Parameters<typeof navigator.modelContext.registerTool>[0]) {
  const reg = navigator.modelContext.registerTool(tool);
  return { destroy: () => reg.unregister() };
}

<div use:webmcp={{ name: 'my_tool', description: 'My tool', ... }}>
  Content
</div>