Skip to main content

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

Ensure @mcp-b/global is imported before calling registerTool(). For SSR (Nuxt), see the Nuxt guide.
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.