Vue.js Integration

Integrate WebMCP tools with Vue 3 using the Composition API.

Community Example

Vue 3 Composition API integration by Besian

Basic Usage

<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:

<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:

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(); });
}

<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

Tools not registering

Ensure @mcp-b/global is imported before calling registerTool(). For SSR (Nuxt), see the Nuxt guide.

Stale state in handlers

Access .value inside the handler to get current state:

async execute() {
  return { content: [{ type: 'text', text: `Count: ${count.value}` }] };
}

Development

Use Chrome DevTools MCP for AI-driven development - your AI can write, discover, and test tools in real-time.