Vue Bits MCP Client

A powerful and easy-to-use client library for accessing the Vue Bits MCP Server. Get instant access to 40+ high-quality animated Vue components with intelligent search, dependency analysis, and code generation.

🚀 Features

• Easy Integration: Simple API for connecting to Vue Bits MCP Server
• Multiple Transports: Support for both HTTP and stdio transports
• Intelligent Search: Find components by name, category, functionality, or tags
• Code Access: Get complete component source code and documentation
• Dependency Analysis: Analyze and resolve component dependencies
• Installation Guides: Get project-specific setup instructions
• Recommendations: Get personalized component suggestions
• TypeScript Support: Full TypeScript definitions included

📦 Installation

npm install vue-bits-mcp-client

🎯 Quick Start

Basic Usage

import { VueBitsMCPClient } from 'vue-bits-mcp-client';

const client = new VueBitsMCPClient({
  serverUrl: 'https://vue-mcp.onrender.com',
  transport: 'http'
});

await client.connect();

// Search for components
const components = await client.searchComponents({
  query: 'text animation',
  category: 'TextAnimations',
  limit: 5
});

// Get component code
const component = await client.getComponentCode(components[0].id);
console.log(component.code);

await client.disconnect();

Quick Utilities

For simple operations, use the quick utility functions:

import { quickSearch, quickGetComponent } from 'vue-bits-mcp-client';

// Quick search (auto-connects and disconnects)
const components = await quickSearch('animation');

// Quick get component
const component = await quickGetComponent(components[0].id);

🛠️ API Reference

Client Configuration

const client = new VueBitsMCPClient({
  serverUrl: 'https://vue-mcp.onrender.com',  // Server URL
  transport: 'http',                          // 'http' or 'stdio'
  timeout: 30000,                            // Request timeout (ms)
  retries: 3                                 // Number of retries
});

Core Methods

searchComponents(options)

Search for Vue components with flexible filtering.

const components = await client.searchComponents({
  query: 'text animation',           // Search query
  category: 'TextAnimations',        // Filter by category
  subcategory: 'Split Text',         // Filter by subcategory
  tags: ['gsap', '3d'],             // Filter by tags
  limit: 10,                        // Max results
  sortBy: 'popularity'              // Sort order
});

getComponentCode(componentId, options)

Get complete component source code and documentation.

const component = await client.getComponentCode('component-id', {
  includeProps: true,     // Include props documentation
  includeExamples: true   // Include usage examples
});

getInstallationGuide(componentId, projectType)

Get installation instructions for a specific project type.

const guide = await client.getInstallationGuide('component-id', 'vue3');
console.log(guide.installCommands.npm);  // npm install command
console.log(guide.setupInstructions);    // Setup steps

analyzeDependencies(componentIds, options)

Analyze dependencies for multiple components.

const analysis = await client.analyzeDependencies(['comp1', 'comp2'], {
  packageManager: 'npm',
  includeDevDependencies: false
});

Discovery Methods

listCategories(options)

List all available component categories.

const categories = await client.listCategories({
  includeSubcategories: true,
  includeStats: true
});

getPopularComponents(options)

Get the most popular components.

const popular = await client.getPopularComponents({
  category: 'Animations',
  limit: 10
});

getRecommendations(options)

Get personalized component recommendations.

const recommendations = await client.getRecommendations({
  categories: ['Animations', 'Components'],
  complexity: 'medium',
  performance: 'high',
  tags: ['gsap', 'interactive'],
  limit: 5
});

getSimilarComponents(componentId, options)

Find components similar to a given component.

const similar = await client.getSimilarComponents('component-id', {
  limit: 5
});

🌐 Transport Options

HTTP Transport (Recommended)

Connect to a remote Vue Bits MCP server via HTTP.

const client = new VueBitsMCPClient({
  transport: 'http',
  serverUrl: 'https://vue-mcp.onrender.com'
});

Stdio Transport

Connect to a local Vue Bits MCP server process.

const client = new VueBitsMCPClient({
  transport: 'stdio'
  // Requires vue-bits-mcp server to be installed locally
});

📚 Examples

Check out the /examples directory for complete usage examples:

• basic-usage.js - Basic client operations
• http-client.js - HTTP transport example
• quick-utilities.js - Quick utility functions

Run examples:

npm run example          # Basic usage
npm run example:http     # HTTP client

🔧 Development

# Install dependencies
npm install

# Build the library
npm run build

# Run tests
npm test

# Run linting
npm run lint

# Format code
npm run format

📝 TypeScript Support

The library includes full TypeScript definitions:

import { VueBitsMCPClient, VueBitsComponent, SearchOptions } from 'vue-bits-mcp-client';

const client: VueBitsMCPClient = new VueBitsMCPClient();
const components: VueBitsComponent[] = await client.searchComponents(options);

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

📄 License

MIT License - see the LICENSE file for details.

🔗 Related

• Vue Bits MCP Server - The MCP server this client connects to
• Vue Bits - The original Vue components library
• Model Context Protocol - The protocol specification