@openvue/mcp

@openvue/mcp

Model Context Protocol (MCP) server for the OpenVue component library. Provides AI assistants with comprehensive access to OpenVue component documentation, props, events, slots, theming, and code examples.

What is MCP?

Model Context Protocol (MCP) is an open standard that enables AI models to connect with external tools and data sources. By installing this MCP server, your AI assistant gains deep knowledge of OpenVue components and can provide accurate, up-to-date information while helping you build Vue.js applications.

Installation

Claude Code

Add the OpenVue MCP server using the CLI:

# Add to your user config (available in all projects)
claude mcp add openvue -s user -- npx -y @openvue/mcp

# Or add to current project only
claude mcp add openvue -- npx -y @openvue/mcp

Alternatively, use the JSON format for more control:

claude mcp add-json openvue '{"command":"npx","args":["-y","@openvue/mcp"]}' -s user

Useful commands:

claude mcp list          # List all MCP servers
claude mcp get openvue   # Get server details
claude mcp remove openvue # Remove the server

After adding, start a new Claude Code session and use /mcp to verify the connection.

Reference: Claude Code MCP Documentation

Cursor

Option 1: Project Configuration

Create .cursor/mcp.json in your project:

{
    "mcpServers": {
        "openvue": {
            "command": "npx",
            "args": ["-y", "@openvue/mcp"]
        }
    }
}

Option 2: Global Configuration

Create or edit ~/.cursor/mcp.json in your home directory:

{
    "mcpServers": {
        "openvue": {
            "command": "npx",
            "args": ["-y", "@openvue/mcp"]
        }
    }
}

Option 3: Via Settings UI

1. Go to Cursor Settings > Tools & Integrations
2. Click New MCP Server
3. Add the configuration above

After adding, go to Settings > MCP and click the refresh button. The Composer Agent will automatically use OpenVue tools when relevant.

Reference: Cursor MCP Documentation

VS Code (GitHub Copilot)

Option 1: Project Configuration

Create .vscode/mcp.json in your project:

{
    "servers": {
        "openvue": {
            "command": "npx",
            "args": ["-y", "@openvue/mcp"]
        }
    }
}

Option 2: User Configuration (Global)

Create or edit the MCP configuration file in your VS Code user data directory:

• macOS: ~/Library/Application Support/Code/User/mcp.json
• Windows: %APPDATA%\Code\User\mcp.json
• Linux: ~/.config/Code/User/mcp.json

{
    "servers": {
        "openvue": {
            "command": "npx",
            "args": ["-y", "@openvue/mcp"]
        }
    }
}

Option 3: Via Command Palette

1. Open Command Palette (Cmd+Shift+P / Ctrl+Shift+P)
2. Type "MCP: Add Server"
3. Select "Command (stdio)"
4. Enter openvue as the server ID
5. Enter npx as the command
6. Enter -y,@openvue/mcp as the arguments

After adding, use Copilot in Agent mode to access OpenVue tools. The MCP server will be available in GitHub Copilot Chat.

Reference: VS Code MCP Documentation

OpenAI Codex CLI

Option 1: Using the CLI

codex mcp add openvue -- npx -y @openvue/mcp

Option 2: Direct Configuration

Edit ~/.codex/config.toml:

[mcp_servers.openvue]
command = "npx"
args = ["-y", "@openvue/mcp"]

After adding, the MCP server will be available in both the Codex CLI and VS Code extension.

Reference: OpenAI Codex MCP Documentation

Windsurf

Option 1: Via Settings UI

1. Click Windsurf - Settings (bottom right) or press Cmd+Shift+P / Ctrl+Shift+P
2. Type "Open Windsurf Settings"
3. Navigate to Cascade section
4. Click Manage MCPs > View raw config

Option 2: Direct Configuration

Edit ~/.codeium/windsurf/mcp_config.json:

{
    "mcpServers": {
        "openvue": {
            "command": "npx",
            "args": ["-y", "@openvue/mcp"]
        }
    }
}

After adding, the MCP server will be available in Cascade.

Reference: Windsurf MCP Documentation

Zed

Add to your Zed settings (~/.config/zed/settings.json on Linux, ~/Library/Application Support/Zed/settings.json on macOS):

{
    "context_servers": {
        "openvue": {
            "command": {
                "path": "npx",
                "args": ["-y", "@openvue/mcp"]
            }
        }
    }
}

After adding, restart Zed. Check the Agent Panel's settings view - a green indicator dot next to "openvue" confirms the server is active.

Reference: Zed MCP Documentation

Available Tools

Component Information

Code Examples

Theming & Styling

Documentation & Guides

Search & Discovery

Utilities

Vue Composables

Example Prompts

Once installed, try asking your AI assistant:

• "What are all the props available for the DataTable component?"
• "Show me how to implement row selection in DataTable"
• "How do I customize Button styles using Pass Through?"
• "What design tokens are available for the Card component?"
• "Find me a component for selecting multiple items from a list"
• "Compare AutoComplete and Select components"

Requirements

• Node.js 18+
• One of the supported AI tools (Claude Code, VS Code + Copilot, Cursor, Windsurf, Claude Desktop)

Links

• OpenVue website
• Model Context Protocol
• GitHub Repository
• Report Issues

License

MIT