> ## Documentation Index
> Fetch the complete documentation index at: https://mcp-b-sync-npm-packages-docs-bf03420.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Svelte & SvelteKit Integration

> Integrate WebMCP tools with Svelte and SvelteKit.

<Card title="Full Example" icon="github" href="https://github.com/WebMCP-org/examples/tree/main/svelte">
  Production-ready Svelte example with runes and actions
</Card>

## Quick start

```bash theme={null}
git clone https://github.com/WebMCP-org/examples.git
cd examples/svelte && pnpm install && pnpm dev
```

## The pattern

Use `onMount`/`onDestroy` for lifecycle management:

```svelte theme={null}
<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>
```

## SvelteKit SSR

Add the `browser` check to avoid SSR errors:

```svelte "+page.svelte" theme={null}
<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>
```

## Using actions

Svelte actions encapsulate tool registration cleanly:

```typescript "lib/actions/webmcp.ts" theme={null}
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() };
}
```

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

## Common issues

<AccordionGroup>
  <Accordion title="'navigator is not defined' during SSR">
    Use the `browser` check from `$app/environment` in SvelteKit.
  </Accordion>

  <Accordion title="Tools disappear after navigation">
    Move registration to `+layout.svelte` for persistence across routes.
  </Accordion>
</AccordionGroup>

## Development

Use [Chrome DevTools MCP](/packages/chrome-devtools-mcp) for AI-driven development - your AI can write, discover, and test tools in real-time.