> ## 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.

# Vue.js Integration

> Integrate WebMCP tools with Vue 3 using the Composition API.

<Card title="Community Example" icon="github" href="https://github.com/bestian/vue-MCP-B-demo">
  Vue 3 Composition API integration by Besian
</Card>

## Basic Usage

```vue theme={null}
<script setup lang="ts">
import { onMounted, onUnmounted } from 'vue';
import '@mcp-b/global';

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

onMounted(() => {
  registration = navigator.modelContext.registerTool({
    name: 'get_greeting',
    description: 'Get a greeting message',
    inputSchema: { type: 'object', properties: {} },
    async execute() {
      return { content: [{ type: 'text', text: 'Hello from Vue!' }] };
    }
  });
});

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

## With Reactive State

Tools can read and modify Vue reactive state:

```vue theme={null}
<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue';
import '@mcp-b/global';

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

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

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

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

## Creating a Composable

For reuse across components, create a composable:

```typescript "composables/useWebMCPTool.ts" theme={null}
import { onMounted, onUnmounted } from 'vue';
import '@mcp-b/global';

export function useWebMCPTool(tool: Parameters<typeof navigator.modelContext.registerTool>[0]) {
  let reg: { unregister: () => void } | null = null;
  onMounted(() => { reg = navigator.modelContext.registerTool(tool); });
  onUnmounted(() => { reg?.unregister(); });
}
```

```vue theme={null}
<script setup lang="ts">
import { useWebMCPTool } from '@/composables/useWebMCPTool';

useWebMCPTool({
  name: 'my_tool',
  description: 'My tool',
  inputSchema: { type: 'object', properties: {} },
  async execute() {
    return { content: [{ type: 'text', text: 'Done' }] };
  }
});
</script>
```

## Common Gotchas

<AccordionGroup>
  <Accordion title="Tools not registering">
    Ensure `@mcp-b/global` is imported before calling `registerTool()`. For SSR (Nuxt), see the [Nuxt guide](/frameworks/nuxt).
  </Accordion>

  <Accordion title="Stale state in handlers">
    Access `.value` inside the handler to get current state:

    ```typescript theme={null}
    async execute() {
      return { content: [{ type: 'text', text: `Count: ${count.value}` }] };
    }
    ```
  </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.