{"_id":"@aivue/mcp-client","name":"@aivue/mcp-client","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@aivue/mcp-client","version":"1.0.0","description":"Model Context Protocol (MCP) client for Vue.js - Connect to MCP servers and interact with tools, resources, and prompts following official MCP architecture","author":{"name":"reachbrt"},"license":"MIT","main":"./dist/index.js","module":"./dist/index.mjs","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./dist/mcp.css":"./dist/mcp.css"},"scripts":{"build":"npm run clean && vite build && npm run postbuild","dev":"vite build --watch","clean":"rm -rf dist","test":"vitest run","test:watch":"vitest","prepublishOnly":"npm run build","postbuild":"cp README.md dist/ 2>/dev/null || true"},"keywords":["vue","vue3","ai","mcp","mcp-client","model-context-protocol","json-rpc","tools","resources","prompts","typescript","mcp-host"],"repository":{"type":"git","url":"git+https://github.com/reachbrt/vueai.git","directory":"packages/mcp"},"homepage":"https://github.com/reachbrt/vueai/tree/main/packages/mcp","bugs":{"url":"https://github.com/reachbrt/vueai/issues"},"peerDependencies":{"vue":"^2.6.0 || ^3.0.0"},"dependencies":{"@aivue/core":"^1.3.13","cors":"^2.8.5","express":"^5.2.1"},"devDependencies":{"@types/node":"^20.10.0","@vitejs/plugin-vue":"^5.0.0","eslint":"^8.55.0","typescript":"^5.3.0","vite":"^5.0.0","vite-plugin-dts":"^4.5.3","vitest":"^1.0.0","vue-tsc":"^1.8.0"},"publishConfig":{"access":"public","registry":"https://registry.npmjs.org/"},"_id":"@aivue/mcp-client@1.0.0","gitHead":"5d6b23d30fd6d96dde4d4d14dce1fe9355158871","_nodeVersion":"22.14.0","_npmVersion":"10.9.2","dist":{"integrity":"sha512-/1F2aI0aiya5P8Xh8AAR6Lt5jf9TK8WJQNqcvSetK5UhxvRsFEaWyGb+jsVGU8cbeJM6gtlGSsm+qQm8CX3OBw==","shasum":"0ef6283530eb9df631f75197f89470b089662cf7","tarball":"https://registry.npmjs.org/@aivue/mcp-client/-/mcp-client-1.0.0.tgz","fileCount":18,"unpackedSize":56986,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQCZQMW6pynHSKhF22SL5dzrkNwkhOsJrBDGfwXcBCFSDgIhAP1lldNZrBt6A17rBe9T1zBcvdgmJRgHOKN0YmhUWlXq"}]},"_npmUser":{"name":"aivue","email":"reachbrt@gmail.com"},"directories":{},"maintainers":[{"name":"aivue","email":"reachbrt@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/mcp-client_1.0.0_1768888986576_0.8897348853905227"},"_hasShrinkwrap":false}},"time":{"created":"2026-01-20T06:03:06.495Z","1.0.0":"2026-01-20T06:03:06.721Z","modified":"2026-01-20T06:03:06.913Z"},"maintainers":[{"name":"aivue","email":"reachbrt@gmail.com"}],"description":"Model Context Protocol (MCP) client for Vue.js - Connect to MCP servers and interact with tools, resources, and prompts following official MCP architecture","homepage":"https://github.com/reachbrt/vueai/tree/main/packages/mcp","keywords":["vue","vue3","ai","mcp","mcp-client","model-context-protocol","json-rpc","tools","resources","prompts","typescript","mcp-host"],"repository":{"type":"git","url":"git+https://github.com/reachbrt/vueai.git","directory":"packages/mcp"},"author":{"name":"reachbrt"},"bugs":{"url":"https://github.com/reachbrt/vueai/issues"},"license":"MIT","readme":"# @aivue/mcp-client\n\n> Official Model Context Protocol (MCP) client for Vue.js - Following the standard MCP architecture: **Host App → MCP Client → MCP Server**\n\n[![npm version](https://img.shields.io/npm/v/@aivue/mcp-client.svg)](https://www.npmjs.com/package/@aivue/mcp-client)\n[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)\n\n## 🏗️ Architecture\n\nThis package implements the official Model Context Protocol (MCP) client architecture:\n\n```\n┌─────────────┐      ┌─────────────┐      ┌─────────────┐\n│  Host App   │ ───> │ MCP Client  │ ───> │ MCP Server  │\n│  (Vue.js)   │ <─── │ (@aivue/mcp)│ <─── │             │\n└─────────────┘      └─────────────┘      └─────────────┘\n```\n\nThe MCP Client acts as a bridge between your Vue.js application (Host App) and MCP servers, handling:\n- JSON-RPC 2.0 protocol communication\n- Transport layer (HTTP/SSE)\n- Request/response management\n- Event handling and subscriptions\n\n## 🎯 Features\n\n### Core MCP Operations (Official Spec)\n- ✅ **tools/list** - List available tools from MCP server\n- ✅ **tools/call** - Execute tools with parameters\n- ✅ **resources/list** - List available resources\n- ✅ **resources/read** - Read resource contents\n- ✅ **prompts/list** - List available prompts\n- ✅ **prompts/get** - Retrieve prompt templates\n\n### Additional Features\n- 🔌 **Framework-Agnostic Core** - Clean TypeScript API that works anywhere\n- 🎨 **Vue Integration** - Composables and components for seamless Vue.js integration\n- 🔄 **JSON-RPC 2.0** - Full JSON-RPC protocol implementation\n- 🌐 **HTTP/SSE Transport** - Browser-compatible transport layer\n- 📡 **Real-time Updates** - Event-driven architecture for live updates\n- 💪 **TypeScript** - Full type safety and IntelliSense support\n\n## 📦 Installation\n\n```bash\nnpm install @aivue/mcp-client\n```\n\n## 🚀 Quick Start\n\n### Using the Composable (Recommended)\n\n```vue\n<template>\n  <div>\n    <button @click=\"connect\" :disabled=\"connected\">Connect</button>\n    <button @click=\"disconnect\" :disabled=\"!connected\">Disconnect</button>\n\n    <div v-if=\"connected\">\n      <h3>Available Tools ({{ tools.length }})</h3>\n      <ul>\n        <li v-for=\"tool in tools\" :key=\"tool.name\">\n          {{ tool.name }} - {{ tool.description }}\n        </li>\n      </ul>\n\n      <button @click=\"executeCalculator\">Calculate 2 + 2</button>\n      <div v-if=\"result\">Result: {{ result }}</div>\n    </div>\n\n    <div v-if=\"error\" class=\"error\">{{ error.message }}</div>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { useMCP } from '@aivue/mcp-client';\n\nconst result = ref(null);\n\nconst {\n  connected,\n  tools,\n  error,\n  connect,\n  disconnect,\n  callTool,\n} = useMCP({\n  transport: {\n    type: 'http',\n    url: 'http://localhost:3000/mcp',\n  },\n});\n\nconst executeCalculator = async () => {\n  const toolResult = await callTool({\n    name: 'calculator',\n    arguments: {\n      operation: 'add',\n      a: 2,\n      b: 2,\n    },\n  });\n  \n  result.value = toolResult.content[0].text;\n};\n</script>\n```\n\n### Using the Component\n\n```vue\n<template>\n  <MCPToolExecutor\n    :tools=\"tools\"\n    :connected=\"connected\"\n    :loading=\"loading\"\n    :error=\"error\"\n    @connect=\"connect\"\n    @refresh=\"refreshTools\"\n    @execute=\"callTool\"\n  />\n</template>\n\n<script setup lang=\"ts\">\nimport { MCPToolExecutor, useMCP } from '@aivue/mcp';\n\nconst {\n  connected,\n  tools,\n  loading,\n  error,\n  connect,\n  refreshTools,\n  callTool,\n} = useMCP({\n  transport: {\n    type: 'http',\n    url: 'http://localhost:3000/mcp',\n  },\n});\n</script>\n```\n\n### Using the Core Client (Framework-Agnostic)\n\n```typescript\nimport { MCPClient } from '@aivue/mcp';\n\nconst client = new MCPClient({\n  transport: {\n    type: 'http',\n    url: 'http://localhost:3000/mcp',\n  },\n});\n\n// Connect to server\nawait client.connect();\n\n// List available tools\nconst tools = await client.listTools();\n\n// Call a tool\nconst result = await client.callTool({\n  name: 'calculator',\n  arguments: { operation: 'add', a: 2, b: 2 },\n});\n\n// List resources\nconst resources = await client.listResources();\n\n// Read a resource\nconst content = await client.readResource('file:///path/to/file.txt');\n\n// Get prompts\nconst prompts = await client.listPrompts();\nconst messages = await client.getPrompt('greeting', { name: 'Alice' });\n\n// Disconnect\nawait client.disconnect();\n```\n\n## 📚 API Reference\n\n### `useMCP(config: MCPClientConfig)`\n\nVue composable for MCP integration.\n\n**Returns:**\n- `connected` - Connection status\n- `serverInfo` - Server information\n- `tools` - Available tools\n- `resources` - Available resources\n- `prompts` - Available prompts\n- `loading` - Loading state\n- `error` - Error state\n- `connect()` - Connect to server\n- `disconnect()` - Disconnect from server\n- `callTool(toolCall)` - Execute a tool\n- `readResource(uri)` - Read a resource\n- `getPrompt(name, args)` - Get a prompt\n- `subscribeResource(uri)` - Subscribe to resource updates\n- `unsubscribeResource(uri)` - Unsubscribe from resource updates\n\n### `MCPClient`\n\nCore MCP client class.\n\n**Methods:**\n- `connect()` - Connect to MCP server\n- `disconnect()` - Disconnect from server\n- `listTools()` - List available tools\n- `callTool(toolCall)` - Execute a tool\n- `listResources()` - List available resources\n- `readResource(uri)` - Read a resource\n- `subscribeResource(uri)` - Subscribe to resource updates\n- `unsubscribeResource(uri)` - Unsubscribe from updates\n- `listPrompts()` - List available prompts\n- `getPrompt(name, args)` - Get a prompt\n- `on(event, handler)` - Add event listener\n- `off(event, handler)` - Remove event listener\n\n## 🔧 Configuration\n\n```typescript\ninterface MCPClientConfig {\n  serverInfo?: {\n    name: string;\n    version: string;\n  };\n  transport: {\n    type: 'http' | 'sse';\n    url: string;\n    headers?: Record<string, string>;\n  };\n  timeout?: number;  // Request timeout in ms (default: 30000)\n  retries?: number;  // Number of retries (default: 0)\n}\n```\n\n## 🎨 Styling\n\nImport the CSS file in your main file:\n\n```typescript\nimport '@aivue/mcp/dist/mcp.css';\n```\n\nOr customize the styles by overriding CSS variables:\n\n```css\n.mcp-tool-executor {\n  --mcp-primary-color: #007bff;\n  --mcp-border-radius: 8px;\n  --mcp-spacing: 1rem;\n}\n```\n\n## 📖 Examples\n\nCheck out the [examples directory](../../examples) for more usage examples.\n\n## 🤝 Contributing\n\nContributions are welcome! Please read our [Contributing Guide](../../CONTRIBUTING.md) for details.\n\n## 📄 License\n\nMIT © [reachbrt](https://github.com/reachbrt)\n\n## 🔗 Links\n\n- [Model Context Protocol](https://modelcontextprotocol.io)\n- [MCP Specification](https://spec.modelcontextprotocol.io)\n- [GitHub Repository](https://github.com/reachbrt/vueai)\n- [npm Package](https://www.npmjs.com/package/@aivue/mcp)\n\n","readmeFilename":"README.md","_rev":"1-e7855f01c95ee782805134ea0c4d7750"}